Mathias Bynens

rel="shortcut icon" considered harmful

Most sites use the following HTML to specify a favicon:

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

Looks okay, right? Guess what — it isn’t!

Today, I learned that shortcut is not a valid link relation. Indeed, it doesn’t show up in section 4.12.3 of the HTML5 specification on ‘link types’. It is, in fact, proprietary to Internet Explorer. Without IE, rel="icon" would suffice to specify a favicon.

So, we have to use the shortcut relation to support IE?

Not at all.

If the shortcut value is omitted from the rel attribute, Internet Explorer ignores the declaration entirely, searches for a file called favicon.ico in the site root, and uses that instead. In fact, almost every browser does that when there’s no link rel="icon" specified. Using rel="icon shortcut" won’t work in IE either, since it doesn’t treat the rel attribute as a space-separated list.

Just make sure to always put the favicon in the root directory of your site, and name it favicon.ico. This way, Internet Explorer will detect it, regardless of whether you’re specifying it in a link element or not. And if you omit the entire link rel="icon" declaration, other browsers will go looking for that file as well. Not having a favicon.ico file in your root will cause a lot of 404 errors.

Almost all modern browsers look up /favicon.ico by default: Opera, Safari, Chrome, Firefox, Internet Explorer 5+. The only browser that currently doesn’t do this is SeaMonkey.

This means you can omit the link declaration for the favicon from your HTML entirely, if you want. The only downside is that the favicon will only be shown once the entire document has finished loading. In comparison: if you’re specifying it explicitly, the favicon is loaded as soon as the browsers parses the link rel="icon" declaration.

If you want your favicon to load as soon as possible and/or if you insist on displaying it in SeaMonkey, you can simply use this code:

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

Thanks to Anne and Sander from the #whatwg IRC channel for taking the time to explain this to me.

Comments

Marcel wrote on :

Ok, nice to know. But isn't the title a little bit exaggerated? What do you mean by considering rel="shortcut icon" harmful? Harmful in the sense that an inproper use of eval can be harmful?

BTW, why do you disable the underlining of links on mouseover? It's confusing ("this was a link, wasn't it?").

Mathias wrote on :

Marcel: The title might be a bit exaggerated — using rel="shortcut icon" doesn’t really do any harm, but then again most of the time it doesn’t do any good either. Oh well, I just needed something that sounds good :)

As for the underlining of links, is it really that confusing? Can’t you tell it’s a link by the pointer cursor?

Diego Perini wrote on :

Mathias, icon is not an HTML4 link type either, but it is very much used/useful. shortcut is not harmful and is very useful in IE for a different scope than the URL bar graphics, see the W3C home page.

I don’t want all my pages have the same favorite icon and I believe others may have the same requirements.

If needed one can define new link types using the profile attribute of the HEAD element. The rel attribute in link elements accepts multiple space-separated link types as specified by W3C.

Mathias wrote on :

Diego: (To continue our discussion on Twitter…) Sure, if you want to use more than one favicon on the same domain, and get that working properly in IE, you’ll have to stick with rel="shortcut".

My point is that for most sites, this isn’t the case — and in these cases, shortcut can and should be omitted IMHO. I understand it’s still a necessity in cases where you really need distinct icons per document, but most of the time it’s not really needed.

Sander: I consider the “Considered Harmful” Essays Considered Harmful essay to be harmful.

Diego Perini wrote on :

Mathias: I understand that for most sites this isn’t the case, but for the rest it is. Though understand that for sites having only one same ‘root’ directory for several different sites this will not allow for different ‘icons’ for each of the sites hosted there. All my clients sites share the same ‘root’ directory thus the same root favicon. I am not saying IE method to do it is the correct one, however I need to follow how these browsers work to make the ‘thing’ equally usable to all visiting browsers.

The equivalent shortcut value for the rel attribute in HTML5 is bookmark. But I am sure bookmark icon will not work in any browser. So we need IE to catch up and allow for full path to icon resources, as all other browsers already understand that.

Leave a comment

Comment on “rel="shortcut icon" considered harmful”

Some Markdown is allowed; HTML isn’t. Keyboard shortcuts are available.

It’s possible to add emphasis to text:

_Emphasize_ some terms. Perhaps you’d rather use **strong emphasis** instead?

Select some text and press ⌘ + I on Mac or Ctrl + I on Windows to make it italic. For bold text, use ⌘ + B or Ctrl + B.

To create links:

Here’s an inline link to [Google](http://www.google.com/).

If the link itself is not descriptive enough to tell users where they’re going, you might want to create a link with a title attribute, which will show up on hover:

Here’s a [poorly-named link](http://www.google.com/ "Google").

Use backticks (`) to create an inline <code> span:

In HTML, the `p` element represents a paragraph.

Select some inline text and press ⌘ + K on Mac or Ctrl + K on Windows to make it a <code> span.

Indent four spaces to create an escaped <pre><code> block:

    printf("goodbye world!");  /* his suicide note
                                  was in C */

Select a block of text (more than one line) and press ⌘ + K on Mac or Ctrl + K on Windows to make it a preformatted <code> block.

Quoting text can be done as follows:

> Lorem iPad dolor sit amet, consectetur Apple adipisicing elit,
> sed do eiusmod incididunt ut labore et dolore magna aliqua Shenzhen.
> Ut enim ad minim veniam, quis nostrud no multi-tasking ullamco laboris
> nisi ut aliquip iPad ex ea commodo consequat.

Select a block of text and press ⌘ + E on Mac or Ctrl + E on Windows to make it a <blockquote>.