How to Create Retina-Caliber Favicons

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

John Gruber shows us tools and steps for creating retina ready favicons.

When I looked into this a few months ago only Safari was even supporting them, but it appears as if Chrome is now too, so I’d say it’s time. Firefox and Opera still do not.

John recommends making an .ico with both 16×16 and 32×32 versions. The theory being that you can hand-craft a 16×16 aesthetically better than a browser can scale down your 32×32. For my simple favicons, I’ve found the scale-down perfectly fine, which has the benefit of a smaller file as well.

Direct Link →