What The Favicons…

PUBLISHED ON DEC 27, 2016 — RANT

I finaly decided to put the correct favicon for my blog… Back in my days we had only favicon.ico and we were fine with the 16x16 resolution. Nevertheless, screens got better so I fully understand that we need more options in order to accomodate for higher resolutions. However, the favicon mess is the epitome of why we can’t have nice^H^H simple things…

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/[…]-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

Example image

What… The… Fuck… Seriously… I used favicon generator so the actual process was fairly easy, but come-on… I mean… can’t we just agree on a single multi-format favicon instead of having each and every browser asking for its own spec?

… to make things worse, Safari still isn’t happy about the apple-touch-icon options…

TAGS: FAVICON, RANT