title: Mobile Favicons
body: <p>So I'm doing some research regarding mobile site user experience and stumbled upon the fact of the whole favicon.ico being completely outdated and all.</p>
  
  <p>Looking around I've gathered that I require various new sets of images/icons to actually present the "favicon" properly on various mobile devices like android, iphones and windows phones.</p>
  
  <p>Now the question here is, I've got the following code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-touch-icon-57x57.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-touch-icon-60x60.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-touch-icon-76x76.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-touch-icon-120x120.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-touch-icon-144x144.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-touch-icon-152x152.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon-180x180.png"&gt;
  &lt;link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png" sizes="32x32"&gt;
  &lt;link rel="icon" type="image/png" href="images/favicons/favicon-194x194.png" sizes="194x194"&gt;
  &lt;link rel="icon" type="image/png" href="images/favicons/favicon-96x96.png" sizes="96x96"&gt;
  &lt;link rel="icon" type="image/png" href="images/favicons/android-chrome-192x192.png" sizes="192x192"&gt;
  &lt;link rel="icon" type="image/png" href="images/favicons/favicon-16x16.png" sizes="16x16"&gt;
  &lt;link rel="manifest" href="images/favicons/manifest.json"&gt;
  &lt;meta name="apple-mobile-web-app-title" content="JoJo Productions"&gt;
  &lt;meta name="application-name" content="JoJo Productions"&gt;
  &lt;meta name="msapplication-TileColor" content="#00aba9"&gt;
  &lt;meta name="msapplication-TileImage" content="images/favicons/mstile-144x144.png"&gt;
  &lt;meta name="msapplication-config" content="images/favicons/browserconfig.xml"&gt;
  &lt;meta name="theme-color" content="#555555"&gt;
  &lt;link rel="shortcut icon" href="favicon.ico"&gt;
  </code></pre>
  
  <p>but for me this is just a too huge chunk of code to just show the favicon properly. So I was wondering what I would be able to remove and what I should definitely keep to present it properly on "most" mobile devices.</p>
  
  <p>Most other websites that make use of mobile favicons only use a handful of the above mentioned code, being the: 57x57, 72x72, 114x114 and the 144x144 this all being the apple-touch-icons. So are the images/code parts really that important for Iphone or other mobile users? Or is it possible to have it a bit more optimised?</p>
  
  <p>Either way thanks for the information.</p>
  
  <hr>
  
  <h2>Edit</h2>
  
  <p>So with some further research I've gotten to this result which seems to work okay on most modern devices:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;meta name="msapplication-config" content="images/favicons/browserconfig.xml"&gt;
  &lt;meta name="msapplication-TileImage" content="images/favicons/mstile-large.png"&gt;
  &lt;meta name="msapplication-TileColor" content="#ae8160"&gt;
  &lt;meta name="application-name" content="JoJo Productions"&gt;
  &lt;link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48" href="favicon.ico"&gt;
  &lt;link rel="icon" type="image/png" sizes="32x32" href="favicon.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"&gt;
  </code></pre>
  
  <p>Which is of course better for me as the amount of code/images has been decreased significantly. And as long as it works on most modern mobile devices I'm happy.</p>
  
  <p>With a combination of this <a href="https://github.com/audreyr/favicon-cheat-sheet" rel="noreferrer">"cheat sheet"</a>, <a href="https://scotch.io/tutorials/all-favicons-for-all-devices-and-sizes" rel="noreferrer">this tutorial</a>, and the help from Philippe B. I managed to get it to this.</p>
  
  <p>Either way thanks for all the help and hopefully in the coming years they'll make a proper standard for the favicon!</p>