55 Minutes

Welcome to the 55 Minutes blog.
55 Minutes is a web development consultancy in San Francisco building apps for design-led businesses and startups. On this blog we discuss the technology tools of our trade: Ruby on Rails, Django, Sass, OS X, and more.

Multi-Resolution Favicons and Safari’s Reading List

In which we review the current best practices for favicons and tackle new problems introduced by Safari 5’s Reading List feature. Plus we show you how to create a multi-resolution favicon, avoid a tricky color-shift issue in Apple’s Icon Composer, and make sure your site looks its best in the Safari Reading List.

Hubris: best practices shift with technology

So there we were, fresh off a massive redesign and beautification effort for all our websites, and we thought we had it all figured out. Responsive design, check. Compass + Sass, check. Apple touch icons, check. Good favicon strategy, check.

…wait. Let me take a detour here to talk about said “good favicon strategy.” For those who may not be familiar, here’s a brief tutorial. I’m assuming you already know what a favicon is, but in general, here’s what we thought you should do:

  1. If you have the appropriate access, and you care about supporting older browsers, place a 16x16 Microsoft icon file called favicon.ico in the root directory of your website; some older browsers only look for favicons in this location, of that size, by that name, and will ignore icons placed anywhere else, even if you specify their locations properly.
  2. For newer browsers, you should also include a higher-quality 32x32 icon. (More on this later.)
  3. For iOS devices, create a set of four Apple touch icons (for iPhone 3GS and below, for iPad, for iPhone 4 and above, for retina iPad).

And here’s how we added them to our site’s pages:

<!-- Favicons and touch icons -->
<!-- For retina-display iPads -->
<link href="/assets/images/apple-touch-icon-xlarge.png" rel="apple-touch-icon-precomposed" sizes="144x144" type="image/png"/>
<!-- For retina-display iPhones -->
<link href="/assets/images/apple-touch-icon-large.png" rel="apple-touch-icon-precomposed" sizes="114x114" type="image/png"/>
<!-- For iPad 1 -->
<link href="/assets/images/apple-touch-icon-medium.png" rel="apple-touch-icon-precomposed" sizes="72x72" type="image/png"/>
<!-- For iPhone 3G, iPod Touch and Android -->
<link href="/assets/images/apple-touch-icon-small.png" rel="apple-touch-icon-precomposed" type="image/png"/>
<!-- For Nokia -->
<link href="/assets/images/apple-touch-icon-small.png" rel="shortcut icon"/>
<!-- For everything else -->
<link href="/assets/images/favicon.png" rel="shortcut icon" type="image/png"/>
<link href="/assets/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
favicon.html – View Gist

A few of things of note here:

We thought this would cover all our bases.

The nature of the problem

As it turned out, we thought wrong. Safari’s Reading List feature, as you probably know, uses the site favicon, if there is one, as the identifying image of a site in the list. But what you may not know is:

  1. The reading list icon is 32x32.
  2. Safari Reading List seems to—quite rightly—only look at the last valid favicon declaration on your code. In our case this was favicon.ico. So if your declared favicon file is 16x16, as ours was, that’s what gets picked as the reading list entry graphic. And as you might imagine, the upsized 16x16 icon looks, well, awful.
    fuzzy reading list favicons
    But, we noticed, some sites had a nice sharp icon in the reading list:
    nice favicon
    Obviously they’re using a 32x32 favicon.ico, but doing just that would be counter to the best practice of using the 16x16 icon as the safe fallback for older browsers. No, what we really needed to do was create a multi-resolution favicon.

Nuts and bolts: making the thing work

Now, there are lots of instructions available for software we didn’t have or weren’t interested in learning, so we searched for a while to find how to do what we needed with the tools we had.

Unfortunately, though the ICO format plugin we use for Photoshop would have been the easiest solution for us, it doesn’t do multi-resolution favicons. So we thought, why don’t we generate individual icons at the 16x16 and 32x32 sizes, then use Apple’s built-in Icon Composer software—it can generate ICO files as well as ICNS (the format Mac OS X icons use) files—to put them together? The procedure was simple enough: create a blank icon in Icon Composer, convert it to ICO mode, then drag the different-sized icons into the appropriate slots in the application window, and voilà! You have a shiny new multi-resolution favicon!

Yeah, that didn’t work so much. We found out the hard way that Icon Composer discards the color profile you painstakingly embedded in your icon files and interprets all the colors in the Generic RGB color space. For us, this meant that our favicon was way darker than we wanted it to be.

So we went back to Photoshop, and before saving the individual icon files, we manually converted them to Generic RGB so that the colors remained as close to the original as the software could make them. No dice; while the new Generic RGB icon was better than the first, the colors were still off. Long story short, Icon Composer is useless for generating web graphics, since it can’t accurately reproduce colors.

Back to the drawing board. After some more research, we found out that Telegraphics, the company that makes the ICO format plugin, also distributes a command-line utility to combine multiple ICO files into a single one. So what we did in the end, and what you can do, was this:

  1. Use Photoshop and the ICO format plugin to generate favicons at each resolution you want, with your desired color space embedded. We use sRGB.
  2. Use the ICOBundle utility to combine the individual icons together into a single, multi-resolution favicon.

You might think we’re done, but wait…there’s more!

It seems that to create the icon used in the Reading List, Safari doesn’t merely stick your favicon as-is in the designated spot in each list entry, using the 32x32 version if it’s available. It superimposes your (native or upsized) 32x32 favicon on a white background, takes a capture of that, then rounds the corners of the white-background capture and finally displays it in the Reading List. So what does that mean?

Phew. That was quite an involved explanation, but actually doing the work doesn’t take too long. After all that, we finally have a favicon that looks good in the Safari Reading List:

final Device Scout icon
comments powered by Disqus