Honor media HTML attribute for link icon

Category: DOM
Type: New or changed feature
Status: Enabled by default (Chrome 91)
Intent stage: Shipped

Breaking change: No
Enterprise impact: None
Spec maturity: Published standard
Web Platform Tests: No

WPT details: A test suite is currently impossible due to the lack of an API to query favicons. It is tested for Chromium using the internals API.

Summary

The link element’s “media” attribute will be honored for link[rel="icon"] so that web developers can define multiple equally appropriate icons based on a media query (dark and light modes for instance). The last one that matches will be picked. Browsers don’t currently honor the media attribute for link[rel="icon"] even though the HTML specification says they should.

Motivation

This is a known and acknowledged bug in Chrome.

Standards & signals

Specification: https://html.spec.whatwg.org/#rel-icon
Firefox: Closed Without a Position
Safari: No signal
Web developers: Positive
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=970159

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=honor-media-html-attribute-for-link-icon
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Honor%20media%20HTML%20attribute%20for%20link%20icon
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Honor%20media%20HTML%20attribute%20for%20link%20icon
Baseline status: https://webstatus.dev/?q=Honor%20media%20HTML%20attribute%20for%20link%20icon

Samples: https://media-link.glitch.me/

View on chromestatus.com