Since they were first introduced by Internet Explorer in 1999, almost nothing about favicons has changed. They have almost-always been ICO files, either nested in the root of the domain as /favicon.ico, or organized by a CMS into a theme or images directory and displayed with:

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

The classic favicon.ico is a 16×16 ICO file, often served in either 16-color or 24bit alpha-transparency format. More recently, favicons have been served as 32×32, which is appropriately scaled down in all major and popular-legacy browsers. In IE10 Metro, the 32×32 icon is used in the address bar.

The rel attribute of a favicon is a product of evolution. Internet Explorer 5 intended shortcut icon to represent the relationship between the page and the icon, but when the specification separated relationships by space, this theoretically created two relationships, shortcut and icon. It wasn’t until 2010 when the HTML5 specification declared icon alone to be the standard identifier. In non-IE browsers, favicons can be served without the shortcut property.

The type attribute of a favicon is about as useful as the type attribute of a <script>. As of Janaury 16, 2013, Wikipedia hints that the favicon’s type attribute may effect whether or not Internet Explorer will correctly display it. In reality, Internet Explorer only cares about the server mime for the ICO file, and otherwise ignores the type attribute. The type attribute can be anything, and it can be nothing.

Bad news, everyone! Chrome and Safari will use the ICO favicons anyway.

This really depresses me, because Chrome, Firefox, Opera 7+, and Safari 4+ all accept the PNG favicon, but Chrome and Safari will opt to use the ICO favicon when both are presented, regardless of the order in which they are declared. On the other hand, Internet Explorer does not support PNG favicons, but it will ignore the PNG favicon and use the ICO favicon, regardless of the order in which they are declared.

How do these PNG-favicon-compatible browsers determine which favicon should be used? Firefox and Safari will use the favicon that comes last. Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 32×32 favicon. Chrome for Windows will use the favicon that comes first if it is 16×16, otherwise the ICO. If none of the aforementioned options are available, both Chromes will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 16×16 favicon and use the 32×32 version if only to scale it back down to 16×16 on non-retina devices. Opera, not wanting to take sides, will choose from any of the available icons at complete random. I love that Opera does this.

And that’s just the beginning. Now it’s time to learn about the Internet Explorer caveats.

While IE8-10 will display the favicon on first load of the page, IE7 will skip the first load and display the favicon during repeat visits. Worse yet, IE6 will only display the favicon once the site has been bookmarked and reopened in the browser. IE6 will also drop the favicon whenever the browser cache is cleared, and it will not display the favicon again until the site is either re-bookmarked, or the favicon is somehow reloaded. If IE6 and favicons mean a lot to you, you can force this reload with a little JavaScript snippet, preferably wrapped in a conditional comment.

If all good browsers support PNG favicons, and IE browsers need ICO favicons, but ICO favicons throw off Chrome and Safari, why not wrap the ICO favicon in IE conditional commments?

That is a great question, and it leads to a great idea. PNG files are a fraction the size of ICO files. We could serve a classic 32×32 ICO favicon to IE, and a super sleek 96×96 PNG favicon to everybody else.

Hey, hey — what if we stick the ICO favicon in the root directory and use <link rel="icon"> to assign the PNG favicon?

You. Win. The Internet! Given the limitations of Chrome, Safari, and IE, this method will give every browser the best favicon experience. IE will ignore the <link rel="icon"> and use the ICO favicon found in the root of the domain as /favicon.ico. All other browsers will use the PNG favicon displayed with:

<link rel="icon" href="path/to/favicon.png">

But what if I want multiple favicons or my CMS doesn’t like to do things this way? Is there … another way?

Unsatisfied with either solution? All is not lost. IE10 users are mostly Windows 8 users for now, and Windows 8 introduces a new kind of display icon for websites — tile icons.

With IE10 Metro we can display a unique tile icon when the visitor pins our site to their Start screen. These tile icons are 144×144 PNG files, and for best results they use a transparent background. A background tile color can be specified using a hex RGB color (using the six-character #RRGGBB notation), a CSS color name, or the CSS rgb() function. The markup is pretty simple.

Wait, I came here for touch icons.

It’s perfectly possible to just create one high-resolution icon. Lower display resolutions automatically resize the icon. The downside is, this affects performance negatively whenever the site is added to the home screen.

As of March 2013, if you’re lazy and don’t really care about performance when the site is added to the home screen, just use a single 152×152 icon.

great write-up JTN, & tip @alrra
got me thinking–could a registry of favicons be created?
…could such a registry system (like domain names) allow for single character hyper-links?
I also wonder if a favicon registry could allow users to brand and track comments, and other online content they contribute, regardless of site/medium?

Thanks for explaining this is great details. What I don’t really like is catering for yet another platform like we have to do with the windows tile icons. Instead of an apple-touch-icon and a windows tile image, we’d be better of with a platform neutral notation but that’s the web 🙂

chriscoyier

I think it would be interesting to know more about how favicon caching works. Seems like one of those things where the cache is particularly stubborn in some browsers. And can it be programmatically changed?

Chris, when you want to change the favicon that was previously cached by the browser ( and stubbornly displayed even if it has been replaced/edited ) just use a version number on the favicon like this: .

This is great – but it’s also missing the Chrome specific favicons (specifically the 16, 32, 48, 64, and 128 square PNGs you can set) and the multiple sizes of iOS touch icons (57, 114, 72, and 144 – although you can make only the 114 and 144 and it’ll scale down appropriately). Just another layer to favicons that get used, it’s become almost exhausting to set so many at this point.

Hi Kyle. Great catch. I saw those specifications on Wikipedia and I see that you are using them on your website. Outside of a Chrome webapp (where the icon might otherwise be specified in a manifest.json), could you tell me more about when those icons are used by Chrome? I would like to update the post and link to your twitter. Thanks again for pointing this out – it is exhausting, but can be really useful to know.

From what I understand, Chrome uses them in various places in various OS’s. Not sure if the 16/32 overrules the favicon or not. I believe the 128 could be used on the “homescreen,” as it were. The 64/48 is used in Windows 7, I think? The larger icon when you “pin” a link to your taskbar (haven’t used Windows 7 so not sure exactly). There’s a few articles on StackOverflow (including this one: http://stackoverflow.com/questions/5110741/google-chrome-uses-wrong-size-of-favicon) that discuss it, but I’ve never seen a comprehensive list.

Good read.
But then again, I have Windows 7 *and* IE10. And I guess I won’t be the only one.
Sucks to be me? Hell, no, I use Chrome. But like many others here, I’m a web developer…
So, sucks to be a web developer…

Great read.
Article could be extended about information about IE9 pinning icon & mobile icons.

maxw3st

Just started playing with favicons recently and wondering why they’re appearing in the browser tabs, but not the address bar. Will be whipping up some png copies. But, wow, minimum 5 lines of code to serve up an icon, seems ridiculous, but typical of current web–dev.

In any event, Thank you much for the article. It clears the confusion up nicely.

Ted

This is for security reasons, as people could use a favicon that makes the site appear secure when it is not.

standard icons is something the html5 spec needs to sort ASAP. I don’t want to make so many different sizes and versions. The best solution would be a SVG icon do it scales beautifully. You can also serve different graphics for different dimensions in SVGs if that control is required.

Court Kizer

Do what EVERYONE does including Apple. Create a PNG Favicon. CHANGE extension to .ICO 🙂

Андрей Ситник

Nice article, but I didn’t understand most important question: which favicon sizes we need now? We have a lot of browser and OS. Also mobile browsers use retina screens.

Very good read. You explain everything nicely but omit any information about apple-touch-icon, though you still use it in your last example. Maybe you could provide the information about that as well (as there are several possible sizes of the touch icon…)

cahnory

Did you try this to make chrome use the png icon :

Maybe I missed something, I’ll read this article again when I’ll be back to home. If not, here’are my tests and summary on the topic :

Sorry to come across as negative, but this all seems somewhat ridiculous simply for displaying a little icon somewhere on the screen. Just when technology develops to make our lives easier it seems like new things are introduced which make the simplest of tasks more complex!

Yes, and that’s very clever. Note that document.documentMode was introduced in IE7 and querySelector was introduced in IE8.

silvenon

Just to confirm, in the second-to-last solution ICO favicon would be 32×32 and PNG favicon would be 96×96?

Mark Stickling

I’m wondering the same thing a year later. Could we have a little explanation where 96×96 came from? I would have thought it ended up fuzzy when scaled to 32×32 (if that’s what the browsers do) but I’m not an expert. Thanks for the great article.

silvenon

This topic needs to be revisited, a new blog post perhaps!

Mark Stickling

Just used this: http://realfavicongenerator.net
Seems great. Much, much, more than a simple ICO generator. Seems to do the whole set (not sure if it covers the IE9/IE10 issue though).

One question I have is surely with all these tags and .png/.ico images there is a bigger then needed increase in resource requests.
Can browsers distinguish pre-render which favicon to use or are all requested and then compared? If so then perhaps multi-res .ico is the way to go.

praveen

Hi , Im new to Single page application.
Im wondering how to change the favicon icon based on pages(ie angulr ui states) where complete page is loads only one time and rest are like changing states .

But i have requriment that each tab change i need to show the favicon icon as equal to Tab icon..

Any iDea ?

AMbro86

Man, IE sucks! What is their problem? It’s 2014, time to get with it and provide a compatible browser.

Daniel Larsson

Nice work, where did you learn all this? Did you find out by testing or did you read a bunch of specs?

Good to read about 32 bit favicon for smartphone based applications.
Team – Equinox e Services – Designing

Lynda Spangler

Nice article. Thank You. The good news is IE 11 DOES support PNG Favicons and as of this writing IE 11 has more support than IE 8, 9 or 10! Finally we might have hope for moving out of the dark ages with IE.

Paulo Santos

Great post! I’ve read a “Favicon Cheat Sheet” that explained all this formats too! Also, I found http://faviconit.com that creates them. Have you guys used this Web App?

Jens O. Meiert

This is a nice write-up! I wish, of course, it was focusing on HTML purity a bit more [1], but right now I’m rather curious whether sticking with and large-scale .ico files (like 96×96, 128×128) mean a good interim solution. (I’m just investigating the topic again after indeed, for many years nothing had really changed.)

Is there still truth to the fact that if you do not declare a sizes via the sizes attribute for ios, ios will default to a 60×60 regardless of icon size?

Or by some strangeness does the size in the file itself suffice?

DigDug2k

I bet the links from Paul below have this, but you might note that ico files CAN contain PNGs. Multiple PNG’s, at multiple resolutions. In our bandwidth obsessed world, its kinda a waste to ship icons that way, but it will work.

Hayden

At first glance, I predicted this to be a boring article. Now that I have taken the time to read it, however, I feel that my previous thought was incorrect. This article, being a few years old but not outdated, not only shows me how to link to favicons using HTML (which is why I visited this article in the first place), but also taught me some history on favicons, how the idea came to be, and how it has developed overtime. I didn’t know favicons work as PNG files before today.
If you’re interested in your user’s experience on your website with regards to logos, this article is a must.

Trans

Hello everybody, you can create your favicon online and free at http://onlinefavicon.com/ , create favicon from png, jpeg or gif file file to 16×16 or 32×32 ICO file, also you can see gallery with favicons created by other users and download the same. With drawing tool you can create your own favicon. At the end you read the description how to set up favicon to your site.

intrr

This is representative for the completely chaotic state of web technologies. Something as simple (and utterly important) as getting a relevant and technically fitting icon for a resource is pretty much impossible to achieve without using third-party services or writing 10.000 (or more) lines of code. This is ridiculous.

Andy Pillip

Thanks Jonathan. Great article!

> How do these PNG-favicon-compatible browsers determine which favicon should be used?

How is it with different resolutions inside the .ico file? Do browser behave just as with png icons?

I’m on desktop and my Firefox uses the 64 px version from my .ico file.

Sahabudin tkj

I just need the name of favicon

Jimmuel Saints

Great ideas ! Coincidentally if others need to fill out a MD Order Form , my colleagues encountered a template version here https://goo.gl/Vcwr3C

Arahanth

HI,

I have a single page angularjs application. In the main page i have a favicon set like below

On the click of an edit link in this main page, a new tab opens and i have the below code to dynamically add a new fav icon. The “url” parameter has the link to the new FAVICON.

When the above code runs. Both the tabs in the browser get updated to the new favicon.I need oly the edit tab with the new favicon. I am not sure why IE11 is behaving this way. Same code works perfectly fine in Chrome. Can you please let me know why this is happening.

I tries clearing cache and browser history and restrted IE11. Still no luck. Please help me out.