#122: The State of Favicons

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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">