Favicons, Touch Icons, Tile Icons, etc. What All Do You Need?

The following is a guest post by Philippe Bernard. Philippe has done research on what it takes to make a favicon (and all the related graphics and markup) such that you are covered with the best quality output everywhere. Spoiler alert: it's a lot of different graphics and markup. Also full disclosure: Philippe has built a tool to help with it he showcases in the article.

Favicons were introduced in 1999 by Internet Explorer 5 (ref) and standardized by the W3C a few months later. They are a small graphic that represents the website.

Since then, most desktop browsers have followed the trend and used favicons in some way. It's an easy job, isn't it? Just create a small picture to add to any web project to make it "final". Nothing fancy. Or is it?

Let's do a quiz!

What is the primary favicon file?

Answer: favicon.ico. And just to make sure: this is not a PNG renamed to favicon.ico. Although some browsers are easygoing enough to forgive this mistake, ICO is a different format, one that supports multiple versions of an image.

Question: What dimensions should favicon.ico be?

Answer: D.

favicon.ico is a format originally conceived by Microsoft and the other vendors have gone along with it. Microsoft recommends 16x16, 32x32 and 48x48. Yes, a single ICO file can contain multiple graphics.

Desktop browsers often use the favicon in a tab, and on standard resolution displays, the 16x16 version is fine:

16x16 favicon.ico in Chrome's tab. So far so good.

But a 16x16 icon is too small for other places: the task bar and the desktop.

16x16 favicon.ico added to task bar.

16x16 favicon.ico added to desktop. Not good.

As soon as the icon contains several pictures, the results are much better.

16x16, 32x32 and 48x48 favicon.ico added to task bar. As good as a native app.

16x16, 32x32 and 48x48 favicon.ico added to desktop. Perfect.

Question: What is the purpose of favicon.png?

When digging the topic, we often encounter another file, favicon.png. People have questions about it all the time. What is it exactly?

Answer: D. Since the adoption of HTML5, favicon.ico isn't very useful. The sizes attribute was introduced to specify several different versions of the same icon, and those can be PNG files:

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

So what should we declare?

Let's face an unsatisfying truth. Altough all desktop browsers support favicon.ico, this file is mostly deprecated. Yes, you can still rely on this file and it will work as expected. But seriously, it's an old deprecated format. It is not used anywhere else in web technology. PNG is much more consistent.

favicon.ico is for old versions of IE. For the other browsers and most recent versions of IE, we use PNG icons. Then, which sizes do we declare? We'll cover that soon.

Question: What format do we need to support mobile platforms?

According to SmartInsights, more than 26% of the Web traffic is generated by smartphones and tablets. It's the future. What do you need to support this world?

Answer: D. You need PNG icons. And Apple Touch icons. And Windows 8 tile graphics. And a file named browserconfig.xml.

Mobile platforms are much more heterogeneous than the classic desktop browsers. Screen sizes and resolutions vary hugely and there is no predominant OS like Windows was when the Internet started to spread. Consequence: do not expect to design a mobile favicon with a single, universal graphic and single, universal declaration in the HTML code.

Question: Which sizes should the PNG icons be?

Answer: D, and more. Like the 160x160 picture for older versions of Opera Speed Dial (long gone), or the 128x128 icon for Chrome Web Store, here it really depends on the platforms you want to support.

Question: What is the size of the Apple Touch icon?

The Apple Touch icon is used by iOS devices for bookmarks and web sites "added to home screen". If the answer that comes to mind is 57x57, congratulations. This is correct. Well, it was, 7 years ago, when the first iPhone was released.

Answer: Up to 152x152.

Three releases occurred since the birth of the first iPhone:

Combines them and you get 2 x 2 x 2 = 8 combinations:

Device Screen iOS version Icon size
iPhone Classic 6 and prior 57x57
7 60x60
Retina 6 and prior 114x114
7 120x120
iPad Classic 6 and prior 72x72
7 76x76
Retina 6 and prior 144x144
7 152x152

An old 57x57 Apple Touch icon on a shiny Retina iPad. Blurry.

A high resolution 152x152 Apple Touch icon on a shiny Retina iPad. Neat.

If you didn't have the right answer, don't blame yourself though. Out of the 5,000 top web sites which exhibit an apple-touch-icon.png, as little as 4% get it right.

Some might argue that 8 graphics are not really necessary. But at least, your master Apple Touch icon should be 152x152. A Retina iPad running iOS 7 will find what it needs and lesser devices can scale down such picture as needed.

Question: Is it necessary to declare the Apple Touch icons in the HTML?

Answer: D... but since some other platforms also use the Apple Touch icon, it is safer to declare it anyway.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

As strange at it sounds, iOS devices are not the only ones to look for the Apple Touch icon. Since these icons are popular and more common than high resolution PNG icons, some browsers, such as Android Chrome, are using them. Therefore, declaring them is safer, in case a visitor with a compatible device or browser is able to process one of them.

Question: What does it take to define a tile for Windows 8 tablets?

Answer: C for Windows 8.0 and IE 10, D for Windows 8.1 and IE 11. Answer A is somehow also correct.

Windows 8.0 declaration typically looks like:

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Windows 8.1 and IE 11 rely on several tile pictures declared in browserconfig.xml. For example:

<?xml version="1.0" encoding="utf-8"?>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>

New Metro UI comes with a new set of guidelines, like the "white silhouettes" used by most of the builtin apps.

Web site tile in Windows 8 desktop

Question: What is the size of the square150x150logo tile picture?

Answer: B, 270x270. Microsoft recommends larger sizes to support high density screen.

Congratulations, you completed the quiz! How did you do?

The point of these questions was to point out how tricky this topic truly is, despite its apparent simplicity. The time when favicon was a single favicon.ico file is long gone. But old habits persist and lead to absurd situations. We can spend days on a super neat responsive design, yet dropping only a 57x57 Apple Touch icon, just suitable for old devices barely used nowadays.

A favicon generator for the mobile era

In 2014, creating a multi-platform favicon is complex and hard to get done right. Sure, you can get a decent result with favicon.ico, a 32x32 PNG icon and a 152x152 apple-touch-icon.png in the root of your web site. But it can take more than a dozen of picture to get the job done. Unless we work on a huge project with according budget, we usually do not have so much time to spend on this small task.

As the author of RealFaviconGenerator, let me give you a wise advice: use RealFaviconGenerator. Unlike the regular favicon generators around, it fills two needs.

Different platforms involve different UIs. While it is certainly not an online version of Photoshop, RealFaviconGenerator offers a few settings to design decent icons for various platforms. Like an opaque background for iOS (Apple prevents transparent icons) or a white silhouette for Windows 8.

RealFaviconGenerator editor

Generate all the pictures and HTML code you need to cover major platforms: PC/Mac, iOS, Android, Windows 8, etc. The generated pictures and code were extensively tested to make sure that the service keeps its promise.

Ready-to-use pictures and HTML code

For example, by submitting a high resolution icon, I was able to generate this set of icons in a few clicks.

The kind of favicon set RealFaviconGenerator can generate in a few seconds.

Now it's as easy as it was 10 years ago: make a graphic and 5 minutes later you have your up-to-date favicon at work.