1603885 - allow media="" to affect <link rel=icon>

Status: NEW

(Core :: DOM: Core & HTML, enhancement, P3)

Description

[Cameron McCormack (:heycam)]

Per the HTML spec, the media attribute on a <link> element must apply for any link type that is an external resource reference, which includes rel=icon.

Some authors are working around lack of this support by watching for media feature changes in script: https://dev.to/rumkin/smart-web-design-part-i-light-dark-mode-favicon-31f0

Comment 1

[Šime Vidas]

It seems that the media attribute already affects favicon <link> elements in Firefox today, at least on macOS where I’ve tested this.

Test page: https://media-link.glitch.me/

<link rel="icon" href="https://via.placeholder.com/144/ff0000">
<link rel="icon" media="(prefers-color-scheme: dark)" href="https://via.placeholder.com/144/000000">
<link rel="icon" media="(prefers-color-scheme: light)" href="https://via.placeholder.com/144/ffffff">

Notice how the favicon is always white in Firefox, regardless of the operating system’s color scheme. If Firefox doesn’t read the media attribute, the favicon should be red, like it is in Safari. This looks like a bug.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

(In reply to Šime Vidas from comment #1)

It seems that the media attribute already affects favicon <link> elements in Firefox today, at least on macOS where I’ve tested this.

Test page: https://media-link.glitch.me/

<link rel="icon" href="https://via.placeholder.com/144/ff0000">
<link rel="icon" media="(prefers-color-scheme: dark)" href="https://via.placeholder.com/144/000000">
<link rel="icon" media="(prefers-color-scheme: light)" href="https://via.placeholder.com/144/ffffff">

Notice how the favicon is always white in Firefox, regardless of the operating system’s color scheme. If Firefox doesn’t read the media attribute, the favicon should be red, like it is in Safari. This looks like a bug.

Yeah, however this is not a great pattern, see bug 1790109 comment 5. The prefers-color-scheme might not match the browser's color-scheme