NEW309949
SVG favicons don't respect media query overrides, notably for dark mode 
https://bugs.webkit.org/show_bug.cgi?id=309949
Summary SVG favicons don't respect media query overrides, notably for dark mode
Pawel Grzybek
Reported 2026-03-13 23:57:13 PDT
Created attachment 478679 [details] The preview of favicon rendering in Chrome, Firefox and Safari (top to bottom order) SVG favicons don't respect media query overrides. Tested and reproduced on Safari Version 26.3. Here is a minimal reproduction example. ``` <!-- index.html --> <link rel="icon" href="/icon.svg" type="image/svg+xml" /> ``` ``` <!-- icon.svg --> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <style> .bg { fill: #ffffff; @media (prefers-color-scheme: dark) { fill: #000000; } } </style> <rect x="0" y="0" width="100" height="100" class="bg" /> </svg> ``` Here is an example of a website that uses this technique. https://nn1.dev
Attachments
The preview of favicon rendering in Chrome, Firefox and Safari (top to bottom order) (1011.26 KB, image/jpeg)
2026-03-13 23:57 PDT, Pawel Grzybek 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2026-03-16 18:01:08 PDT
Confirmed. Thanks for the testcase.
Karl Dubost
Comment 2 2026-03-16 20:44:25 PDT
Maybe the same bug than Bug 199134
Anne van Kesteren
Comment 3 2026-03-16 23:01:52 PDT
No, we need to do something different for favicons.
Anne van Kesteren
Comment 4 2026-03-16 23:02:05 PDT
<rdar://150316861>
Owl
Comment 5 2026-04-11 06:52:35 PDT
I hope this can be implemented soon. Currently trying to create a light and dark mode friendly SVG icon for OpenWrt’s LuCI interface and Safari is the only one that ignores the prefers-color-scheme to show the dark mode version of the icon. At this point I am just accepting that Safari currently only uses the light mode/default icon, even if it is very poorly contrasting the Safari UI in dark mode.
Note You need to log in before you can comment on or make changes to this bug.