On the shortcut value in a favicon link element
MDN said to avoid it. I looked for why.
MDN advises web authors to “not use (the shortcut link type) anymore”.
To set up a favicon for a webpage, I used a link element. The link element is used to tell the browser where to find the file for the favicon.
The appropriate value for
rel is “icon”, like:
rel (relationship) attribute describes how the resource being linked is related to the current document.
When the relationship is as an “icon” for a page, the browser knows to use the
sizes attributes to select the most appropriate icon.
I also have examples of a link element like this:
<link rel='shortcut icon'>
Use of the “shortcut” value preceeding “icon” was proprietary to Internet Explorer. While it’s still supported for “historical reasons”, it’s definitely not necessary. MDN specifically recommends not using it anymore.
All modern browsers look for a
favicon.ico file at the root of a site. When a
<link> with a
rel value of
icon is not specified, that is the behaviour to which they fall back. Here are a few sites that make use of this behaviour.
I didn’t really need to use
<link> after all 🤷🏽♀️
Explicitly declaring the favicon does make one difference. When declaring the favicon, the browser loads the favicon when it parses the
<link>. When not specified, the browser shows the favicon only when the entire document has finished loading. This is useful if I want it to defer loading the favicon until after it has loaded the document and other assets.
🎹 Here’s a link to one of my favourite piece of music, to reward you for your patient reading: Contact, by Daft Punk.
💬 Thanks for reading all the way through! Let me know what you think. You can (at)me on Mastodon or Twitter.