Website Icons

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.

Rogue Icons & Complete Misfits
This sounds rediculous but I couldn't think of a better name. Rogue Icons tend to fit into more than one icon type because of their size and/or format. So really they are less confined than the standard icon types but they cause a lot of confusion since they do not fit into any one category. Maybe Non-Standard Icon would be a better name but Rogue sounds so cool!

Complete Misfits (another scientific sounding name I created) are icons that simply don't fit into ANY category...huh? See example below illustrating Rogue Icons & Complete Misfits: