Easily create favicon.ico files from PNG graphics

After building a new web site, one of the last things web developers do is polish it off by adding a favicon, which is that little graphic that appears next to bookmarks, in the address bar, and on tabs in all of the major browsers. It helps to reinforce the brand, allows your pages to be distinguished from others in your visitors browser.

There are lots of ways to go about creating them, but my favorite is with a little command line utility called png2ico. This app has no gui, but its singular purpose is to eat PNGs and spit out ICO files, which makes it perfect for making favicons.

First, let’s get it installed.

OS X or Linux users can download and compile it as normal:
tar xzvf png2ico-src-2002-12-08.tar.gz
cd ./png2ico-src-2002-12-08
./configure
make
sudo make install

OS X users, if you have MacPorts installed you can simply run this command to do make install dance for you:
sudo port install png2ico

Windows users, can download a pre-compiled binary. You’ll still have to run it from the command line, but at least all you have to do is unzip it and put it some where convenient (like Program Files or whatever they’re calling it these days).

Once installed, create your PNG files. You should create two of them, one that is 16×16 pixels and one that is 32×32 pixels. They should be exported as 8-bit or 24-bit PNGs and can include transparency. You’re going to have to play with your graphics for a little bit before you’ll be satisfied with the results, as making small graphics look good is not as easy as it looks. The general rule of thumb is that the more detail your original graphic is, the harder it will be to scale down to the size you want. I’ve also found that the more detailed it is, the worse it looks on a transparent background. YMMV.

Once you have your two PNGs, navigate to their location in your terminal window and run this command:
png2ico favicon.ico favicon-16x16.png favicon-32x32.png

Where favicon.ico is the name of the file you want output, and favicon-*.png is the path to your PNG graphics. Rinse and Repeat until your happy with the favicon. There are some other options you can play with too, in order to restrict the color palette. I just find it easier to do that in my graphics program when exporting the PNG file.

Then just place the favicon.ico in the root of your site and add something like this to your pages:
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

Finally, upload it to your server, clear your browser cache (especially if you’re using Firefox), and admire your handy work.