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?
- A: 16×16. The standard.
- B: 32×32. Wasn’t favicon updated some time ago?
- C: 64×64. You know, with all these new high pixel density screens.
- D: None of the above.
Answer: D.
favicon.ico is a format originally conceived by Microsoft and the other vendors have gone along with it. Microsoft recommends 16×16, 32×32 and 48×48. Yes, a single ICO file can contain multiple graphics.
Desktop browsers often use the favicon in a tab, and on standard resolution displays, the 16×16 version is fine:
But a 16×16 icon is too small for other places: the task bar and the desktop.
As soon as the icon contains several pictures, the results are much better.
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?
- A: An icon for browsers which do not support
favicon.ico. Such as Firefox, maybe? - B: A high resolution icon. You know, with all these new high pixel density displays.
- C: An old relic from the past. Now there are modern icons such as the Apple Touch icon.
- D: Answer D. It’s complicated.
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?
- A:
favicon.ico. It worked 15 years ago it’ll work today. - B: PNG icons. You said you would talk about it.
- C: Apple Touch icon. Duh.
- D: The right answer is never listed anyway.
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?
- A: 96×96 for Google TV
- B: 196×196 for Android Chrome
- C: 228×228 for Coast by Opera
- D: All of the above
Answer: D, and more. Like the 160×160 picture for older versions of Opera Speed Dial (long gone), or the 128×128 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 57×57, congratulations. This is correct. Well, it was, 7 years ago, when the first iPhone was released.
Answer: Up to 180×180.
Three releases occurred since the birth of the first iPhone:
- The iPad. Its screen is much larger than the iPhone.
- The Retina screen. It doubles the pixel density of the original screen.
- iOS 7. Its flat style makes the appearance of iPhone/iPad slightly different.
In total there are nine combinations:
| Device | Screen | iOS version | Icon size |
|---|---|---|---|
| iPhone | Classic | 6 and prior | 57×57 |
| 7 | 60×60 | ||
| Retina | 6 and prior | 114×114 | |
| 7 | 120×120 | ||
| 6 Plus | 8 and above | 180×180 | |
| iPad | Classic | 6 and prior | 72×72 |
| 7 | 76×76 | ||
| Retina | 6 and prior | 144×144 | |
| 7 | 152×152 |
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 9 graphics are not really necessary. But at least, your master Apple Touch icon should be 152×152. 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?
- A: I dunno. Come on, you have to answer something!
- B: Yes. How could iOS find them otherwise?
- C: No. Apple defines conventions so that iOS devices can find them anyway.
- D: No but…
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 as 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?
- A: Windows 8 tablet? What is this?
- B:
favicon.ico. Steve Balmer legacy. - C: Two
msapplication-TileColorandmsapplication-TileImagemeta tags. - D:
browserconfig.xml.
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"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig>New Metro UI comes with a new set of guidelines, like the “white silhouettes” used by most of the builtin apps.
Question: What is the size of the square150x150logo tile picture?
- A: 150×150. Can’t you read?
- B: Something else.
Answer: B, 270×270. 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 57×57 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 32×32 PNG icon and a 152×152 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.
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.
For example, by submitting a high resolution icon, I was able to generate this set of icons in a few clicks.
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.
I’m pretty sure Firefox supports .ico files; I’ve used them for years in my site and have always been able to see the favicon when using FF (my main browser)
I confirm it does. If you offer FF a favicon.ico icon and different PNG icons, it will favor the 32×32 PNG picture. But favicon.ico is still a excellent fallback solution.
All this favicon mess is ridiculous. There should be just one way to access the icon – browsers would handle the rest.
Agree, and let’s be clear that this is about more than favicons when you have to create something the same or similar for apple touch. I spend way too much time keeping up with this. My personal spreadsheet that I use to document these things is in permanent flux. I’ll add information like from this article when it becomes available but I cannot be sure when I refer to it tomorrow it will still be current. And when you add icons or images for the assorted social media it becomes a nightmare.
I second that.
Is really ridiculous when you think about it.
Motion approved.
It was the other way around. IE introduced favicons as a proprietary feature, and since other browsers wanted to follow suit, it was eventually standardized later that same year.
Damn! I failed my own quizz! :(
Perfect, exactly what I was looking for! Thanks, Chris!
Nice article. I was almost in the process of research about it. You sir, saved me a lot of time!!!
Nice tool you’ve built!
Thx a lot!!!
Thanks! :)
I learnt quite a bit today! Thanks for the guest post and I can see myself using the generator soon.
Hmm still a bit skeptical on the amount of formats needed.
I don’t see why so many PNGs are needed when as far as I’m aware all browsers accept ICO as a format and will pick the preferred size within that ICO.
Also as far as I’m aware all devices will use the apple-touch-icon and then scale it down to fit on other devices.
Obviously feel free to point out where I am wrong on this, there’s always conflicting posts when it comes to Favicons e.t.c.
Great post nonetheless :)
Unless you really really want your icons to be perfect and every size (and therefore you’re not simply using an automatic generator, which defeats the purpose) you only need two:
favicon.ico: 32×32 png file with .ico extension that looks decent at 16×16. You don’t even need to reference it in the html, browsers look for it automatically at the root, that is: http://www.example.com/favicon.ico
a 152×152 png file referenced as
<link rel="apple-touch-icon" href="/icon.png">There’s no need to clutter every and each request with that much code.
Well you can always place multiple images (an otherwise different images) into the ICO file. Rendering all the singular PNG requests useless. (pretty sure all browsers use the ICO file).
I get that some browsers (not sure if all) look for the favicon in the root. However, still think you might as well include the link to it.
Thanks!
Yeah, that’s a lot of code and pictures. The favicon.ico + apple-touch-icon.png combo does a great job. Then, this is a matter of how many platforms we want to support and how “well” we want to support them. For example, someone once told me he wanted to use the nearest neighbor algorithm to scale down his icon (it was pixel art; the blurry effect added by regular scaling algorithms, such as Mitchell, doesn’t fit). If he only had provided a 152×152 icon to an iPhone, the result should probably have been different of the expected result. Here, it makes sense to scale down the icon at design time and provide all versions to the various devices. Yep, this is a tricky use case!
When I see the complicated that is to get icons right nowadays… I can not help but to think “This is some serious bullshit”.
Is this not one of those cases where SVG would save us a lot of trouble?
Seriously, this is so much more complicated than it needs to be.
This should cover everything (but doesn’t)
<link rel="icon" type="image/svg" sizes="any" href="favicon.svg"/>See you in 5 years :)
You always seem to come out with these articles just as I need them! Great post!
I also found an amazing grunt task to automate this mess: https://github.com/gleero/grunt-favicons
Life is far simpler now…
I’ve used your tool in the past. Nice to know it’s actually a good one!
H5BP have stopped bothering to use so many icons… makes sense to me. Is it really worth using so many files? It clutters the hell out of your root directory.
Thank you!
Yeah, I admit I’m not 100% satisfied when I copy/paste the generated code in my own HTML. So much similar lines. My inner voice tells me there must be a better way.
I’ll try to reduce the amount code and pictures. But that will require a lot of testing to make sure compatibility and quality are not impacted. So that won’t be ready that soon…
Awesome post – awesome tool!
Thanks!!
rel=icon href=gnome.svg sizes=any type="image/svg+xml"applies to any size.Spec http://www.w3.org/TR/html5/links.html#attr-link-sizes-any
Status:
* Chrome https://code.google.com/p/chromium/issues/detail?id=294179
* Webkit https://bugs.webkit.org/show_bug.cgi?id=136059
* Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=366324
* IE https://connect.microsoft.com/IE/feedback/details/782416/svg-favicon-support (Closed as Won’t Fix)
Favicons are the most underestimated thing on the Internet today. If you follow psychologytoday blog, you will get to know that Favicons also play the part in bounce rate and Conversion.
Yep, favicon is underestimated, clearly. As a developer, I feel more concerned by the technological underestimation (web devs/designers overlook it) than the psychological one. But I don’t doubt a neat Apple Touch icon can make a difference in the “Add to home screen” rate of a site.
I never really bothered with favicons – I’d do some work and if I could see it across my own devices I’d just leave it be. The matter is much more complex it seems and I’ll try to use your advice in the future.
Great post! :)
Thank you!
I reckon this is a useless feature of browsers. Couldn’t agree more with you Chris
afaik you don’t necessarily need the browserconfig.xml for Windows 8 tiles – according to buildmypinnedsite.com you can just add that info as regular meta tags:
I think you only need it if you want it to be a live tile, pulling data from a rss feed. Btw. these tiles now also work with IE11 on Windows Phone 8.1
That’s right, tile declarations can be inlined in the HTML code. However, I think this is a good practice to put them in the browserconfig.xml file. As most visitors do not use Windows 8 RT, putting the tiles in an external file helps saving a few bytes in the HTML. And make is a little more readable.
They all need to support SVG and be done with it.
It would`t be web development if it didn’t display differently on every platform.
STOP THIS MADNESS!
SVG icons for everybody please!!!
I’m more programmer then designer but I think this post is really interesting. I haven’t realise that this is so complicated topic. Thanks.
The best OS X app I’ve found for constructing icons, hands down, is Icon Slate. It will build one-piece ICO files with every favicon size up to 256×256, and if you want to keep your hand-drawn 16×16 favicons, just drag them on the tile for 16×16. For webclip icons it will even add rounded corners for iOS 6 or iOS 7 if you want! And all those different webclip sizes are unnecessary. When the Retina displays first came out I experimented making my icons 512×512 and they automatically resized for lower resolution screens, even on Android. 1024×1024 works, too, but that’s overkill… so far.
I research favicons not too long ago and I came up with the below code for my sites and it seems to work well in my experience.
I wrote an answer on StackOverflow about this topic with additional details.
However I am left with a question. Must I use XML file for Windows 8.1 and IE 11+ for the tiles or will it use the “older” code?
About Windows 8.1: You can still use the “old” 144×144 tile pictures declared in the HTML code. There are two (small) drawbacks:
You visitors will only be able to pick a medium, square tile. But no small square tile, big square tile and rectangular tile.
As Microsoft recommends larger pictures (eg. 558×558 for square310x310logo) to support high density screens, you can expect the “old” 144×144 picture to be too small for certain screens. Yet, do such device already exist? I really don’t know.
Also note that the tile declarations of browserconfig.xml can be inlined in the HTML code. So you don’t have to generate yet-another-file, although I would recommend it.
Hey Chris, Thank you for this great Post. I liked it now I know how to handle for all types of Favicons….
Very helpful resource. Thank you for your thorough post.
Thank you!
I’m wondering whether browsers (at least most of them, and especially the mobile ones) are instructed to pick up the “right” file, or all these introduce painful requests…
Yep, mobile browsers are smart enough to pick only the best icon.
Why can’t they simply support SVG, something along the lines
favicon.svgand it’s done for all resolutions, densities, just about everything. But no … no … they can’t. This makes me a sad Panda.SVG is clearly the technical solution to the favicon hassle. Yet an issue remains: the different design guidelines. For example, classic favicon often use transparency, whereas iOS forbids transparency in the touch icon. Things can never be simple, NEVER!! :)
Silly commenting system, can’t reply to your answer. Nonetheless, those are silly design rules made up from a proprietary money maker machine that so many total idiots keep worshiping for no apparent reason. The only thing that matters is what the free web world has to say here and that’s easy: allow transparency! Give the developers and designers their freedom to do whatever they want.
I most certainly don’t care for design rules of others in general. Of course each developer or designer could easily handle those edge cases by simply not using transparency because they want to support the hipster hardware, well, go for it. :)
http://realfavicongenerator.net/ does not work anymore, tried several times and failed.
Oh :-/ Right now it’s working. Do you still have an issue is it fine on your side, too?
Super overview on favicons. Thanks for that.
Cheers from Berlin
Windows 8.1 actually allows for 4 different tile sizes, pity the favicon generator doesn’t have that.
http://www.buildmypinnedsite.com/
That’s right! The generator generate them, but it only let you design the classic “medium square” one and derive the others from it.
There is a ticket for this (https://github.com/RealFaviconGenerator/realfavicongenerator/issues/16), yet I admit I have a bunch of things to do before that…
Thank you for the link! I knew this tool from Microsoft, but I couldn’t find it again.
Great article :)
Thanks
Thank you !
Thank you for this, that is really helpful in what was becoming a bit of a minefield. I think we have to accept that browsers are never going to fall in line and so we come to rely on tools like this. Thanks for taking the time to write this article, informative and entertaining!
Thanks!!
someone should make a Grunt/Gulp task for creating all this icons.
I plan to do this in the next few months. First, the API (http://realfavicongenerator.net/api) needs to be updated since it is designed for interactive scenarios.
I’m glad to know some people are actually interested in a Grunt plugin! :)
A: Windows 8 tablet? What is this?
actually this is more true than you intended (regarding your snarky remark later on) as browserconfig is not only used by tablets but any Windows 8/8.1 System where IE is the Default browser (and yes, this calls for trolls…). This may be tablets, hybrids like the Yoga or all Desktops too where People might pin a Bookmark to their startscreen (which BTW is nice if used for your own Company).
So even if most devs won’t use IE as Default browser a lot of People might do so adding support for Icons are nice for all These.
I’m with you Tracey Rickard : “Thank you for this, that is really helpful in what was becoming a bit of a minefield. I think we have to accept that browsers are never going to fall in line and so we come to rely on tools like this. Thanks for taking the time to write this article, informative and entertaining!”
So now i need more time to design my site logo to create all of what you said in your article.
Great article & Thank you :)
Thanks!
Give a try to the generator, you will surely gain time :)
Check out this article for a more trimmed down solution: http://www.jonathantneal.com/blog/understand-the-favicon/
That amount of markup is insane for something so trivial.
sigh If only there was an image file format that supported different sizes, then we only need to include one declaration… oh wait, there is, favicon.ico! Oh, but it’s been depracated. Dammit sarcasm
I really wish the PNG format (and JPEG for that matter) were extended to include multiple images in one file, just like Adobe Firework’s proprietary PNG format. It would be great to just create a single file with all the resolutions in it, then if a new device came along that required yet another size, it could just pick the closest one. We can only hope.
At least, the multiple PNG pictures bring an advantage: a browser can pick only the one it needs. For example, Win8/FF downloads the 32×32 PNG icon (mine is only 632 bytes) and not the 196×196 one (4KB in my case). No a big deal, but favicon is not an area where people are willing to spend unnecessary bandwidth.
Wasting mobile bandwidth in the process… but yes, it would be much easier.
Wow, very cool post. I figured out some of those things myself but hadn’t considered all of them before.
Thanks! :)
Once you have navigated this jungle, add the graphics for Facebook, Twitter and Pinterest. Don’t forget Google+ and make sure to be future compatible with the browserconfig.xml. On a side note: add a cache.manifest to make sure it loads quickly even when your user visits again with a bad mobile connection, at the very least cache the embedded web-fonts you’re using. Oh, did I mention the site has to load in less than 200ms?
I’m outta here…
Yep, that’s a long way to go… :-/
Wow, it’s so hard to get a straight answer on this topic. This article is a brilliant, clear and well presented overview of the whole thing. A great resource. Great effort, and thanks so much. :-)
Thanks you!
Please delete my previous comment (code not showing)
Here is my trimmed solution.
A 4-8 kb icon is perfectly ok for a browser to download (and resize if needed).
There’s really no need for so many files and variations
<link rel=”icon” type=”image/png” href=”favicon.png” />
<!–[if IE]><link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico”><![endif]–>
<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />
<meta name=”msapplication-TileColor” content=”#111111″ />
<meta name=”msapplication-TileImage” content=”mstile.png” />
favicon.png is 96×96
favicon.ico is made with RealFaviconGenerator (I assume it holds 3 different sizes)
apple-touch-icon.png is 152×152
mstile.png is 144×144
http://jsfiddle.net/nqf7hhjj/1/
Enjoy
Great article, it highlights the issue with so many bases to cover so to speak. The impact of so many extra requests could be of more detriment then the benefits to users.
Thanks!
The performance impact is limited. Basically, browsers load what they need. See for example http://stackoverflow.com/questions/24931632/are-apple-touch-icons-always-loaded-by-the-browser/24953671 . And even if Chrome and FF have know issues regarding favicon selection, apparently this was fixed (or at least improved) in recent versions.
Declaring 8 (EIGHT!) favicons in the header is seriously ugly stuff! And that is just for Apple touch?!
I like the browserconfig.xml method, far more elegant. If only more browsers used this!
But if you’re declaring the favicon in browserconfig.xml, why not the CSS, why not the JS, why not the opengraph data, or why does opengraph not have an opengraph.xml… just saying :-/ Bloody nightmare!
I think for example’s sake, you can just employ the iOS8 sizes for iPhone and iPad, and ignore the rest as they’ll be obsolete in a year or two anyway.
Congratulations! You just wrote the next A Book Apart book about favicons.
EH eh thank you! ;)
Thanks so much. I really enjoyed your thorough analysis of the favicon situation at hand. Sheesh! Your tool is great and I’ve put it down to use as a future reference for sites. Thank you!
Thank you C :)
I flunked the quizzes. I guess I’m so 2009!
This was a really enlightening article, Philipe. Thank you!
I agree with everyone else that this is a ridiculous amount of code for something so simple. A new standard really needs to evolve out of this mess.
In the meantime, thanks for making me aware of what’s need in this 2014 multi-platform, multi-browser, multi-screen-size world.
Thank you for your feedback! You’re welcome!
I can’t believe I needed 17 lines plus roughly 20 files to have correct favicon on my website…
You don’t
Mowgly is right. The “many lines, many files” is Ok when they are automatically generated for you. But if you create them manually, you can reduce theses figures dramatically. For example, you can just define a 152×152 Apple touch icon and let the various devices downsize the picture by themselves.
Good article. I use Real Favicon Generator all the time. It’s a great service. Kudos to the creator :-)
Thanks :-)
Please delete my previous comment (code not showing)
Awesome post, thanks a lot!
I have some interesting observation about order of favicon links in code.
Stunt is that our logo is looked very bad in any conversion, so we have separate favicon for 16×16. But when I generated favicons and replace 16×16 favicon by mine, I’ve catched a bug:
In FF and IE browser shows favicon with sizes 16×16 but it seems that browser take some another big favicon and try to convert it to 16×16. There are no such bug in Chrome.
So, the original code was the following:
I tried some little changes and the bug was fixed by this code:
The favicon 16×16 shall be the last one. Only in this case FF and IE takes exactly favicon-16×16.png instead of trying to convert favicon-32×32.png to 16×16 size.
Do you have any information about this and why in your generator the favicon 16×16 is not the last, and the last is 32×32. What’s the point of this?
Sorry, I can’t deleted comments :-/
Usually, the automatic scaling of icons by browsers is not a problem. Is there something special with your picture? Is it pixel art of something (the kind of design that needs sharp edges, not the blurry features most resizing algorithms produce)?
Apparently, IE 11 takes the larger PNG icon it can find. With RFG, the 192×192 icon for Android Chrome. It is not really a good policy, especially when other smaller icons that do not need re-scaling are available. I’m afraid there is no good workaround (except deleting all icons and offering only the 16×16 icon).
Firefox does not support the “sizes” attribute (https://bugzilla.mozilla.org/show_bug.cgi?id=751712) so:
It loads all ions. Great.
It takes the last one.
The 32×32 is declared last in order to make sure that FF has a icon large enough for high definition screens (think iMac). Two possible workaround:
As you suggest, you can swap lines to declare the 16×16 icon last. You should get a high res Max OS device to make sure the result is fine on such platform.
You can make sure the 32×32 is “perfect” (either you draw it by hand as you did with the 16×16 icon or you play with the scaling algorithms offered by RFG) and make sure that FF does not damage it too much when it rescales it.
I hope that helps.