Retina Favicon: Learn How to Create & Add Them to Your Sites

Ever wonder how to create and add a retina favicon to your site? So are more and more developers as retina screens and other high-resolution devices continue to grow in popularity. Since September 2012, Google Trends has showed a huge increase for the search term, retina favicon.

It’s not surprising with the number of these sweet-looking devices popping up all over and not only Apple devices. With this huge demand comes the need for web developers to move to the next generation of favicons. Let’s take a look on how you can easily create and add retina favicons to your site.

How to Create a Retina Favicon

It requires a little extra work to create and add retina favicons, but a cinch to do. In order to create cross-browser retina favicons, including IE, you’ll need to stick with the .ICO file format. Retina graphics are essentially images that are double the actual size of the rendered image. For retina icons, you’ll normally create two sizes: 16px by 16px for non-retina devices and 32px by 32px for retina screens. Instead, I’m going to show you an easier way with the X-Icon Editor.

Start by creating your icon with an image editor like Photoshop. Save it as an 8-bit PNG with an alpha channel.

Once you’ve got your icon created and saved, head over to X-Icon Editor. Import your image and be sure to check all available sizes: 64px by 64px, 32px by 32px, 24px by 24px and 16px by 16px. Granted, you really only need the 32px by 32px and 16px by 16px, but having the extra sizes doesn’t hurt.

Keep in mind since you can provide two different sizes, you could potentially create two different images in-case your icon is too detailed to be sized down to 16px by 16px. Doing this would require you convert the two images separately into the .ICO format, but the X-Icon Editor makes that a cinch. Once you’ve got your icon imported, you can make tweaks to it if needed.

After you’ve made your tweaks, export it and you’ll have your new retina favicon.

Add a Retina Favicon to Your Website

Now that you’ve got your favicon created, the next step takes 2 seconds: adding it to your website. Jump into your site head and add the following code, making sure you update the path to reflect where the favicon sits:

That’s it! Now when you load your site, you’ll see your new slick-looking retina favicon.

Articles on Retina Devices & Favicons:

• Cross-Browser Favicons by Kevin Leary
• Creating Retina Images for Your Website by Kyle J. Larson
• 8 Techniques for Mobile & Retina Devices Detection by Rochester Oliveira