Grow your CSS skills. Land your dream job.

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

Published by Guest Author

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: 16x16. The standard.
  • B: 32x32. Wasn't favicon updated some time ago?
  • C: 64x64. 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 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?

  • 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: 96x96 for Google TV
  • B: 196x196 for Android Chrome
  • C: 228x228 for Coast by Opera
  • D: All of the above

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:

  • 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.

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?

  • 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 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?

  • A: Windows 8 tablet? What is this?
  • B: favicon.ico. Steve Balmer legacy.
  • C: Two msapplication-TileColor and msapplication-TileImage meta 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.


Web site tile in Windows 8 desktop

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

  • A: 150x150. Can't you read?
  • B: Something else.

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.

Comments

  1. TylerH
    Permalink to comment#

    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.

  2. Filip
    Permalink to comment#

    All this favicon mess is ridiculous. There should be just one way to access the icon – browsers would handle the rest.

    • Robert
      Permalink to comment#

      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.

    • Permalink to comment#

      I second that.

    • Permalink to comment#

      Is really ridiculous when you think about it.

      Motion approved.

  3. Favicons were introduced in 1999 by W3C and first implemented a few years later by Internet Explorer 5.

    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.

  4. Permalink to comment#

    Perfect, exactly what I was looking for! Thanks, Chris!

  5. Elton Mesquita
    Permalink to comment#

    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!!!

  6. Shawn Lam
    Permalink to comment#

    I learnt quite a bit today! Thanks for the guest post and I can see myself using the generator soon.

  7. Permalink to comment#

    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.

    • Permalink to comment#

      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!

  8. 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?

  9. Permalink to comment#

    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"/>

  10. Permalink to comment#

    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…

  11. 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…

  12. Awesome post – awesome tool!

  13. 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.

  14. 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! :)

  15. JohnnyQ
    Permalink to comment#

    I reckon this is a useless feature of browsers. Couldn’t agree more with you Chris

  16. Permalink to comment#

    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.

  17. They all need to support SVG and be done with it.

  18. Marcel
    Permalink to comment#

    It would`t be web development if it didn’t display differently on every platform.

  19. Mario
    Permalink to comment#

    STOP THIS MADNESS!

    SVG icons for everybody please!!!

    • Chester
      Permalink to comment#

      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.

  20. 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.

  21. Lynda
    Permalink to comment#

    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.

    <!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
    <!--[if IE]><![endif]-->
    
    <!-- IE 10+ "Metro" Tiles - 144x144 pixels in size -->
    
    
    
    <!-- Touch Icons - iOS and Android 2.1+ 152x152 pixels in size. --> 
    
    
    <!-- Firefox, Chrome, Safari, IE 11+ and Opera. 96x96 pixels in size. -->
    
    

    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.

  22. Bhaskar
    Permalink to comment#

    Hey Chris, Thank you for this great Post. I liked it now I know how to handle for all types of Favicons….

  23. David
    Permalink to comment#

    Very helpful resource. Thank you for your thorough post.

  24. tim
    Permalink to comment#

    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…

  25. Why can’t they simply support SVG, something along the lines favicon.svg and 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. :)

  26. Ankit Yadav
    Permalink to comment#

    http://realfavicongenerator.net/ does not work anymore, tried several times and failed.

  27. Super overview on favicons. Thanks for that.

    Cheers from Berlin

  28. Mark Curtis
    Permalink to comment#

    Windows 8.1 actually allows for 4 different tile sizes, pity the favicon generator doesn’t have that.

    http://www.buildmypinnedsite.com/

  29. Permalink to comment#

    Great article :)
    Thanks

  30. 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!

  31. RZKY
    Permalink to comment#

    someone should make a Grunt/Gulp task for creating all this icons.

  32. Mike
    Permalink to comment#

    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.

  33. 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 :)

  34. Mowgli
    Permalink to comment#

    Check out this article for a more trimmed down solution: http://www.jonathantneal.com/blog/understand-the-favicon/

  35. Chris
    Permalink to comment#

    That amount of markup is insane for something so trivial.

  36. 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.

    • Permalink to comment#

      Wasting mobile bandwidth in the process… but yes, it would be much easier.

  37. Permalink to comment#

    Wow, very cool post. I figured out some of those things myself but hadn’t considered all of them before.

  38. Permalink to comment#

    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…

  39. Ralph
    Permalink to comment#

    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. :-)

  40. Mowgli
    Permalink to comment#

    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

  41. 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.

  42. Mick
    Permalink to comment#

    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.

  43. Congratulations! You just wrote the next A Book Apart book about favicons.

  44. Permalink to comment#

    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!

  45. 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.

  46. Fire-Dragon-DoL
    Permalink to comment#

    I can’t believe I needed 17 lines plus roughly 20 files to have correct favicon on my website…

  47. 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.

  48. Good article. I use Real Favicon Generator all the time. It’s a great service. Kudos to the creator :-)

  49. Permalink to comment#

    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:

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

    I tried some little changes and the bug was fixed by this code:

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

    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.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".