270

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?

user784637
  • 15,392
  • 32
  • 93
  • 156
  • 1
    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 '22 at 08:21

7 Answers7

228

If you don't call the favicon, favicon.ico, you can use that tag to specify the actual path (incase you have it in an images/ directory). The browser/webpage looks for favicon.ico in the root directory by default.

Visakh B Sujathan
  • 229
  • 1
  • 4
  • 25
Nahydrin
  • 13,197
  • 12
  • 59
  • 101
154

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.

siburb
  • 4,880
  • 1
  • 25
  • 34
  • 13
    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 '13 at 02:55
  • 17
    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 '15 at 16:21
  • 4
    Curiously, [realFaviconGenerator](http://realfavicongenerator.net/faq/#why_ico_not_declared) recommends *not* declaring the favicon in the HTML head. – Dan Dascalescu Oct 05 '16 at 01:42
  • 13
    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 '17 at 08:01
  • 2
    @FabrícioMatté, you're right that there were no standards regarding `favicon.ico` in root. However, the draft for that was added [here](https://github.com/whatwg/html/commit/ffdb3400748a2969bd92e249afb83e023d139c86) on Feb 17, 2011. It was part of the original [W3C Invites Broad Review of HTML5](https://www.w3.org/2011/05/html5lc-pr.html.en) on May 15, 2011. HTML5 was eventually finalized on Oct 28, 2014. Also note that [How to Add a Favicon to your Site](https://www.w3.org/2005/10/howto-favicon) was a draft in 2005. Hence, putting `favicon.ico` in root is as good as `link rel="icon"`. – Daniel Le Jan 02 '21 at 05:00
  • The current specs regarding this is at https://html.spec.whatwg.org/#rel-icon. Note the "In the absence of a link with the icon keyword" paragraph. – Daniel Le Jan 02 '21 at 05:01
72

I use it for two reasons:

  1. 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" />

  2. In case I need to specify the path.

nilsi
  • 10,351
  • 10
  • 67
  • 79
16

Simply adding it to the root folder works after a fashion, but I've found that if I need to change the favicon, it can take days to update... even a cache refresh doesn't do the trick.

Nicole
  • 161
  • 1
  • 2
15

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/

user3907900
  • 151
  • 1
  • 2
1

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">
Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91
-1

use ctrl + shift del to clear your browser cache or in history

ubuntuisk
  • 1
  • 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](/help/how-to-answer). – Community Apr 05 '23 at 20:33