title: Favicons - Best practices
body: <p><em>Updated question:</em></p>
  <p>What is considered best practise when creating favicons in 2022?</p>
  <hr />
  <p><em>This is the original question asked back in 2013:</em></p>
  <p>I'm trying to get my head around all these different sizes and formats that are needed for Favicons, Touch icons and now Tile icons too.</p>
  <p>I've read this post:
  <a href="http://www.jonathantneal.com/blog/understand-the-favicon" rel="nofollow noreferrer">http://www.jonathantneal.com/blog/understand-the-favicon</a>
  but I'm still a bit hazy on exactly what to use that will look reasonably good on all devices and browsers &gt;= IE8.</p>
  <p>I think I should create the following:</p>
  <p>ICO<br>
  favicon.ico (32x32)</p>
  <p>PNG<br>
  favicon.png (96x96)</p>
  <p>Tile Icon<br>
  tileicon.png (144x144)</p>
  <p>Apple Touch Icon<br>
  apple-touch-icon-precomposed.png (152x152)<br>based on this <a href="https://github.com/h5bp/html5-boilerplate/issues/1367" rel="nofollow noreferrer">https://github.com/h5bp/html5-boilerplate/issues/1367</a></p>
  <p>...and then use this code to serve 'em up?</p>
  <pre><code>&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;path/to/touchicon.png&quot;&gt;
  &lt;link rel=&quot;icon&quot; href=&quot;path/to/favicon.png&quot;&gt;
  &lt;!--[if IE]&gt;&lt;link rel=&quot;shortcut icon&quot; href=&quot;path/to/favicon.ico&quot;&gt;&lt;![endif]--&gt;
  &lt;!-- or, set /favicon.ico for IE10 win --&gt;
  &lt;meta name=&quot;msapplication-TileColor&quot; content=&quot;#D83434&quot;&gt;
  &lt;meta name=&quot;msapplication-TileImage&quot; content=&quot;path/to/tileicon.png&quot;&gt;
  </code></pre>
  <p>Am I missing anything?</p>
  <p>I'm not clear whether this will cover IE 10?</p>