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 ofevalcan 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,
iconis not an HTML4linktype either, but it is very much used/useful.shortcutis 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
profileattribute of theHEADelement. Therelattribute inlinkelements accepts multiple space-separatedlinktypes as specified by W3C.Sander wrote on :
Diego:
iconis defined in HTML5, though.Mathias: “Considered Harmful” Essays Considered Harmful.
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,
shortcutcan 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
shortcutvalue for therelattribute in HTML5 isbookmark. But I am surebookmark iconwill 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.Marcel wrote on :
Mathias: Yes, of course the underlining gives me a clue, but you shouldn't make me think. ;)