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:
- If you have the appropriate access, and you care about supporting older browsers, place a 16x16 Microsoft icon file called
favicon.icoin 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.
- For newer browsers, you should also include a higher-quality 32x32 icon. (More on this later.)
- 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:
A few of things of note here:
- The code is based on that found in the 320 and up project.
- Astute readers will have already realized that the code doesn’t totally match the guidelines above; we had decided not to support really old browsers, so we put our favicons with the rest of our image assets.
- We included a 32x32 PNG as well as a 16x16 ICO, the latter as a safe fallback for not-so-old-but-not-new browsers.
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:
- The reading list icon is 32x32.
- 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. But, we noticed, some sites had a nice sharp icon in the reading list: 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
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:
- Use Photoshop and the ICO format plugin to generate favicons at each resolution you want, with your desired color space embedded. We use sRGB.
- 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?
- If you use alpha transparency in your icon, make sure that you’re happy with how it would look sitting on a white background.
- If you’re using rounded corners in your icon, their radius should match the Reading List ones exactly, or you might see a weird white fringe on the corners. The easiest ways to get around this are either to use your logo or type on an entirely transparent or white background, or if you use a colored background, to make the icon square and bleed the color all the way to the edges, so that it looks seamless when Safari adds its own rounded corners.
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:comments powered by Disqus