Creating Retina Favicons

Simple instructions for creating Retina favicon:

Create a 16×16 PNG-24 for your low-res icon

Create a 32×32 PNG-24 for your high-res icon

Head over to http://convertico.org/Multi_Image_to_one_icon/ and upload those two icons together to create a dual-resource ico file which you rename to favicon.ico.

Upload that favicon.ico in the root of your webroot.

For some reason the meta tag <link rel=”icon” href=”favicon.ico”> seems to prevent the high-res version from working so I temporarily removed it. If you know the correct meta tag to be using for retina please let me know.

Here is what the difference looks like: