Retina Favicons with Icon Slate

This post by John Gruber prompted me to fix a longstanding annoyance of MacStories that, for some reason, we had forgotten about: making the favicon Retina-ready.

Old (non-retina) favicons are 16 × 16 px; a retina favicon is thus 32 × 32 px. The lazy way to support retina is to replace your old 16 px favicon.ico file with a 32 px file, and allow non-retina browsers to scale the image. The proper solution, however, is create a single favicon.ico file containing two icon resources: one 16 × 16, the other 32 × 32. ICO files support other resolutions as well, but I see no practical utility in doing so.

Gruber goes on to detail how he used Icon Slate to produce a single .ico file containing both resolutions of the icon file. I have been using Icon Slate for quite some time now, and I highly recommend the app. It is, essentially, a more powerful, modern Icon Composer that makes it easy to package icons containing files at multiple resolutions (I’ve been using iconutil to package .icns file, and I’ve also tried this automated method by Jono Hunt). If you’re a designer (or developer dealing with icon files), I don’t know why you wouldn’t want to try Icon Slate.

Thanks to Gruber’s reminder (and the good work of @aylys), our site’s favicon – the little red bookmark icon in the address bar – is now updated for Retina displays. If you, like me, use Google Chrome on iOS, you can see the updated favicon on a Retina device by switching to tab view in the browser.