What
are Website Icons ? I think
of them in in their purest form as having the
same purpose as application
icons - to suggest the purpose of a
function. Just like application icons
they are usually icons people can universally associate
with the given function. For example a webpage
might have an icon of an envelope to draw
attention to links like "Send an E-Mail" or
a small linked picture of a shopping cart
for the purpose of ordering something or
seeing
what products have been selected. Both an
envelope and shopping cart tend to be universally
recognized.
There's literally an endless amount of information
on the Web that can have some form of image
association applied to it. In most cases
though the linked icon should be accompanied
by linked descriptive text and even
better this should be in plain old HTML text.
There's a lot of reasons why linked descriptive
text is necessary in HTML form but first take
a moment to view the example below. Example of website icons
You can kind of
guess that the icons themselves (in the example above)
might be confusing
to a user.
If left un-described the book icons for "Education
Center" could have different a meanings for different
people. The same is true for the other icons in this
example. That's why descriptive text is almost always
recommended. Descriptive text in HTML form (not image
text) is recommended because individuals with vision
impairment might be using text-to-speech browsers. They
cannot see the icon or image text but can only "hear" the
spoken HTML text. It's also important for users that
turn-off images in their browsers like researchers.
Researchers and people who are just out to get information
may skip
a site entirely if they find it confusing with non-descriptive
image links. To solve part of the problem HTML includes ALT
Attributes for web
publishers to describe images for these types of users
but ALT's remain mostly
invisible to other types of users. There are also serious
search engine optimization issues to consider with
not using descriptive HTML text links (referred to
as Anchor
Text). Recommendation: All icons
should be universally recognized, contain ALT attributes
describing the purpose of the image, and have linked
descriptive text (anchor text).
What characterizes a Website icon from other
types of icons ?
Website icons like application icons should be universally
recognized and have descriptive attributes or labels
because they are representing the purpose of
a function. This is also the case for Desktop
Icons that usually carry a small label of some kind right under the icon. Messenger
Icons, Emoticons,
and Avatars do
not necessarily need the same level of attention since they are not generally
associated with any computer function. Website icons are typically .gif or
.jpg although other formats are supported such as .png and possibly a few others.
Image size is mostly not as important for website icons since web
publishers can manually set the width and height in HTML. Comparatively odd
sizes tend to
be okay.
