12

A site I'm looking at has the following 2 links to its favicon:

<link rel="shortcut icon" type="image/ico" href="/_assets960/media/favicon.ico" />

<link rel="icon" href="/favIcon.ico"/>

Question: Is there a good reason why you would specify the icon twice in these two slightly-different ways?

1
  • 4
    I'm not seeing the reason for the close-votes. Perhaps the phrasing isn't perfect, but it's a reasonable question: Is there a good reason why you would specify the icon twice in these two slightly-different ways? Commented Jun 23, 2011 at 8:57

4 Answers 4

5

Like all things wonderful on the web, it looks like IE is the cause:

Shortcut isn't valid HTML, just for IE

2
  • Also useful: msdn.microsoft.com/en-us/library/ms537656(v=vs.85).aspx Commented Jun 23, 2011 at 9:08
  • This is NOT true! The <link rel="shortcut icon"... validates for HTML4.01, use the W3C validator to check this if you don'trust. Moreover HTML5 spec are still under development so we don't know yet if it will be included or not. This StackExchange website uses <link rel="shortcut icon"... too Commented Jun 23, 2011 at 15:33
3

The reason is compatibility with Internet Explorer. rel="icon" is the way it is done in HTML5 or any other browser than IE.

1
  • Good link. According to the link, just the first one would work. (Perhaps they explicitly want to send compatible browsers the first one, and perhaps there is no /favIcon.ico at all...) Commented Jun 23, 2011 at 9:16
0

Really both lines are unneeded. You just need to put a favicon.ico file in your root directory and you should be fine. You can include code like the above to allow for the favicon to load before the page finishes loading but that is unimportant. It looks like the code in question above was created out of confusion.

1
  • 1
    Well, largely unnecessary. That's default behavior. But the link can be used to override that and indicate a specific icon. This can be used to have different pages/sections/whatever of site use different icons. It's uncommon, but a valid use case.
    – Su'
    Commented Jun 23, 2011 at 16:18
0

The line below works in all browsers:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

And it it's the only line used also by StackExchange sites (see in this page source code)

<link rel="shortcut icon" href="http://cdn.sstatic.net/webmasters/img/favicon.ico">

NOTE: the full http path of the favicon is necessary to show icon in IE, in all other browsers you don't need the full http path.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.