Creating an .ICO icon file for Microsoft Windows applications is surprisingly difficult, complicated, and unclear. Which is strange given how much software is actually created for Microsoft every day.
Making matters worse, there is precious little decent technical documentation on how to create .ICO files well, and for most graphic designers, it is a total mystery.
Fortunately, I’ve figured out how to do it with a mix of trial & error and a few clues uncovered here or there. First, let’s cover some background.
Q: What is an .ICO file?
An .ICO file is basically a fancy (and undocumented) file archive, kind of like a .ZIP file. Microsoft created it as a specialized container to hold multiple image files within a single logical file. During the software installation process, a program like FloSpace FloPrompter will register an .ICO file with Microsoft Windows. This process is similar to saying, “Hey, Windows! When you show my program or one of my files on the desktop, use one of the images from this .ICO file so that people can look at it and recognize it as mine!”
As a container, the file holds multiple files, each at a specific size and color depth. The bit depths are 4 bits, 8 bits, and 32 bits. At each bit depth, sizes range from 16×16 to 256×256. Put that into a table with the three bit depths for columns, and eight special sizes for eight rows. Three times eight – that means the table has 24 cells. That’s 24 unique images to create and pack into one single .ICO file. Yes, it does take some time! (Click the table below to view it at full size.)
(I think you can optionally ignore the 64×46 and higher images for the 4 bit column… but unconfirmed!)
Wikipedia offers a more in-depth look at the .ICO file format at: http://en.wikipedia.org/wiki/ICO_%28icon_image_file_format%29
Windows Mobile Note: As you might have noticed from the table above, you’ll want to create a separate .ICO file for the Windows Mobile version of your application. The good news is that you can use a sub-set of the same image files! The only slightly bad news is you have to create image files at two mobile-specific sizes: 22×22 and 44×44. To help keep the total file size down, only package the necessary images as noted above into the .ICO.
Microsoft Resources
When learning how to create .ICO files, start by reading two very important web pages on Microsoft’s web site. One page provides some detailed information on how to create .ICO files for Windows XP, while the other provides additional information for people creating software for Windows Vista.
Read this third link if you’re creating an .ICO file for use by Windows Mobile applications.
Get the Right Tools For the Job
Next, I recommend that you purchase the right software for the job. I’ve tried using a few different software products and Photoshop plug-ins and they all pretty much suck. In my opinion, most are completely useless and unusable, with incomprehensible user interfaces.
One product that stands out as being both fairly usable and easy, is Gamani GIF Movie Gear. As you might expect from the name, it works really well for creating animated GIFs, as well. In my opinion, it’s also the most straightforward software program for creating .ICO files. Even better, it’s also really affordable, just $25.
www.gamani.com
In summary, use Gamani as an ICO packaging utility once the graphics are already created – not as a utility for actually creating graphics!
Step 1: 32 Bit Color Images
First, create the 32 bit color images at each of the magical sizes from 16×16 to 256×256. Yes, you should create the images all the way up to 256×256! Given that your software will probably run on both XP and Vista, just do it.
Whether you create each image file in Adobe Illustrator or Photoshop, here is what you want to do. Export the image in PNG format for best results. The easiest way is to click on the Save for Web menu item, then choose PNG-24 from the Settings drop-down, and make sure that Transparency is checked. (Click to view the screenshot in full size.)
Don’t forget to give each file a good name! Something like “MyLogo_XX_32bit.png” is good, where XX represents the size (e.g., “MyLogo_16_32bit.png”).
Another thing to keep in mind is that the two smallest sizes, 16×16, and 24×24, will probably need hand tuning. So open those PNG files back up in Photoshop, and do any necessary clean up before moving on.
Windows Mobile Note: If you’re creating an .ICO for use on Windows Mobile devices, you don’t need any 32 bit color images in the .ICO archive. Most windows mobile devices can’t display that many colors.
Step 2: 8 Bit Color Images
Now to create the 8 bit images!
Open up one of the 32 bit PNG files which you just created. To convert it to an 8 bit image, the easiest thing to do is simply save it as an 8 bit image. Here’s how:
Click on the Save for Web menu item again in Photoshop. This time, select PNG-8 from the settings drop down. Now, adjust the color settings, dithering, diffusion style, etc., to maximize how well your image looks. Save the image with a good name, such as “MyLogo_XX_8bit.png.”
Now repeat this process for all of the images. And again, you may need to re-open the smaller files in Photoshop to do some hand tuning.
Step 3: 4 Bit Color Images
Creating the images for the 8 and 32 bit colors is easy. Creating them for at 4 bit color depth is more complicated and time consuming.
First, you want to get a special color palette file for Photoshop which will make it easy for you to use the right colors. It turns out that Microsoft Windows is exceptionally picky about WHICH 16 colors you’re allowed to use for the 4 bit depth image files. You can only use the special Windows colors — no other colors are acceptable. Download the Photoshop color palette file (CLUT) from Gamani’s info page.
www.gamani.com/support_icon.htm
Direct file download: www.gamani.com/download/4bit.act
Next, we’re going to create some transitional files. These will NOT be added to the final .ICO file, but will help us get one step closer to proper 4 bit images.
Okay, open up one of the 8 bit image files. In the Layers window, add a new layer and position it UNDER the image so that it is the background. Fill this new background layer with a weird color completely unrelated to any other color in your image. For example, if your logo is mostly blues, set the background color as magenta.
Make sure than when this is done, the background color is unique (such as the magenta in the screenshot) and present in the top leftmost pixel.
Click on Save for Web menu item again, and this time select GIF 64 No Dither. Uncheck the transparency. Restrict the number of colors to something very low (such as 3 or 4). Remember that you do not want any anti-aliasing effects along the color borders. Just flat colors. No beveling or other effects. Just a small number of unique colors.
Now, save this image as a GIF. Give it a good name, such as “MyLogo_XX_Temp.gif.” Repeat this process for all image sizes.
Okay, now we can move on to creating the actual 4 bit images for use in the .ICO!
Open one of the temp GIF images. Click on Image > Mode > Color Table. In the Color Table Dialog, click on the Load button, and load in the 4bit.act file you got from Gamani. Your image may look pretty screwy! So now you need to hand tune each image file to use ONLY one of the 16 colors shown in that color table dialog. And again – this file should not have anti-aliasing or transparency effects.
When you’re done hand tuning the file, click Save for Web and choose GIF with the absolute minimum number of colors necessary, no transparency. Give the file a good name, such as “MyLogo_XX_4bit.gif.” And repeat this process for the rest of the sizes.
Step 4: Package the .ICO File
Now you’re finally ready to put it all together!
Launch Gamani GIF Movie Gear. Gamani launches into a “blank new project” state.
Let’s test one of the 4 bit GIF image files to make sure that it was done right. Open the folder containing all of your fabulous new images. Drag one of the 4 bit GIF images (“MyLogo_XX_4bit.gif”)onto the GIF Movie Gear window. Hover your mouse pointer over it and Movie Gear will show a tool tip confirming the bit depth. If Movie Gear does indeed show 4 bit, you ought to be fine.
Now, let’s save the project as an ICO file (we’ll add in the rest of the images in a moment).
Click File > Save As. Select “Windows icon (.ico)” from the Save As Type drop down.
Now that it’s saved, let’s continue.
Next, drag the rest of your 4 bit image files onto the Gamani project window; then add all of the 8 bit images. Click on the File > Save button again to make sure that all is well and good in the world. Gamani does an error check to make sure that there is only one file at 16×16 for 4 bit, and one file at 16×16 for 8 bit. A common error is that designers will have accidentally saved what should be a 4 bit image as 8 bit instead, so Gamani will catch that if it’s the case. If Gamani saved the .ICO file and didn’t complain, then it means you created all of the 4 bit images properly! If it complained, then you have some illegal colors in one or more of the 4 bit images or it’s the wrong bit depth, so you’ll need to go through Step 4 again.
Finally, drop all of the 32 bit images onto the file. Save it! When you’re done it will look something like this:
Don’t freak out if you see some of your 8 bit and 32 bit PNG images with what looks like non-transparent backgrounds. Gamani GIF Movie Gear gives transparency a color for some odd reason, and you can change that color if you like.
Now Breathe…
And with that, you’re all done!
