<p>I was trying to add a favicon to a website earlier and looked for a better way to implement this than to dump a <code>favicon.ico</code> file in the root of the website.</p>

<p>I found this nice little guide: <a href="http://www.w3.org/2005/10/howto-favicon" rel="noreferrer">How to Add a Favicon</a>. However, the preferred method did not work in IE (7) and the second method is the old fashioned way (which I resigned myself to use).</p>

<p>Is there a third method that works across all the most popular browsers?</p>

[{'answer_id': 6643, 'author': 'Brandon Wood', 'author_id': 423, 'author_profile': 'https://Stackoverflow.com/users/423', 'pm_score': 0, 'selected': False, 'text': '<p>This is how they\'re doing it right here on Stack Overflow:</p>\n\n<pre><code>&lt;link rel="shortcut icon" href="/favicon.ico" /&gt;\n</code></pre>\n'}, {'answer_id': 6644, 'author': 'mbillard', 'author_id': 810, 'author_profile': 'https://Stackoverflow.com/users/810', 'pm_score': 0, 'selected': False, 'text': "<p>Well, the file is in the root so it does not show whether the tag works or if the browser just got the icon from the usual location (the root).</p>\n\n<p><strong>Edit:</strong> I'll try it and see if it works.</p>\n\n<p><strong>Edit 2:</strong> Using both tags make it work even for any file name as long as the file is an icon for IE7: I tried using <strong><code>.png</code></strong> files and it only worked with Firefox.</p>\n"}, {'answer_id': 6645, 'author': 'Stan', 'author_id': 464, 'author_profile': 'https://Stackoverflow.com/users/464', 'pm_score': 5, 'selected': True, 'text': '<p>This is what I always use:  </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\n<p>The second one is for IE. The first one is for other browsers.</p>\n'}, {'answer_id': 6693, 'author': 'GateKiller', 'author_id': 383, 'author_profile': 'https://Stackoverflow.com/users/383', 'pm_score': 1, 'selected': False, 'text': "<p>I think the most reliable method is the simply added the <strong>favicon.ico</strong> file to the root of your website.</p>\n\n<p>I don't think there is any need for a meta tag unless you want to manually override the default favicon, but I was unable to find any research to support my argument.</p>\n"}, {'answer_id': 6949, 'author': 'Akira', 'author_id': 795, 'author_profile': 'https://Stackoverflow.com/users/795', 'pm_score': 2, 'selected': False, 'text': '<p>You can use HTML to specify the favicon, but that will only work on pages that have this HTML.  A better way to do this is by adding the following to your httpd.conf (Apache):</p>\n\n<pre><code>AddType image/x-icon .ico\n</code></pre>\n'}, {'answer_id': 58460513, 'author': 'npfoss', 'author_id': 7343159, 'author_profile': 'https://Stackoverflow.com/users/7343159', 'pm_score': 0, 'selected': False, 'text': '<p>There are a million different ways these icons are used (different browsers, different platforms, mobile site-pinning, smart TVs, etc, etc), so there\'s really no longer a simple answer. For a great explanation see <a href="https://stackoverflow.com/a/48969053/7343159">this S.O. answer</a>, but the short answer is:</p>\n\n<p>Use this site which lets you upload a png/jpg and then does all the hard work for you: <a href="https://realfavicongenerator.net/" rel="nofollow noreferrer">https://realfavicongenerator.net/</a></p>\n'}]
['https://Stackoverflow.com/questions/6642', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/810/']