html - Do you have to include <link rel="icon" href="favicon.ico" type="image/x-icon" />?

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I didn't include the following line of code in my head tag, however my favicon still appears in my browser:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
What's the purpose of including it?
                You should do href="/favicon.ico" instead of href="favicon.ico", otherwise HTML files that aren't in the same directory as your favicon won't have a favicon.
– Boris Verkhovskiy
                Nov 18, 2022 at 8:21
You should in fact do both, so that all browsers will find the icon.
Naming the file "favicon.ico" and putting it in the root of your website is the method "discouraged" by W3C:
  Method 2 (Discouraged): Putting the favicon at a predefined URI

  A second method for specifying a favicon relies on using a predefined URI to identify the image: "/favicon", which is relative to the server root. This method works because some browsers have been programmed to look for favicons using that URI.

  W3C - How to add a favicon to your site
So, to cover all situations, I always do that in addition to the recommended method of adding a "rel" attribute and pointing it to the same .ico file.
                Yes, this is a more correct answer. There are no standards related to simply putting a favicon.ico in the root, but most browsers will request said file automatically for historical reasons.
– Fabrício Matté
                Mar 18, 2013 at 2:55
                The proper reason for doing this is not because it works in some situations, but because the better method doesn't work in some situations
– Jasper
                Feb 12, 2015 at 16:21
                Internet Explorer invented the favicon and looked for it in the root. AFAIK, all browsers do this. This is why I recommend putting a favicon.ico in the root, because otherwise it will return 404 and most systems don't cache that... so it keeps requesting it. Put an icon there and it will be cached properly.
– Stijn de Witt
                Jul 31, 2017 at 8:01
                @FabrícioMatté, you're right that there were no standards regarding favicon.ico in root. However, the draft for that was added here on Feb 17, 2011. It was part of the original W3C Invites Broad Review of HTML5 on May 15, 2011. HTML5 was eventually finalized on Oct 28, 2014.  Also note that How to Add a Favicon to your Site was a draft in 2005.  Hence, putting favicon.ico in root is as good as link rel="icon".
– Daniel Le
                Jan 2, 2021 at 5:00
I can force a refresh of the icon by adding a query parameter for example ?v=2. like this:
<link rel="icon" href="/favicon.ico?v=2" type="image/x-icon" />
In case I need to specify the path.
Many people set their cookie path to /. That will cause every favicon request to send a copy of the sites cookies, at least in chrome. Addressing your favicon to your cookieless domain should correct this.
<link rel="icon" href="https://cookieless.MySite.com/favicon.ico" type="image/x-icon" />
Depending on how much traffic you get, this may be the most practical reason for adding the link. 
Info on setting up a cookieless domain:
http://www.ravelrumba.com/blog/static-cookieless-domain/
You do not need a 16x16 "favicon.ico" whatsoever. Use the HTML <link> element(s) nested in your <head> element. Web browsers will utilize very small images but the image sizes that Google requires and supports for displaying them in search results are multiples of 48 pixels.
Your favicon must be a multiple of 48px square, for example: 48x48px,
96x96px, 144x144px and so on. SVG files don't have a specific size.
Any valid favicon
format
is supported.
As an aside, and sort of unrelated point, In terms of displaying a logo in search results from structured data, they want an image of at least 112px.
So, something like below is what I use for favicons:
<link rel="icon" type="image/png" href="../media/favicon-336x336.png" sizes="336x336">
<link rel="icon" type="image/png" href="../media/favicon-288x288.png" sizes="288x288">
<link rel="icon" type="image/png" href="../media/favicon-240x240.png" sizes="240x240">
<link rel="icon" type="image/png" href="../media/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="../media/favicon-144x144.png" sizes="144x144">
<link rel="icon" type="image/png" href="../media/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="../media/favicon-48x48.png" sizes="48x48">
                As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
– Community
                Apr 5 at 20:33
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.