#122: The State of Favicons

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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

Forever we all made 16×16 graphics and got them into the .ico format somehow. I probably used this converter tool a million times. Somewhere along the line it started to get more confusing. Browsers can support .png favicons too. And now there are retina displays, and nothing looks worse on retina than little tiny graphics scaled up. Browsers are starting to support 32×32 favicons now too. What are we to do?

The situation is that if you provide both, many browsers ignore the .png and use the .ico. Jonathan Neal has the whole story. So, let’s just use that .ico for both. It’s a unique format that is built for handling that anyway.

  • Make both 16×16 and 32×32 version, using your best pixel-crafting skills to hone both
  • Save them out as full quality PNGs
  • Make a new project in Icon Slate (via)
  • Drag the versions into the respective “wells”
  • “Build” to create the .ico
  • Link up that .ico as normal: <link rel="shortcut icon" href="/favicon.ico">