#122: The State of Favicons

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

Download Video
(Only MVP Supporters can download original high-quality recordings for offline viewing.)

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