de Sousa, Director, AbleStable
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
Meaning of Icons
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
AbleStable © 2002-2007
Development of the Computer Icon
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.
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.
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.
Between Image Files and Icon Files
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
XP and Mac OSX icons
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).
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.
Icon Sizes and Colours
• 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.
Monochrome: Displayed by Windows if the screen
• 16 colours:
Displayed by Windows if the screen is 16 or 256
• 256 colours:
Displayed by Windows if the screen is 16bits or
• Windows XP:
Displayed by Windows XP if the screen is True Colour
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 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%.
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).
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
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.
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.
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.
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
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.
best teacher is experience, the best feeling is
doing, so get going now...