Skip to content. | Skip to navigation

Personal tools
Log in
Sections
You are here: Home How To Icons Creating Windows Icons

Creating Windows Icons

How to create icons for applications deployed for the Windows XP/2000/NT platform.

Goals

This how-to shows how one makes usable ".ico" files for windows applications and documents using only Free Open Source Software (FOSS).

Note: This wouldn't be any simpler with expensive commercial software packages unless you already own them and already know how to use them. In fact, I would wager that it would be more complicated with commercial software, because, if you keep reading, you'll see that I wrote a python program to simplify the most tedious parts.

The first part of this tutorial is the quick-and-dirty way for those of us on a time budget. The second part (if I ever get to making it) will be the deluxe way, with emphasis on sizes, color spaces, transparency, etc. Other excellent how-tos on the web show how one might make the actual icons nice looking (see here). My tutorial focuses on quickly creating icon files using free software.

The FOSS software you will need for this are: Inkscape, gimp-2, python, ImageMagick (for convert), and netpbm (for ppmtowinicon). Your best bet is to install all of these before you start. If you are on OS X, you may want to use fink to install the above mentioned packages. Make sure you have X11 installed if you are using OS X. It comes with your OS X install disks.

Quick-n-Dirty

The Quick-n-Dirty way does not incorporate transparency. But its quick...and dirty.

Note: If you have a nice looking image that is square (width is the same as height), then you can skip to Step 8. A square photograph would qualify.

  1. Make the icon picture in Inkscape. Inkscape has now evolved to the point where it is acceptable as a general purpose illustration program and is more than acceptable to make icons. Hint: make the outlines a little thicker than you might think is necessary because you will draw at the scale of your screen and the final icons are tiny by comparison. Draw this as big as you want. It will be sized correctly later.
  2. From Inkscape, export the file icon picture as a png file for manipulation within gimp-2.
    • File -> Export Bitmap
    • Select "Drawing"
    • Click "Browse" to find the folder you want to save the icon in. If you are new to all of this, do everything on your Desktop so the future directions are easier to follow. You can move things when you are done.
    • Enter "MyIcon.png" where "MyIcon" is the name you want for your icon. Make sure ".png" is the extension.
    • Click "Export" to actually export the file.
  3. Open the icon with gimp. Transparency should have been preserved.
  4. Find out whether the icon is square. In gimp, select View -> Info Window. In the Info Window, make sure Pixel Dimensions are the same in both directions. If not do Step 5.
  5. Resize the image canvas to be square.
    • Image -> Canvas Size.
    • Unselect the vertical chain next to "Ratio X: Y:". (Break the chain.)
    • Select "px" in the pulldown next to "Height:"
    • Set both the "New Width:" and the "Height:" to the larger of whatever the original values were. You can also add some padding if you want. Just make sure the new width is the same value as the new height.
    • Click the "Center" button to center you icon in the new canvas.
    • Click "OK".
    • The additional canvas will also be transparent.
  6. Save the expanded image at this point.
    • File -> Save
    • Select "Export" on the popup if prompted.
  7. Save the new file as a ".ppm" file.
    • File -> Save As
    • Use the pulldown at the top of the "Save Image" window to navigate to your chosen location. I recommend to save to your Desktop if much of this is new to you.
    • Make sure "By Extension" is checked next to "Determine File Type:".
    • Change the name to "MyIcon.ppm", for example. Note the ".ppm" extension.
    • Hit "OK".
    • Select "Export" on the popup if prompted.
    • Select "Raw" Data Formatting in the "Save as PNM" dialog and hit "OK" if prompted.
    • Transparency will not be preserved at this point. Anything transparent will end up white.
  8. Make all of the different, scaled icons and put them in an .ico file with one shot using a script I wrote in pythonconvert, and the netpbm package. The "convert" program is available in ImageMagick.
    • Download this python script to the same directory as your ".ppm" icon file. A preview of this script can be found here.
    • If you have dutifully installed all of the great free software I have mentioned above, then you can enter the following two commands from a terminal (OS X, or Linux/Ubuntu):
      cd Desktop
      python make-ico.py MyIcon.ppm
    • Where "MyIcon.ppm" is the name of your .ppm file from Step 7.
    • The Terminal program in OS X is found in the Applications/Utilities folder. The Command Prompt is found in the Accessories group of the Start Menu in Windows. The Terminal program is found under Accessories in Ubuntu.
    • A lot of debugging info will be printed to the screen. Check this info for errors or problems. You will know an error when you see it.
  9. You should now have a shiny new icon file called something like "MyIcon.ico".

What's Going on With the Colors

This part is only for the curious. If you check out this tutorial, you will notice that your icons should be made with 24, 8, and 4 bit images (16.8 M, 256, and 16 colors). But do your images really take the 24, 8, and 4 bits in the final .ico file? Not exactly. The .ico file is like a .gif file in that a color-map is used. The color map has a maximum of 256 colors, chosen from the range of colors afforded by the depth of the image. For example, from the 16.8 M colors available from the 24 bit image, 256 are selected and used for a color map embedded in the .ico file for that particular image. These 256 are used to render the image on the screen. This is a sort of compression. In my "Quick and Dirty" method above, the color map is calculated in the python script by the pnmcolormap command from the netpbm suite. For the 16 color images, the default Windows 16 color system pallet is applied to the high-color scaled icon image. In the script, the color map is applied using the pnmremap command from the same suite.