About Computer Icons
Mike de Sousa, Director, AbleStable

Well designed computer icons are visual aids that assist in the usability of a software product or website. Discover their history and how to create icons of your own...

The Meaning of Icons

The literal meaning of the word icon is an image, representation, symbol, or simile. The word icon is derived from the Greek eikon (a likeness or image) that embodies properties of what it represents.

A computer icon is a pictorial representation of a file, program, web page, or command, that enables a facility or destination to be activated by means of a visual cue rather than by a textural instruction. Computer icons speed the process of navigation in a software product or on a website. On the left is a screenshot of some of the many icons used at AbleStable. Icons can be representational like the book icon used in our product area: At other times icons are designed as more symbolic images like our contact icon: The emphasis of how computer icons may be used often depends on their cultural context. In Japan for example the symbolic icon is very popular, while in the US users are more exposed to the object, or representational approach. Icons: AbleStable © 2002-2010

The Development of the Computer Icon

The Apple Mac began every session with a happy Mac icon that signified the computer was starting up successfully. This simple icon delivered the message that the graphical computer interface had come of age.

The Apple Mac was the first widely available computer system that presented a graphical user interface. The Mac used icons to represent tasks from it's inception. The main icon and window elements of the Mac system 1.1 arranged on a virtual desktop continue to function as the dominant interface 30 years on.

 

The prevalence of the Windows and Mac computer systems have established a core set of computer icons that users are familiar with. The first version of the Windows operating system did not however feature icons as can be seen on the screenshot on the left.

A computer image is a bitmap (pixels) or vector image (mathematical paths), which can be saved using various formats (BMP, PSD, GIF, JPEG, etc). Icon files (.ico) are comprised of several images, each with a different size and number of colours (mono, 16 colours, 256 colours, 16.8M)of sizes (usually 16x16, 32x32, and 48x48). An icon also has the ability to include transparent areas (the 'Alpha Channel'). This allows seeing the screen background behind the icon within its image.

Windows XP and Mac OSX icons With the introduction of Windows XP and Mac OSX came more detailed icons which provide a visual depth not seen in earlier operating systems. Although Windows and Apple Macintosh icons appear very similar, the file format is totally different and icons from one system is not recognised by the other. If an image format is missing, Windows displays the nearest existing image (the result however is usually distorted). The image format of Windows XP contains a 24 bit image, providing 16.8 million colours to the image, plus an additional 8 bit image called the opacity image (Alpha Channel). The image colour depth is 32 bits (32 bits defines one pixel). This results in a smooth transparency. The icon image is displayed with smooth contours on all backgrounds and permits the creation of dropped shadows.

Windows Icon Sizes and Colours

Image Sizes

• 16x16: Displayed in the taskbar window in the upper-left corner, detailed lists, etc.

• 24x24: Displayed in Windows 2000/XP menus

• 32x32: Displayed in desktop, lists, etc.

• 48x48: Displayed in Windows XP explorer and system lists, etc.

Image Colours

• Monochrome: Displayed by Windows if the screen is monochrome

• 16 colours: Displayed by Windows if the screen is 16 or 256 colours

• 256 colours: Displayed by Windows if the screen is 16bits or True Colours

• Windows XP: Displayed by Windows XP if the screen is True Colour or more

Colour Models

The RGB colour model

Each value represents Red, Green or Blue light. RGB colours are called 'Additive' (the values of each colour component are combined to emit the final colour). Any RGB value is incremented, and the resulting colour becomes lighter. White is given by the maximum value of each value (Red=255, Green=255, Blue=255), and black is given by the absence of light in each value (Red=0, Green=0, Blue=0).

HSB Method

The HSB colour model is a mathematical representation of colour The HSB model breaks the colour into three components: Hue, Saturation, and Brightness, where Hue has a value from 0 to 360 degrees, and Saturation and Brightness, a value from 0 to 100%.

Developing Icons

Creating computer icons needn't require the use of an icon editor unless you wish to save the image as an icon file. There are many icons which are presented in software and on websites which are simply image files. If you're trying to develop a favicon for your website however (the tiny icons that sometimes appear on the address bar of the browser window), or you're developing software which requires icon files, then you'll have to save your file as an .ico file (Windows).

You can develop your own icons for websites and software with Toolbar Paint developed by Edgar Hansen, an excellent Windows freeware image editor specially designed for the job. This version is supplied with three plug-ins ready to go: export .ico files; blur; and adjust luma (brightness). Download Toolbar Paint 61.5kb

Note: The freeware that is featured at AbleStable is unconditional freeware: no nag screens; no advertisements; no registrations; no payments; no spying; no collection of demographic information; and no unauthorised Internet connections from your system.

Usability Issues

In general it's advisable to include text under an icon image unless its meaning is very clear from the context. In all cases, you should include <alt> tags with descriptions of the icons. Alt tags help clarify the meaning of image files, and assists those with visual impairment.

Before you publish your icons in your software or on your website carry out some usability testing. Ask friends to use your software or site and observe how effective the icons are at communicating their intended meaning. Resist asking questions during the testing period, simply observe. Ask questions after the testing period and record everything. Are the icons legible? Can they be easily deciphered? Icons should be large enough for users to comprehend.

If there's a generally accepted icon that's used for a given purpose (the magnifying glass for search) then use it. Don't invent a new visual vocabulary that the user will have to learn unless you need to.

Conclusion

Developing great icons can be harder work than the first-time experimenter might think. When you next browse the Internet pay particular attention to the use of iconography, and observe when you feel it works and try to figure out why.

The best teacher is experience, the best feeling is doing, so get going now...