The favicon is the only image your site shows in a place you do not control: browser tabs, bookmarks bars, and history lists, each with its own background color. An SVG favicon can respond to that background instead of fighting it.

<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">
<link rel="icon" href="/favicon.ico" sizes="any">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    circle { fill: #111111; text { fill: #ffffff; } }
    @media (prefers-color-scheme: dark) {
      circle { fill: #ffffff; }
      text { fill: #111111; }
    }
  </style>
  <circle cx="32" cy="32" r="30"/>
  <text x="32" y="42" text-anchor="middle"
        font-family="Georgia" font-size="30">T</text>
</svg>

Why this works and what to respect

  • The style block inside the SVG is a real stylesheet, so the prefers-color-scheme media query works exactly as on a page.
  • Vector shape scales: one file serves 16px tab, 32px bookmark, 180px phone home-screen without an image per step.
  • The PNG and ICO fallbacks in the link list handle browsers and contexts that ignore SVG; the order there has the last word for legacy support.
  • Keep the icon contrast-checked against both tab colors, light and dark; a brand-neutral stroke is usually better than full fill.

The honest checklist

  1. Draw at 64 by 64 with the glyph properly centered; test at 16 before celebrating, tabs are the appetite it must survive.
  2. Embed the media queries, ship no external CSS in the icon file; it must load standalone.
  3. Keep the legacy mask and the PNG fallback steps in your build step so every release updates all three files together.
  4. Verify in a browser with tab color samples: a light tab and a dark one, plus the bookmark bar's own gray.

The gacor summary: the favicon went from a raster flagship for every browser version to one responsive SVG and a legacy note. One line of dark-mode care that most sites skip.