title: multiple favicon sizes, How, Where and when to use them?
body: <p>I was reading an article(s):</p>
  
  <p><a href="http://www.creativebloq.com/illustrator/create-perfect-favicon-12112760" rel="nofollow noreferrer">Create a favicon for your site</a> and <a href="http://realfavicongenerator.net/faq#.U8P1ZpSSxug" rel="nofollow noreferrer">Why so many files?</a>.</p>
  
  <p>According to them, If you need to use an <code>favicon</code> for various purposes, you'll need to create different for each purpose(For tiles in WIN8, For speed dial in Opera &amp; Chrome).</p>
  
  <p>Okay That's fine, I still use an 16X16 <code>.ico</code> file which I think is suitable for optimization purposes.</p>
  
  <p>But now after reading those articles, I've various questions like(Assume that I've created various icons for various purposes using photoshop):</p>
  
  <p>-How to detect that which icon should be served to browser (how to detect that browser is asking <code>favicon</code> for showing it in address bar? or for to save as tile? or for a speed dial?)</p>
  
  <p>-How to serve that specific icon to browser without losing speed of connection because of large icon size?</p>
  
  <p>-what lines of (<code>html</code>)code should be added where in <code>html</code>(file) for the specified purpose?</p>
  
  <p>Currently for 16X16 icon I use: </p>
  
  <pre><code>&lt;link rel="icon" type="image/x-icon" href="favicon.ico"/&gt;
  &lt;link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/&gt;&lt;!-- IE8 --&gt;
  </code></pre>
  
  <p>-By Loading all the icons on <code>index.html</code> page, can a browser cache them all for all the subpages?(By placing all the icons in root directory of site?)</p>
  
  <p>-But again that will affect the performance of site by increasing the load time of <code>index</code> page itself.</p>
  
  <p>so, Is there anyway to detect for which purpose the favicon is needed and then to serve it dynamically(using <code>JavaScript</code> for example), without losing speed of page load? Also how to have a <code>favicon</code> for <code>chrome</code>s webstore?(ie, what lines of (<code>html</code>)code).</p>
  
  <p>Hope experts here will help me. Thanks in advance.</p>
  
  <p>PS:</p>
  
  <p>I've already read:</p>
  
  <ol>
  <li><p><a href="https://stackoverflow.com/questions/9150691/how-to-have-multiple-favicon-sizes-yet-serve-only-a-16x16-by-default">How to have multiple favicon sizes, yet serve only a 16x16 by default?</a> ,</p></li>
  <li><p><a href="https://stackoverflow.com/questions/120420/image-icon-beside-the-site-url">Image icon beside the site URL</a> ,</p></li>
  <li><p><a href="https://stackoverflow.com/questions/37073/what-is-currently-the-best-way-to-get-a-favicon-to-display-in-all-browsers-that-s">What is currently the best way to get a favicon to display in all browsers that support Favicons?</a> ,</p></li>
  <li><p><a href="https://stackoverflow.com/questions/6642/preferred-way-to-use-favicons">Preferred way to use favicons?</a> and</p></li>
  <li><p><a href="https://stackoverflow.com/questions/626371/how-can-i-add-a-picture-in-address-bar-of-the-browser-when-my-page-is-browsed">How can I add a picture in address bar of the browser when my page is browsed?</a> .</p></li>
  </ol>
  
  <p>But they were of very little or no use.</p>