Forever we all made 16x16 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 32x32 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 16x16 and 32x32 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="https://cdn.css-tricks.com/favicon.ico">