Sep 28, 2012
With the release of the Retina-display MacBook Pro, Safari now supports high-resolution favicons for websites; support in the other browsers is forthcoming.
Standard favicons are 16x16px bitmap images in Microsoft's .ico icon format. If your site doesn't provide a favicon in 32x32px resolution, the favicon will look ugly and blurred on Retina Macs.
This is a short guide on how to create a favicon with both 16x16 and 32x32 representations using the open-source icotool. I'll assume you're using a UNIX-based system.
First, install the icotool binary on your computer. It's part of the open-source icoutils package. Make sure it's installed in your $PATH.
For those on Mac OS X, I'm making an x86-64 Intel binary available for download here. Put it into /usr/local/bin/ if you want it permanently installed and in your $PATH.
Secondly, create the two favicon representations, 16x16 and 32x32, and save them as PNG images.
Finally, run the following command:
Obviously, you should replace image1.png and image2.png with the path to your two favicon images.
This will create a multi-representation .ico file named favicon.ico in your home directory. Replace your website's current favicon with this new file, and you have a Retina-ready favicon.
Please note: You may need to flush your browser's favicon cache to reload the new favicon.
It is also worth keeping in mind that this increases the size of the favicon file, from 1-2KB to maybe 5-6KB.