Sep 28, 2014

How to Make Retina Favicons

For years, I’ve been creating favicons as png files, and not with the real .ico files, mostly because there is no native support for .ico files in Photoshop.

Easiest solution is to use a 32 x 32 px .ico/png file and let the browsers scale it, but the better solution would be to create an icon file with multiple resolutions.

Creating the icon is a bit tricky and you need a specific tool for it. Apple’s own Icon Composer isn’t fit for the job since it doesn’t support color profiles [1].

Good news is that there is an excellent tool called Icon Slate ($5 in Apple Store) [2] to make this and any other icon file.

Steps

  1. Create the favicon in 16 x 16 and 32 x 32 and export them from Photoshop as png.
  2. Create new Icon Project and change the export format from the Formats menu to .ico only.
  3. Drag and drop the files to the appropriate sections in the app.
  4. Hit build and you should get a favicon containing both 16 and 32 pixel versions.

Include the favicon for the site:

UPDATE: As alertinative tools, folks recommended ConvertICO and x-icon editor