<link rel="icon"> with media

[cawa-93]

Good day. My question: Is it allowed to use a media attribute with <link rel="icon"> like it is allowed to <link rel="stylesheet">? I could not find any information on whether this is allowed or not.

I tried customizing the icon depending on the browser theme:

    <link
      rel="icon"
      href="https://fakeimg.pl/128x128/000000/"
      media="(prefers-color-scheme: dark)"
      type="image/png"
    />

    <link
      rel="icon"
      href="https://fakeimg.pl/128x128/ffffff/"
      media="(prefers-color-scheme: light)"
      type="image/png"
    />

But in Firefox and Edge, the last icon is always taken, not the one that corresponds to the theme. And I can't understand:
The combination of rel="icon" and the media is not allowed by the standard, or standard allowed but browsers do not handle this scenario?

[Stivvv18]

Plzz Run the programming using another browser and check whether it works or not

…

On Mon, Feb 22, 2021, 9:41 PM Alex Kozack ***@***.***> wrote: Good day. My question: Is it allowed to use a media attribute with <link rel="icon"> like it is allowed to <link rel="stylesheet">? I could not find any information on whether this is allowed or not. I tried customizing the icon depending on the browser theme: <link rel="icon" href="https://fakeimg.pl/128x128/000000/" media="(prefers-color-scheme: dark)" type="image/png" /> <link rel="icon" href="https://fakeimg.pl/128x128/ffffff/" media="(prefers-color-scheme: light)" type="image/png" /> But in Firefox and Edge, the last icon is always taken, not the one that corresponds to the theme. And I can't understand: The combination of rel="icon" and the media is not allowed by the standard, or standard allowed but browsers do not handle this scenario? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#6408>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AS6ILORNEVI776XCBVCXGEDTAJ62NANCNFSM4YAZLI7Q> .

[domenic]

The specification requires that media be respected for all link types, and for rel="icon" link types in particular it says:

Icons could be auditory icons, visual icons, or other kinds of icons. If multiple icons are provided, the user agent must select the most appropriate icon according to the type, media, and sizes attributes.

I wonder if other media queries (not light/dark mode) work. It's possible since those are somewhat recent, they are not fully hooked up to link elements.

[cawa-93]

I wonder if other media queries (not light/dark mode) work. It's possible since those are somewhat recent, they are not fully hooked up to link elements.

It doesn't seem to work for any media queries. Try the demo

[domenic]

It looks like this is a known and acknowledged browser bug, at least for Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=970159 . Please go star that bug!

I'd suggest searching for similar issues for Firefox and Safari, and filing them if they don't exist.

I'll close this since I think the spec is in a good state here, although perhaps if no implementers are interested in this then we should reopen and change the spec to specifically exclude rel=icon. That would be a sad outcome, so hopefully we won't go there...

[beaufortfrancois]

FYI I've asked Firefox at mozilla/standards-positions#495 and Safari at https://lists.webkit.org/pipermail/webkit-dev/2021-March/031721.html