<p>What is currently the best way to get a favicon to display in all browsers that currently support it?</p>

<p>Please include:</p>

<ol>
<li><p>Which image formats are supported by which browsers.</p></li>
<li><p>Which lines are needed in what places for the various browsers.</p></li>
</ol>

[{'answer_id': 37076, 'author': 'Ross', 'author_id': 2025, 'author_profile': 'https://Stackoverflow.com/users/2025', 'pm_score': 2, 'selected': False, 'text': '<p>Having a <code>favicon.*</code> in your root directory is automatically detected by most browsers. You can ensure it\'s detected by using:</p>\n\n<pre><code> &lt;link rel="icon" type="image/png" href="/path/image.png" /&gt;\n</code></pre>\n\n<p>Personally I use .png images but most formats should work.</p>\n'}, {'answer_id': 37078, 'author': 'Paul Tomblin', 'author_id': 3333, 'author_profile': 'https://Stackoverflow.com/users/3333', 'pm_score': 3, 'selected': False, 'text': '<p><a href="http://en.wikipedia.org/wiki/Favicon" rel="noreferrer">Wikipedia to the rescue</a></p>\n'}, {'answer_id': 37091, 'author': 'John Topley', 'author_id': 1450, 'author_profile': 'https://Stackoverflow.com/users/1450', 'pm_score': 3, 'selected': False, 'text': '<p>I use .ico format and put the following two lines within the <code>&lt;head&gt;</code> element:</p>\n\n<pre><code>&lt;link rel="icon" href="/favicon.ico" type="image/x-icon" /&gt;\n&lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /&gt;\n</code></pre>\n'}, {'answer_id': 37114, 'author': 'Antti Kissaniemi', 'author_id': 2948, 'author_profile': 'https://Stackoverflow.com/users/2948', 'pm_score': 2, 'selected': False, 'text': '<p>Favicon must be an <a href="http://en.wikipedia.org/wiki/ICO_%28icon_image_file_format%29" rel="nofollow noreferrer">.ico file</a> to work properly on all browsers.</p>\n\n<p>Modern browsers also support PNG and GIF images.</p>\n\n<p>I\'ve found that in general the easiest way to create one is to use a freely available web service such as <a href="http://favicon.cc/" rel="nofollow noreferrer">favicon.cc</a>.</p>\n'}, {'answer_id': 37236, 'author': 'nimish', 'author_id': 3926, 'author_profile': 'https://Stackoverflow.com/users/3926', 'pm_score': 2, 'selected': False, 'text': '<p>IE6 cannot handle PNGs correctly, be warned.</p>\n'}, {'answer_id': 37321, 'author': 'Brian Matthews', 'author_id': 1969, 'author_profile': 'https://Stackoverflow.com/users/1969', 'pm_score': 8, 'selected': True, 'text': '<p>I go for a belt and braces approach here. </p>\n\n<p>I create a 32x32 icon in both the <code>.ico</code> and <code>.png</code> formats called <code>favicon.ico</code> and <code>favicon.png</code>. The icon name doesn\'t really matter unless you are dealing with older browsers.</p>\n\n<ol>\n<li>Place <code>favicon.ico</code> at your site root to support the older browsers (optional and only relevant for older browsers.</li>\n<li>Place favicon.png in my images sub-directory (just to keep things tidy).</li>\n<li>Add the following HTML inside the <code>&lt;head&gt;</code> element.</li>\n</ol>\n\n<pre>&lt;link rel="icon" href="/images/favicon.png" type="image/png" /&gt;\n&lt;link rel="shortcut icon" href="/favicon.ico" /&gt;</pre>\n\n<p>Please note that:</p>\n\n<ul>\n<li>The MIME type for <code>.ico</code> files was registered as image/vnd.microsoft.icon by the <a href="http://www.iana.org" rel="noreferrer"><strong>IANA</strong></a>. </li>\n<li>Internet Explorer will ignore the <code>type</code> attribute for the shortcut icon relationship and this is the only browser to support this relationship, it doesn\'t need to be supplied.</li>\n</ul>\n\n<p><a href="http://www.jonathantneal.com/blog/understand-the-favicon/" rel="noreferrer"><strong>Reference</strong></a></p>\n'}, {'answer_id': 495967, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>There is also a site where you can check how the favicon of any page is made</p>\n\n<p><a href="http://www.getfavicon.org" rel="nofollow noreferrer">getfavicon.org</a></p>\n\n<p>There you can see a tutorial about making favicons, image types and resolutions, it\'s nice!</p>\n'}, {'answer_id': 15543670, 'author': 'Willem de Wit', 'author_id': 1474739, 'author_profile': 'https://Stackoverflow.com/users/1474739', 'pm_score': 3, 'selected': False, 'text': '<p>To also support touch icons for tablets and smartphones I prefer the approach of <a href="https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/html.md#favicons-and-touch-icon" rel="nofollow">HTML5Boilerplate</a></p>\n\n<p>More information on touch icons can be found in <a href="http://mathiasbynens.be/notes/touch-icons" rel="nofollow">this article</a>.</p>\n\n<p>With the current status of browser-support you don\'t even have to add the HTML tag for the favicon in your document. The browsers will search automaticly a list of files, see this example for iOS:</p>\n\n<blockquote>\n  <p>If no icons are specified in the HTML, iOS Safari will search the\n  website’s root directory for icons with the apple-touch-icon or\n  apple-touch-icon-precomposed prefix. For example, if the appropriate\n  icon size for the device is 57 × 57 pixels, iOS searches for filenames\n  in the following order:</p>\n  \n  <ol>\n  <li>apple-touch-icon-57x57-precomposed.png</li>\n  <li>apple-touch-icon-57x57.png</li>\n  <li>apple-touch-icon-precomposed.png</li>\n  <li>apple-touch-icon.png</li>\n  </ol>\n</blockquote>\n\n<p>My advise is to not include a favicon in your document, but have a list of files ready in the root website:</p>\n\n<ul>\n<li>apple-touch-icon-114x114-precomposed.png</li>\n<li>apple-touch-icon-144x144-precomposed.png</li>\n<li>apple-touch-icon-57x57-precomposed.png</li>\n<li>apple-touch-icon-72x72-precomposed.png</li>\n<li>apple-touch-icon-precomposed.png</li>\n<li>apple-touch-icon.png <code>(57px*57px)</code></li>\n<li>favicon.ico <code>HiDPI (32x32px)</code></li>\n</ul>\n\n<p>When you download a template from <a href="http://html5boilerplate.com/" rel="nofollow">html5boilerplate.com</a> these are all included, you just have to replace them with your own icons.</p>\n'}, {'answer_id': 58478482, 'author': 'npfoss', 'author_id': 7343159, 'author_profile': 'https://Stackoverflow.com/users/7343159', 'pm_score': 1, 'selected': False, 'text': '<p>The answer to this question has become <a href="https://stackoverflow.com/a/48969053/7343159">complicated enough</a> that the best way is to just use a tool like RealFaviconGenerator, which lets you upload a png/jpg and then generates favicons and code to cover all the platforms for you: <a href="https://realfavicongenerator.net/" rel="nofollow noreferrer">https://realfavicongenerator.net/</a></p>\n'}]
['https://Stackoverflow.com/questions/37073', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/177/']