Everything you need to know about favicon

A very simple concept yet so easy to screw up. When I worked on my first website, it took me a while to understand how to deal with this favicon thing. I noticed how a lot of websites had this cool little icon when I bookmarked them but mine didn't. So I started my quest on finding how to create my own little cool icon. Today, I will save you that trouble and show you all I learned over the many years.

For every web request you make, the browser takes the liberty to make an extra request to http://www.yourwebsite.com/favicon.ico. If it fails, the next time you access another page the browser still requests it. It's a never ending game.

The .ico file extension is a weird one. It is used to be the default type for icons on windows machines yet there were no easy ways to create it. Popular image editing software like Photoshop still doesn't natively support it. You have to install a plug-in like Telegraphics ICO Format for photoshop to be able to use it. Link

But before I discovered this plugin, I just went to Real favicon generator.

Since the first days of favicons browsers have gone a long way. You are no longer limited to this small unusual format. You can go beyond the 16x16 pixels limitation. You can now use PNG, JPEG, or GIF that are much easier to create. No matter what the size is, the browser is smart enough to find an optimal display for it. Instead of letting the browser automatically request the file on your root folder, it is better to specify it yourself.

The favicon MIME type have confused a lot of people, so chances are you will still find erroneous tutorials still lurking the web.

• image/x-icon ✔
• image/ico ✘
• image/icon ✘
• text/ico ✘
• application/ico ✘

For the browser.

Favicon are most popularly used in the browser. Instead of letting the browser automatically check the root folder of the website for the favicon, we can specify it our self.

If you want to cast a wider net of support, you should stick to the .ico format. It is supported by browsers old and new, and is large enough for anyone to recognize your logo.

<link rel="shortcut icon" href="http://example.com/myicon.ico" />

For this, you don't need to specify the mime-type. The browser will recognize is automatically. But if you want to be specific, here it is:

<link rel="shortcut icon" type="image/x-icon" href="http://example.com/myicon.ico" />

This covers all browsers. But If IE7 is not your cup of tea and you want more flexibility for creating your image, you can just go with the more popular PNG.

<link rel="icon" type="image/png" href="http://example.com/image.png" />

The way I go about it is create a large logo, at least 300x300 pixels, then I scale it down for my needs.

For .ico the maximum supported size is 48x48. But there are other devices that require larger format. Apple came up with their own standards for different reasons. So for this website, I use both favicon and Apple's version:

<link rel="shortcut icon" href="http://cdn.idiallo.com/favicon.ico" />
<link rel="apple-touch-icon image_src" href="http://cdn.idiallo.com/apple-icon.png" />

Other devices.

There are other devices that also require some sort of favicons but it could be a hassle to support all of them. The important thing is that they are all PNGs so you can easily create them.

Apple has at least 10 different formats each with its own size. One for each of their devices or OS that support a different resolution. I don't break my head over it, I simply create a large enough icon, and they can reduce the size on the fly on the device.

Android devices, from TVs to smartphones have their own sizes too. It will fall back to Apple's link if you don't define it, so I tend to ignore it.

If you used Windows 8, then you must be familiar with the Metro tiles. When you save a website on Internet explorer, It gets displayed in that section. And they use their own format too. Again they fall back to the biggest image you have on the page so we don't worry much.

---

The whole point of using a favicon is to help users identify your website quickly. If I check my bookmarks, I don't have to read your URL to know who you are, a simple glimpse at the icon can be a good reminder.

It is one thing to try to make a cool complex image that is hard to understand, it is a whole other to create a simple logo that can immediately identify your website.

I hope you find this quick lesson on Favicon interesting.

---