Don’t Forget About Favicons on Retina Screens

Thomas Fuchs needs no introduction. I've looked up to Thomas' animation artistry since his Prototype/script.aculo.us days. He's more recently created Zepto.js, a micro multipurpose library for desktop and mobile devices. His latest creation, however, is an awesome eBook called Retinafy Your Websites and Apps, a guide to creating, using, and optimizing images for mobile and desktop devices. The following is a snippet from Retinafy Your Websites and Apps, accompanied by a coupon code to receive $5 off the eBook.

Favicons are the ugly step-child of the web, a leftover from early Internet Explorer days and a bit awkward to handle as they don't use web technologies you know and love, but rather fall back to the Windows .ico file format. However, it's an important part of your web site, and it's literally the first thing a users sees when looking at the URL bar in the browser. The favicon is also used in various other places, like tabs and bookmarks.

To get it right for Retina screens, some extra work is required, but it's easy enough to do! To make proper favicons that work across all browsers, notably older versions of IE, you'll need to create
an .ICO file with two size variants: 16px by 16px for standard screens, and 32px by 32px for retina screens.

First, create the two icon variants in any image editor (I use Photoshop), and save them as 32-bit PNGs with an alpha channel. Next you need to use a specialized icon editor application to create the actual .ICO file. http://xiconeditor.com/ is a free web-based app that works well for this:

Import both size variants, and save your .ICO file as favicon.ico in your site's root folder.

You can easily check if your favicon is retina ready, just use Preview.app to take a peek.

All size variants will show up.

When it gets to favicons, the devil is in the details for example I had to manually tweak the 16 16 heart for our app Charm (http://charmhq.com/) pixel-by-pixel to make sure it stayed sharp and crisp. You can learn a lot about good icon design for various sizes from desktop apps, where icons have traditionally been available in varying sizes. Here's an icon from Fantastical, a OS X calendar app I use (and love!), showing both the smallest (16 16) and the largest (512 512) variation:

You can clearly see that the smaller version is not just an automatically scaled-down version of the big icon that would result in a complete blurry mess. Instead, the small icon is hand- drawn, with unnecessary details removed and greatly simplifed.

Note that you can have the same icon size in your favicon file more than once, with different alpha channels. For example, Apple.com s favicon.ico file has four different variants, with 1-bit and 8-bit transparency for both icon sizes:

In practice, you can get away with just two icons, 16px by 16px for standard screens, and 32px by 32px for retina screens, both using 8-bit transparency only really old browsers won t be able to use this format.

Touch Icons

Additionally, you will want to create a series of resolution variants for mobile home screen icons. This is separate from favicons and is conigured via a meta tag.

For the widest support, you ll need to create four icons, in 57 57, 72 72, 114 114 and 144 144. You probably want to use a good photoshop template for this.

Once you have those saved as PNGs, use the following HTML snippet. This snippet is from Mathias Bynens' excellent post about touch icons, which has a lot more information about this topic.

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

<!-- For iPhone with high-resolution Retina display: -->

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<!-- For first- and second-generation iPad: -->

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->

<link rel="apple-touch-icon-precomposed" href="apple-touch- icon-precomposed.png">

Note that you need to specify the various sizes in this exact order for maximum compatibility. The icons will look gorgeous on any iOS or Android device when the user adds your URL as a home screen link.

And that's it beautiful, high-resolution icons that look great on desktop and mobile!

Retinafy Coupon Code: RETINANOW

Presentation can be everything, especially with mobile apps. Retinafy Your Websites and Apps shows will teach you how:

• Why you should use high-resolution images by default
• The most efficient way to target retina screens in CSS
• Testing a site when you don't have a Retina device or laptop
• How to use CSS and SVG to replace bitmapped user interface elements
• Deciding if you need two versions of an image
• Creating beautiful favicons that work great on any screen
• Optimizing JPEG quality
• How to keep file sizes of images in check
• Falling back to PNGs if SVG is not supported
• Avoiding common pitfalls
• Why JavaScript-based image replacement techniques are a bad idea
• Keeping your sanity while making awesome, responsive & retinay-ready sites

Use the coupon code RETINANOW at checkout and receive $5 off!

About Thomas Fuchs

Thomas has been creating websites and writing hard-core JavaScript since waaaaay back in the mid-1990s. His famous script.aculo.us framework was created during the development of one of the most highly interactive applications the Web had ever seen. He's continued to push the boundaries of what is possible with HTML and JavaScript with libraries like Vapor.js and Zepto.js. He is a self-described “artsy wanker.”

retinafy.methomasfuchsPosts