Get Started Building Icons

The Microsoft Windows User Experience Team has written some very good articles about the creation of Windows icons: Creating Windows XP Icons and Vista Icon Development Guidelines.

Using GIF Movie Gear for Building Icons

Building 24-bit icons is a straightforward process of compiling the various images that make up the icon -- multiple dimensions and multiple color resolutions -- into a single ICO file. GIF Movie Gear (GMG) is the tool to use for the final compilation. Below is a basic outline of how this is done. For a closer look at the files used, download the samples. The example was designed for Windows XP and uses 3 sizes: 16x16, 32x32, and 48x48. For Vista/7/8, you should also add a 256x256 size.

48x48 Alpha Channel icon

Working with GMG

Let's start in reverse, by looking at the finished product. Open the sample icon, eric.ico, in GMG by using File>Open or by dragging the file into GMG. The result will look roughly like:

There are 9 "frames" shown, each being one of the icon resolutions stored in the ICO file. The leftmost three are 4-bit (16 color), the next three are 8-bit (256 color), and the last three are 24-bit color with an 8-bit alpha channel (32-bit total). Right away you can see a definite image quality improvement from left to right. The alpha-blending makes the 32-bit version float smoothly against the background while the 8-bit with simple transparency has a hard edge that pales in comparison.

What's with the lime green? This color is used to represent "transparent" for this screenshot. You can set your own color (or stick with the default background color) by using the View>Transparency As menu item. The color chosen is only used for viewing and does not affect the images.

The Windows XP guidelines specifies that an icon should contain the following variants: 48x48, 32x32, and 16x16, each in three color resolutions: 24-bit with 8-bit Alpha channel, 8-bit with 1-bit transparency, and 4-bit with 1-bit transparency (see here for more on 4-bit images). For Vista/7/8 icons, a 256x256x32 resolution should be added as well.

NOTE: For best results, the icons should be ordered in the ICO file (and hence in GMG) in increasing color resolution: 4-bit first followed by 8-bit followed by 32-bit (24-bit-with-8-bit-alpha). New in Version 3.0.6: the resolutions are automatically sorted when saving to ensure that the ICO file follows the recommended guidelines.

Next, move your mouse over the images. You will notice a tooltip box containing resolution information about each one. The default setting shows dimensions, transparency, and bitcount. You can add or remove the items shown by going to Edit>Preferences>Frame Tips. The FrameTips are the quickest way to get the lowdown on each resolution variant.

The order of variants in the ICO file does not matter, but you can re-order the frames by simply dragging a frame to a different position.

Building 24-bit Color with 8-bit Alpha Channel Graphics

The first step is to create the 24-bit-with-alpha-channel graphics. Because GIF Movie Gear offers a direct import of Abode Photoshop (PSD) files, Photoshop is the recommended image creation tool. Basically any image created in Photoshop that uses the "RGB" mode has an Alpha channel attached, and if there is transparency in the image or layer, that channel becomes meaningful for icon purposes.

To get the best scaling across the sizes, many designers will find it useful to start with a vector-based drawing application or 3D modelling software for the initial image creation and then use Photoshop for the rendering of size-specific bitmaps.

For our example, we started with a scanned photograph and used the oval selection tool with heavy feathering to create a vignette of Eric's head. Next, the layer with the head was copied two times, and finally each of the three layers was scaled using Layer>Transform. This is a very simplistic way to generate multiple sizes: it is up to the designer to determine how fine-tuned each size needs to be.

Layers in eric24.psd

The next step is to crop each layer to the desired size. We have found that the best way to do this is to use Photoshop as follows:
1. File>New to create a new image. Set the size to the desired icon size.
2. Select the image with the multiple layers and drag the appropriately sized layer to the new image. Center the graphic within the image frame as needed.
3. Save the new image as a PSD file. Keep the Background layer.
4. Repeat 1 --> 3 for each size.
Of course, if you created each size separately in the first place, there is no need for this cropping.

The result for our example are the files eric24_48.psd, eric24_32.psd, and eric24_16.psd.

Building the Icon

For our example we will start with an old-school 4-bit (16 color) icon and add the colorful new variants. The icon file is named eric4.ico. To open the file in GMG, use either File>Open or File>Import From>Icon or simply drag the file into the main window. The main view should now show two frames with smiley faces. A quick FrameTip inspection shows that both are 4-bit images, one 16x16 and the other 32x32, just your basic (if rather primitive) Windows icon.

NOTE on "4 bit" color: The term "4-bit" color is not entirely appropriate. This color resolution implies that the color table is composed of the 16 EGA colors (each of R, G, and B is either 0, 128, or 255 plus a single light gray at 192,192,192). Reducing a color table to an arbitrary 16 colors won't do the trick: the result will still be treated at 8-bit. Get a Photoshop 16-color CLUT here.

Next to be added are the 8-bit (256 color variants). For our example, we used GIF Movie Gear to convert the 24-bit-with-alpha images into 8-bit-with-1-bit-transparency images by unchecking the 24-bit setting; this is a very simplified approach and would not please most designers. The three sizes were saved as 3 frames in eric8.gif. The GIF format is ideal for saving 8-bit variants because the GIF format is 8-bit color with 1-bit transparency as well.

To add these to the icon in progress, use File>Insert Frames and choose the file. The three new variants are then added to the view. Dragging the file into GMG would accomplish the same effect. The same procedure would apply if the new variants were in an ICO file or any other format.

Finally it's time for the 24-bit images. Similar to above, use either File>Insert Frames or drag&drop to add the PSD files from above to the current icon. When inserting a PSD file, a dialog with conversion options appears. For building icons out of PSD layers, the settings to use are: Layers as Multiple Frames, No Blending, and Keep Background Transparency. Notice that the Background Layer of each size shows up as a frame; to delete these, select the excess frame by clicking on it, then hit the Delete key.

To save the icon, select the File>Save As menu item. Choose the "Windows Icon (*.ico)" file type. Choose a name and hit OK. The icon is ready. Choosing File>Save will save the icon using the name of the originally opened eric4.ico.

Other Notes

There should be no more than one icon variant for each size and color resolution. GMG will refuse to save an icon with any duplicates and will put up a warning dialog listing the duplicated size/resolutions. Simply delete the unneeded images and save.

Toolbars for Windows XP/Vista/7/8/10

Building toolbars with alpha-channel transparency is very similar to building "regular" toolbars, the only difference being that the button bitmaps are 32-bit color (24-bit color with 8-bit alpha) instead of 8-bit or 4-bit. The process for generating the button images is the same as for icons. Load the images into GMG:

sample 32x32x32 images in GMG
(magenta color is transparency)

Now select File>Save As, select the BMP file type, Filmstrip as the style, and Horizontal orientation. The resulting BMP file will contain all the images and the alpha transparency. There are not many applications that support 32-bit BMP files correctly, so previewing this file in most applications will not show the proper transparency. However, when a toolbar control is created with the TBSTYLE_TRANSPARENT style, and the bitmap is added, buttons that reference the bitmap will be drawn as lovely, 24-bit color images with full 8-bit alpha transparency.

Common Issues

"My alpha channel is not showing up." Go to Edit>Preferences>Export and make sure that "Maintain 24-bit color..." is checked. Also, other applications that read ICO files (for example, Visual C++ 6) may corrupt 32-bit icon data when altering the file in any way.

"My 4-bit color image is loading as 8-bit color." Is your image a valid 16-color image (read more)? If it is, go to Edit>Preferences>Palettes and select the "Local Palettes" option then reload the images.

"The Thumbnail view in XP is showing my ICOs as 16x16 icons." This is a problem in Windows XP and is not an issue with the icon file. Microsoft is aware of this issue but has so far chosen to leave it unresolved.