Submitted by freighthouse on Fri, 05/08/2009 - 23:40

Overview

An icon is a picture, image or graphic displayed on the screen that represents a specific file, directory, window, application or action. It is a small pictogram used to effectively supplement the normal alphanumerics of the computer display. It can represent any macro command or process, mood-signaling device or any other indicator, and can be used to represent files, folders and disk drives, as toolbar buttons, to illustrate menu items and taskbar items, etc. Icons can be used for identification (company logo), to indicate status (ex. high, low, etc.), serve as a space-efficient alternative to text (directors or road signs), or to draw attention to an item within an informational display (error icons). 

Logo vs. Icon

There has been much confusion as to the distictions between a logo and an Icon.  According to Wikipedia, a logo is a graphic element which uniquely identifies [..]products [..] in order to differentiate publicly the owner of the logotype from other entities.  An icon, on the other hand, is a small pictogram used to supplement the normal alphanumerics of the computer.

Rationale

The main purpose of icons is to effectively communicate an idea in a simple and clear manner while saving real estate on the screen.  They are used as a scannining mechanism to replace text and descriptors.

Behavior

Often, by placing the cursor on the icon and clicking (or double-clicking), the user will start an associated program or open an associated file, directory, or window, or complete an instruction. Icons must contain tooltips for accessibility compliance.

Usage Guidelines

User friendliness and accessibility demand error-free operation, where icons are distinct from each other, self explanatory, and easily visible under all possible user situations.
Internationalization guidelines preclude the use of text on an image unless it is completely unavoidable or unless the text is universally symbolic. They must use symbols that are not specific to a particular nation or culture. For instance, icons which convey currency would not solely include a dollar sign as the application might be used in India or Europe.  Good icons avoid using letters, words, hands, or faces. When people or users are represented, they are usually depicted as generically as possible.
 

Graphic Considerations

There are 3 types of icons - 1) image related, 2) concept related, and 3) Arbitrary.

Image related icons are those which are highly pictorial representations of the object or action they represent. They are directly comprehended and should be used when possible.

Concept related icons are baed on an example or property of a real world object or action. They can be used if the user can be expected to understand the context in which the icon is presented.

Arbitrary icons, also referred to as abstract icons, do not resemble the object or action they represent, but are meaningful through convention or education. The user should be able to learn and understand the meaning of the icon after the first encounter.
Consistency and standardization is essential in icon design in order to make the graphic interface as intuitive and usable as possible. As users navigate systems, they inherently look for indicators to help them make decisions. Remember that with such a small canvas, the slightest difference can change the entire meaning behind an icon.
Icon usability is measured by time and accuracy the user possesses when “learning” the icon.

Characteristics of good icons:

• Icons using drop shadowsare used to provide definition and added dimension to an icon when there is more than one object used in the image, to create visual context and distinction between object items. 

• Good icons use rich colors.
• Good icons use angles to achieve depth of field in the image.
• Good icons use rounded corners for a softer look.
• A light source is added (often from the upper left-hand corner) with additional ambient light to illuminate other parts of the icon.
• Good icons use gradients to provides dimension and gives the icon a richer look.
• Good icons use outlines to provide definition. (Never use black to outline!)
• Good icons have a modern look when representing real world objects.

Details and Specifications

An icon usually ranges in size from 16 by 16 pixels up to 128 by 128 pixels. Some operating systems feature icons up to 512 by 512 pixels. We generally only publish four sizes (in pixels) :

File Formats

Our icons are saved in the .ico format and are published as .png.  Some older and existing icons have been published as .bmp, and .gif.  These formats should only be utilized under special circumstances as these formats will only be maintained for passivity purposes

Icon Creation Process

There are many factors to be considered when designing a custom icon or selecting an icon for your application. 

When designing icons, use established concepts where possible, in order to ensure consistency of meaning for the user. Consider how the icon will appear in the context of the interface and the other icons on the screen. Icons can be displayed at an angle for a 3D look and feel - , although document icons, icons representing symbols and single object icons should all be visually designed in a straight on, 2D manner.
The icon must be original and distinctive. It must be useful on a wide variety of monitors sat at different resolutions. Icons should have unifying features across categories which show relationships between each other consistently across solutions. Icons must convey a complex idea in a very small space, while also remaining considerate with language and cultural boundaries. Any image that is not obvious in meaning contributes to flawed usability and design, as well as confuses the user.

Often we create a dithered version of the icon to display the icon in a disabled state. An “over” state is only used when absolutely necessary as to avoid too much action in the interface.

Windows XP supports 32-bit color depth (24-bit RGB images with an 8-bit alpha channel), and any new icons should be created with this specification but the number of actual colors is limited so that the images don’t detract from the overall interface.
If combining multiple objects into one image in an icon, and be mindful of how the image will scale to smaller sizes. Do not use more than 3 objects in an icon (3 images should only be used in a "last resort" use case). It is important that an icon looks as good at the 16 pixel size as it does at the 48 pixel size. 

Create the icon using a vector tool such as Adobe Illustrator. We begin with a canvas at the largest size that is going to be used for your icon (usually 48 by 48 pixels) and then creating a new file for each size needed (32x32, 24x24, etc.). When designing the image, please leave at least a 1 pixel (if not 2 pixel) border.

Once you have created all of your images, you need to compile them into an .ico file. We currently use Axialis Icon Workshop to create the.ico file. The .ico file should contain all size formats and color depths that you require, then each image should be exported to its own .png file (.png is our current standard, but other formats (ex. .gif, .bmp) can be used).

About .ico Files

To extract an .ico file, we suggest using IconSucker. 

From Copsey Strain:  - "Icon Sucker is a utility that allows you to extract, or suck, icons out of the files on your hard drive. Icon Sucker can extract icons from both 16-bit and 32-bit applications and libraries, including the following types: ICO, ICL, DLL, EXE, OCX, CPL, BPL, SCR, VBX, and DRV. Icon Sucker uses a Windows Explorer-style user interface to find files to extract icons from. You can then copy icons to the Clipboard and save them to a file."

Accessibility Considerations

All icons must contain a tooltip!

References

Wikipedia

Microsoft Developer Network

• 
• Send to friend