Creating Alpha Transparent Favicons on a Mac

Normally I use a very old Mac program called IcoMaker to create favicons. The problem with IcoMaker is it can’t generate alpha transparent ico files. I recently had to design a favicon for StatusHub which was round, so the standard gif level of transparency wasn’t going to cut it. Time to roll up my sleeves and find some new, hopefully free, software…

Given that favicons are based on the Windows ico format there aren’t a huge number of options available to create them on the humble Mac. Most programs claiming to support the ico format don’t support alpha transparency. For completeness, here are the set of options which don’t work:

Fireworks CS4 (my standard tool of choice): it doesn’t support ico files at all.
Pixen: can read/write ico files but can’t save them with alpha transparency.
Pixelmator: can open but not save ico files.
png2ico: unix command line tool which unfortunately doesn’t compile on Mac OS X.

I also tried several online tools like Dynamic Drives Generator and the favicon.cc generator but they all had problems.

Eventually Gimp came to the rescue. Normally I steer clear of Gimp since I don’t like the interface but in this area it excelled. If you already have your alpha transparent png file all you need to is open it in Gimp then:

Select File > Save As…
Click on “Select File Type (By Extension)”
And select “Microsoft Windows Icon” – ico, its about half way down the list

If you are looking for more complete instructions on building a multi-resolution favicon, from scratch in Gimp, then check David Lane’s article.

When testing your favicons in Firefox don’t forget to clear the cache to see your new designs. Note, Firefox is also the best browser to confirm your ico file’s alpha transparency is working correctly. Safari displays them on a white background while Firefox uses a faded grey background.

Published on Jul 8, 2010