107

When and how do browsers request the favicon.ico file? Do they always check for it in root, or do they read the content of the webpage first to see if the page specifies the location?

I have my favicon.ico path in /images There is the following tag in each of my pages:

<link rel="shortcut icon" href="images/favicon.ico">

When I load the page in my browser, it seems to work (I can see the file), but I don't know whether they are making bad requests to my root folder first (where the file doesn't exist), and are later making a request to the link.

I want to minimze 404's and wasted bandwidth, by the browser making incorrect calls to my site.

EDIT: I'm looking for some insight into how browsers work, and request this file, so my site structure is efficient.

Rahul Iyer
  • 19,924
  • 21
  • 96
  • 190
  • @duskwuff gives great advice. browsers look for favicon in root by default, just to let you know. – albert Jan 26 '14 at 23:50

1 Answers1

126

Remember that not all requests to your site are for HTML pages! Requests for non-HTML content, like bare image files (e.g, viewing http://example.com/image.jpeg directly in the browser), cannot see a <link> tag. Therefore, they must fall back to searching for the shortcut icon in the standard location at /favicon.ico.

This still doesn't mean that this needs to be the canonical location, though! You can still keep it in /images/favicon.ico if you want - just make sure that a redirect is in place from /favicon.ico to wherever your preferred location is.

  • So are you saying that a browser will first look in the root location of the site, and then look at the tags, or vice versa or neither ? – Rahul Iyer Jan 27 '14 at 03:11
  • 21
    The browser will look at `` tags first. But if the user is looking at something that isn't an HTML page at all, like an image file or a PDF, there's no `` tag to consult, so it falls back to the fixed path. –  Jan 27 '14 at 04:15
  • Great answer... This helped me too: https://perishablepress.com/block-favicon-url-404-requests/ – Lindsey D Jun 04 '15 at 22:33
  • 1
    Bottom line. save wherever you want, just make sure that the request to /favicon.ico from the root works. Great answer! – Angel S. Moreno Jul 18 '15 at 05:31
  • @AngelS.Moreno,duskwuff Do you have a use case in mind where a user might directly request for this resource ? Apparently there is a vulnerability if the websites put this icon on their root path. Any attacker can find if a user is logged-in or not to this website, details here: https://robinlinus.github.io/socialmedia-leak/ – aka_007 Oct 13 '16 at 09:49
  • @aka_007 Read my answer: browsers will request favicon.ico when displaying non-HTML content. The presence of the favicon is not itself a vulnerability; any image file on the site can be used to trigger that type of login redirection. –  Oct 13 '16 at 16:08
  • @duskwuff agreed. I guess this is one of the reasons why website host their resources on CDN. They should also host favicon.ico in a CDN. I wanted to know if there is any security vulnerability in doing so. – aka_007 Oct 13 '16 at 21:05
  • 9
    I have a copy of my favicon.ico in my root directory, and a path images/favicon-24-24.png or something like that in my links for various platforms. This seems to cover all cases. Check your favicon here (great tool, not by me : ) http://realfavicongenerator.net/favicon_checker – Costa Michailidis Mar 29 '17 at 18:09