11

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?

|improve this question

migrated from stackoverflow.com Jun 23 '11 at 10:38

This question came from our site for professional and enthusiast programmers.

  • 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? – T.J. Crowder Jun 23 '11 at 8:57
5

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

Shortcut isn't valid HTML, just for IE

|improve this answer
  • Also useful: msdn.microsoft.com/en-us/library/ms537656(v=vs.85).aspx – T.J. Crowder Jun 23 '11 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 – Marco Demaio Jun 23 '11 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.

|improve this answer
  • 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...) – T.J. Crowder Jun 23 '11 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.

|improve this answer
  • 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' Jun 23 '11 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.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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