Support

Articles : 13th May 2004 : All about application icons

Icons are everywhere... every time a user opens their Start Menu, looks at their desktop or double clicks My Computer they are presented with an array of colorful images. Your applications icon is a representation of the product, which needs to build a sense of familiarity for the user: that way whenever they see the icon, they can recall what program it belongs to. This recognition is important to your software branding, as it becomes a reference point - as far as most users are concerned, the icon is your program.

When discussing icons, it is important to differentiate between the two types:

• Application Icons
• Toolbar Icons

An application icon is used by your software, and identifies it within the Windows Explorer, Start Menu, Task Bar etc. Your user sees this icon when they start your application.

Toolbar icons are used within your application, displayed in various user interface controls. These do not need to be in the .ICO format, and are not discussed in this article, however a good reference for using our images in toolbars can be found in our How-To Guides. For a large array of images perfect for toolbars, please check our product pages.

An icon file is a resource which can contain all the required sizes and colors modes in the single .ICO file. Windows™ automatically selects the image it needs to use, based on the users display settings. If the icon does not contain the appropriate size or colour mode, Windows will automatically take the next closest size and format, and attempt to resize and recolour the icon to suit. Almost always this yields a very poor result, which is why you should always have your application icon created to suit any size and display setting.

Icon sizes

To ensure that your applications icon looks its best in any situation, it is recommended that it contains the 3 basic sizes:

• 16x16 pixels
• 32x32 pixels
• 48x48 pixels

Additionally (depending on what your application does, and whether it integrates with the Windows Explorer) you could also provide a 24x24 pixel version. Last of all, if you wish to support users who use non-standard display settings (or third party utilities that provide such a feature), you can add 64x64 pixel and larger icons.

16 x 16 pixels

The smallest size of icon used by Windows™. This is used in the top left hand corner of the program window, the Windows Task Bar, the Start and in the Windows Explorer/My Computer when the view is set to Detail or Small Icons mode.

24 x 24 pixels

This icon size is currently only used by Windows XP™ and 2003 Server™. These are used in the Start Menu's right hand bar - typically only applications that will integrate with the Windows™ Explorer and can display their icons in that part of the start menu. Unless you have a specific need for this size, it can be omitted. Note: 24x24 is a common image size to use within your applications toolbars, for example; if you allow the user to choose between Large & Small toolbar mode.

32 x 32 pixels

The default size of the icons displayed on the Windows™ Desktop. It is also used in the Windows™ Explorer when the view is set to Icon view mode.

48 x 48 pixels

This icon size is only used if the user has set their display settings to Large Icons mode. This option is accessible from the Display Properties applet in the Control Panel. It is commonly enabled if the user is running a very high resolution and finds the default 32 pixel icons too small.

64 x 64 pixels

While these are not required as part of the main icon, some users customise their desktops to display much larger icons. If this is the case, the larger sizes are helpful, as they will display clearly.

Color formats

As an application developer, you will need to support a variety of operating system versions and display settings. You should not assume that because an icon looks great on your desktop, it will look the same on another users system.

To overcome this, icon files support various color modes to ensure they display correctly, no matter what the user is running.

32-bit color

24-bit images, with 8-bit transparency. The highest quality icons, drawn in full color. 32-bit icons have smooth anti-aliased edges, and optional translucent drop shadows.

The users display settings must be set to 32-bit color depth. These icons are currently only supported on Windows XP™ and 2003 Server™.

8-bit color

Icons that cannot have smooth edges or drop shadows, and are limited to 256 colors.

These icons will only display correctly on a system that is set to a display color depth of 16-bit or higher. Supported on Windows 95™ (with the Plus!™ pack installed, or third party utility to allow high-color icons to be used), 98™, ME™, NT 4™, 2000™, XP™ and 2003 Server™.

4-bit color

The lowest common denominator, 16 color icons will work correctly on all display settings. Also useful if the user is running in Safe Mode or using Terminal Services to access a remote computer (although Windows XP™ and Windows 2003 Server™ support 24-bit color icons in the sessions).

Supported on any system set to 16 or 256 color depth. Supported on Windows 95™, 98™, ME™, NT 4™, 2000™, XP™ and 2003 Server™.

What if?

...I only have a 16 pixel icon for my application?

This means that anywhere Windows™ requires a larger size, it will stretch the existing 16 pixel icon to suit.

...I only have a 32 pixel icon for my application?

This means that anywhere Windows™ requires a smaller size (such as the top left hand corner of your application window, or the Start Menu), it will shrink the existing icon to suit.

...I only have a 16 color (4-bit color) icon?

Your icon will look the same in all versions of Windows™, however on higher end platforms, such as Windows XP™, it will not fit in with the look and feel of the operating system or quality of the other icons.

...I only have a 32-bit color icon?

Your icon will only display correctly in Windows XP™ running in 32-bit color depth. Any other setting or version of Windows™ will display the icon discolored and with poor quality.

Ok, now I understand...

Nothing is more important than leaving a lasting impression on the user. The effect of brand recognition can be very easily observed when using Microsoft Office™ as an example. Even though the icons have evolved over the various versions of office, most people would be hard pressed to forget that the stylised W will launch Word™ or the green X will start Excel™.

This is not a fluke - the icons were specifically designed to be eye catching and recognisable. Over the years and different versions, the icon style has evolved, but retains the basic design that everyone who has been using Microsoft Office™ remembers.

What now?

Let's face it - most developers have to admit that their design skills are badly lacking. Depending on where you work for, you may not have graphic designers at your disposal (and I dare say this would hold true for the majority of software companies).

There is no problem using a stock icon for your application, it's an easy way to get a great looking icon, without having to learn graphic design The one thing it does lack is a unique edge.

If after reading this article you understand what application icons are all about, can see the benefit of a good quality icon, and are happy to use a stock image in your application, great! Your software has gained a modern look, fits well with each operating system, and gives your users just a little more eye candy to look at.

Now for the shameless plug - if you have read the article, and decided you would like your application to stand out just that little bit more, glyFX can design a unique icon, specifically for your application. For more details, please have a look at our custom design service overview.

Until next time....
Dave

Have questions, comments or suggestions about this article? Please click here to contact us.