The favicon mess

Yesterday I've discovered Real Favicon Generator.net, this is a great tool to check and to generate the code to handle the favicon(s) on a website. Of course, my first reflex was to run it on my website and apparently I do it (partly) wrong. Before running this tool, I thought the handling of the favicon(s) is a quite easy task but actually it seems like it's really complicated and it gets more and more complicated as new devices/systems/browsers are created/updated. For now, if you want to get a wide support you need to put something like the following snippet on every pages:

<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" />
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160" />
<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" />
<meta name="msapplication-TileColor" content="#2d89ef" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />

Seriously 13 variations of the same favicon image to link in the HTML document? Actually it's even worse, the zip file generated by the Real Favicon Generator contains 22 files (an XML file and 21 variations of the same image…), for something like 650 kb! WTF! And with the current way of embedding the favicons, this will just keep on growing!

Apple, Google, Mozilla, Microsoft, maybe it's time to start cleaning up this mess and to find a standard solution that scales over time, don't you think?

Edit: Damien Alexandre shared on Twitter this nice summary with some possible simplifications if you are not too obsessive on this topic.