Menu
The WHATWG document for HTML5 says that the rel attribute must contain values that are space-separated, and then it gives a table of allowed values.
The attribute's value must be a set of space-separated tokens. The allowed keywords and their meanings...
The list of allowed keywords for the link element does not include shortcut, but it does include icon. So I'm looking at the all-too-well-known tag
<link rel="shortcut icon" href="/favicon.ico" />
and wondering if it is HTML5-compliant. Should I remove the keyword shortcut from this tag throughout my Website?
408
The rel attribute contains values that are space-separated. And according to MDN: The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.
A favicon (/ˈfæv. ɪˌkɒn/; short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.
A favicon is a graphic image (icon) associated with a particular Web page and/or Web site. Many recent user agents (such as graphical browsers and newsreaders) display them as a visual reminder of the Web site identity in the address bar or in tabs.
The favicon. ico file is a small graphic icon that is used by some browsers (including Microsoft Internet Explorer and Mozilla Firefox) to enhance the display of address bar information and "favorites" bookmark lists. When requesting a resource, these browsers also try to locate the site's custom favicon.
From the same WHATWG document:
For historical reasons, the icon keyword may be preceded by the keyword "shortcut". If the "shortcut" keyword is present, it must be come immediately before the icon keyword and the two keywords must be separated by only a single U+0020 SPACE character.
116
Update: According to this page https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.
Also, I don't see any references of shortcut in the W3Schools documentation, so I think it's better to leave it out. https://www.w3schools.com/tags/att_link_rel.asp
43
I have tested this code on Google Chrome, Mozilla Firefox, Internet explorer, and Microsoft Edge, and the only browser that didn't work was Edge. When add Favorite from a page made on harddrive ex c:\temp\test.html
<html>
<head>
<meta http-equiv="expires" content="0"><!-- Never caches the page -->
<link id="favicon" rel="shortcut icon" href="icon_32.ico">
</head>
<body>
...
</body>
</html>
Although it is still in its experimental stage (because HTML5 dev is ongoing), the w3.org HTML5 Markup Validator is a good online tool you can check out. I used it extensively about 6 months ago and it always gave back accurate HTML5 syntax reports.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
