Does favicon.ico need to reside in that same directory of index.html?

Question

I am already using the standard way of adding a favicon:

<link rel="icon" type="image/gif" href="/graphics_card/favicon.gif">
<link rel="shortcut icon" href="/graphics_card/favicon.ico">

so the favicon.gif and .ico are both supposed to reside on

/graphics_card

However, I found that IE 8 (or maybe other IE) cannot show it, (update: no matter how many times I pressed CTRL-F5, or clear the browser cache), but as soon as the .ico file is present in that directory where the index.html is, then it will show.

So if it is

http://www.example.com/graphics_card/nvidia/index.html

there needs to be a favicon.ico in

/graphics_card/nvidia/

too. I ended up specifying it as

<link rel="icon" type="image/gif" href="/graphics_card/favicon.gif">
<link rel="shortcut icon" href="favicon.ico">

and just put a favicon.ico in that directory. Is this the standard way?

Answer 1

No, you can put it anywhere if you specify it in the tag. However, for IE, you need to give a fully qualified URL (i.e. not a relative url).

Answer 2

You can put it anywhere else and use the <link> tag to refer to it. e.g.

<link rel='shortcut icon' href='/images/favicon.ico' type='image/x-icon' />

However it is good practice to put it on the domain root e.g. http://example.com/favicon.ico, because modern browsers will actually do a call to that file when loading pages to load the icon first.