SVG favicons that respect theme preference

SVG favicons are well supported now! Since this is a vector format, resolution is not a concern, and it can also adapt to user theme preferences.

<!-- 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>

Above example can also be written with light-dark CSS function, which is also baseline:

<svg viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg">
  <style>
    :root { color-scheme: light dark; }
    .bg { fill: light-dark(black, white); }
  </style>

  <rect x = "0" y = "0" width = "100" height = "100" class = "bg" />
</svg>

Read here