Bug 309949 – SVG favicons don't respect media query overrides

• Component: New Bugs
• Status: NEW

[Pawel Grzybek]

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