link rel="favicon" media attribute / query not working
Categories
(Firefox :: General, defect, P3)
Tracking
()
People
(Reporter: iipandarx, Unassigned)
References
(Blocks 1 open bug)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:104.0) Gecko/20100101 Firefox/104.0
Steps to reproduce:
I tried to use different favicons for dark and light mode using the media attribute and prefers-color-scheme, the exact same code works in latest Chrome
Code:
<link href="/favicon-light.png" rel="icon" media="(prefers-color-scheme: dark)" type="image/png">
<link href="/favicon-dark.png" rel="icon" media="(prefers-color-scheme: light)" type="image/png">
Actual results:
The favicon that is first in the markup is used, disregarding the media attribute
Expected results:
It should use different favicons based on the preferred color scheme
|
||
Comment 1•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Audio/Video: Playback' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Updated•2 years ago
|
|
||
Comment 2•2 years ago
|
||
AFAICT, icons aren't handled inside Gecko:
https://searchfox.org/mozilla-central/source/browser/actors/LinkHandlerChild.jsm
|
||
Updated•2 years ago
|
|
|
||
Updated•2 years ago
|
|
|
||
Updated•10 months ago
|
|
||
Comment 5•6 months ago
|
||
FWIW comment 0 is not great, because the prefers-color-scheme value for websites and for the browser theme might not be the same.
Instead, the right way to create a favicon would be to e.g., use an svg that handled prefers-color-scheme internally. If you need PNGs or so you could probably use an <svg:image> (though I haven't tested this). That would actually work with all different combinations of themes and user preferences.
Description
•