Favicon - Why you're doing it wrong

You know what the favicon is. This is this small icon in each browser's tab.

Web developers are familiar with the classic favicon declaration:

<link rel="shortcut icon" href="/favicon.ico">

Each web site comes with its favicon. A must have. But wait, what is needed exactly?

The many faces of the favicon in 2015

With the iPhone and so many new devices created during the last 10 years, the favicon is no longer a single 16x16 picture. It has many usages, many sizes and many designs.

The most well-known derivative is the Apple Touch Icon for iOS. This icon is used when your visitor adds your site to his home screen. No Touch icon? iOS generates a miniature of the bookmarked web page and uses it as the icon. Not great.

Android and Windows 8 follow the same trend, each one with its own approach.

With so many buzz around mobile web and responsive design, it just becomes mandatory for the favicon to address these new platforms. Basically, if you still stick to the classic favicon.ico, you're 10 years behind schedule.

Why is that?

It's a mess

Creating a single 16x16 icon is easy. But what if we want to support iOS, Android, Windows 8 Metro and desktop browsers? We need 4 picture at a minimum. If we want to do the job completely and address everything (first generation iPhone, latest Retina iPad, Android Lollipop, IE 9, MacOS Safari...), we can create up to 26 pictures. Sounds like we gonna have a great day.

There are not only a lot of pictures. Declaring them is also tricky. With Windows 8.1 and IE 11, Microsoft introduced the new browserconfig.xml. The main purpose of this file is to create "live tiles" and make your Metro tiles dynamic. This is also where you declare your 4 pictures dedicated to IE 11. For example, the 310x310 tile picture, which is actually recommended to be 558x558, for high density screens (but still declared as the square310x310logo picture in browserconfig.xml. Is that clear enough?). Android Chrome M39 also comes with its own manifest. No XML but JSON here.

So we not only have to create a lot of pictures, we also need to learn a lot of stuff. Just to create a compelling favicon. Hum...

Design matters

So, creating 20-something icons is surely not funny, but this is something we can deal with. This task can be automated. Give a script our picture and the sizes we want, it will create them all in no time.

But wait! Creating a multi-platform favicon is not only a matter of size. Each platform has its own design requirements. For example, transparent icons fit the Android home screen well. But iOS prevents them. It simply fills the transparent regions with black, which is generally not what we want.

We not only have to generate a lot of icons. We have to craft them, platform per platform. Damn.

Google doesn't help

Nowadays the first step to fix anything is to launch Google. Let's do this and find the information we need. For example, what are the sizes of the Apple Touch icon? Let's google "touch icon size".

The first result is from StackOverflow. Exactly what we would expect. Unfortunately, the first answer is two iOS versions behind: it talks about the 144x144 touch icon for Retina iPad running iOS 6. iOS 7 introduced the 152x152 picture, and iOS8 adds the 180x180 picture. You have to scroll to the 4th answer to get it right.

All is not lost, the second result are the Apple specs themselves. End of the story? Not really. The specs were not updated for iOS 8. Nothing beyond 152x152 is documented there.

Okay but what we really need here is a favicon generator right? We don't care about all these information after all. Google again, "favicon generator" this time.

Out of the 7 first results, 6 of them only generate the favicon.ico you needed in the pre-iPhone era. Only one covers the whole spectrum. It appears that this is RealFaviconGenerator, the very site you're visiting and reading right now. I was as surprised are you are.

So Google surely brings the correct answers but we still have to figure them out. "I feel lucky" doesn't work with favicons.

Conclusion

If you want to master the art of favicon, the Favicon Cheat Sheet is a great place to start. It lists a lot of information in one single place, which is very valuable by itself. Mathias Bynens also does an excellent job at updating his famous article about Touch icons. The RealFaviconGenerator's FAQ also deals with a lot of tips and tricks and references.

What if you don't really wanna know everything about favicon, but simply get the job done quickly? Well, you have the next-gen favicon generator option. Which is, by the merest chance, this site. Yes, among 1 billion web sites, this article was just published by the site it was referring to as the best site ever. You didn't see that coming and nor did I.