How To Create a Retina-ready Favicon
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. Since I'll assume you're using a UNIX-based system, Windows users should look elsewhere.
First, install the
icotoolbinary on your computer. It's part of the open-source icoutils package. Make sure it's installed in your
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
Secondly, create the two favicon representations, 16x16 and 32x32, and save them as PNG images.
Finally, run the following command:icotool -c image1.png image2.png > ~/favicon.ico
Obviously, you should replace
image2.pngwith the respective path to your two favicon images.
This will create a multi-representation
favicon.icoin 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.