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:

I also tried several online tools like Dynamic Drives Generator and the 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:

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

© Copyright 2009-2019 Peer Assembly Ltd.