title: Better place to store your favicon files?
body: <p>1) I've just done my first favicon files using  <a href="http://realfavicongenerator.net/" rel="nofollow noreferrer">Real Favicon generator</a>. In the faq of that website it says that it is the very best practice to keep the favicons in the root of the website. I did it but now the root folder has 26 new files!!! 
  <br>What I will lose if I move the favicon files to a sub-folder? <code>Ex: /favicon/favicon.ico</code></p>
  
  <p>2) I've noticed that different websites use different methods in terms of favicon code. <br>Bootstrap, for instance has just these lines of code: </p>
  
  <pre><code>&lt;link rel=apple-touch-icon href=/apple-touch-icon.png&gt;
  
  &lt;link rel=icon href=/favicon.ico&gt;
  </code></pre>
  
  <p>Others have plenty of favicons like Wordpress.com:</p>
  
  <pre><code>&lt;link rel="shortcut icon" type="image/vnd.microsoft.icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32"&gt;
  
  &lt;link rel="shortcut icon" type="image/x-icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32"&gt;
  
  &lt;link rel="icon" type="image/x-icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32"&gt;
  
  &lt;link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/favicon-64x64.png" sizes="64x64"&gt;
  
  &lt;link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/favicon-96x96.png" sizes="96x96"&gt;
  
  &lt;link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/android-chrome-192x192.png" sizes="192x192"&gt;
  
  &lt;link rel="apple-touch-icon" sizes="57x57" href="//s1.wp.com/i/favicons/apple-touch-icon-57x57.png"&gt;&lt;link rel="apple-touch-icon" sizes="60x60" href="//s1.wp.com/i/favicons/apple-touch-icon-60x60.png"&gt;
  
  &lt;link rel="apple-touch-icon" sizes="72x72" href="//s1.wp.com/i/favicons/apple-touch-icon-72x72.png"&gt;&lt;link rel="apple-touch-icon" sizes="76x76" href="//s1.wp.com/i/favicons/apple-touch-icon-76x76.png"&gt;
  
  &lt;link rel="apple-touch-icon" sizes="114x114" href="//s1.wp.com/i/favicons/apple-touch-icon-114x114.png"&gt;
  
  &lt;link rel="apple-touch-icon" sizes="120x120" href="//s1.wp.com/i/favicons/apple-touch-icon-120x120.png"&gt;
  
  &lt;link rel="apple-touch-icon" sizes="144x144" href="//s1.wp.com/i/favicons/apple-touch-icon-144x144.png"&gt;
  
  &lt;link rel="apple-touch-icon" sizes="152x152" href="//s1.wp.com/i/favicons/apple-touch-icon-152x152.png"&gt;
  
  &lt;link rel="apple-touch-icon" sizes="180x180" href="//s1.wp.com/i/favicons/apple-touch-icon-180x180.png"&gt; 
  </code></pre>
  
  <p>For a simple website that does not want more than appear in all browsers do I really should use all the files of the second example - WordPress (and that were provided by the favicon generator), or will I get satisfied with the minimal Bootstrap approach?</p>