# SVG Favicon with Theme Support

**SHOULD** · **ID:** `interactions-svg-favicon-theme` · **Category:** interactions
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-svg-favicon-theme

> SHOULD: Ship an SVG favicon containing an inline `<style>` with `prefers-color-scheme` so the icon adapts to light/dark browser chrome.

Use an SVG favicon with a style tag that adapts to light/dark mode via prefers-color-scheme

PNG favicons are static and can become invisible against a dark browser tab bar. SVG favicons can include a <style> block with prefers-color-scheme media queries, automatically adapting to the user's system theme.

## Rule snippet

```tsx
<style>path { fill: #000 }
@media (prefers-color-scheme: dark) { path { fill: #fff } }</style>
```

## Bad — do not do this

`interactions-svg-favicon-theme-bad`

```tsx
export function SvgFaviconThemeBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 bg-foreground rounded flex items-center justify-center">
            <span className="text-background text-xs font-bold">A</span>
          </div>
          <div>
            <p className="text-sm font-medium text-foreground">favicon.png</p>
            <p className="text-xs text-muted-foreground">Static raster — same in light & dark</p>
          </div>
        </div>
        <pre className="text-xs bg-muted rounded p-2 text-foreground overflow-x-auto"><code>{`<link rel="icon" href="/favicon.png" />`}</code></pre>
      </div>
      <p className="text-xs text-error">PNG favicon can't adapt to system dark/light mode</p>
    </div>
  );
}
```

## Good — do this

`interactions-svg-favicon-theme-good`

```tsx
export function SvgFaviconThemeGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <div className="flex gap-4">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-white border border-border rounded flex items-center justify-center">
              <span className="text-black text-xs font-bold">A</span>
            </div>
            <span className="text-xs text-muted-foreground">Light</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-black border border-border rounded flex items-center justify-center">
              <span className="text-white text-xs font-bold">A</span>
            </div>
            <span className="text-xs text-muted-foreground">Dark</span>
          </div>
        </div>
        <pre className="text-xs bg-muted rounded p-2 text-foreground overflow-x-auto"><code>{`<svg>
  <style>
    path { fill: #000 }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff }
    }
  </style>
</svg>`}</code></pre>
      </div>
      <p className="text-xs text-success">SVG favicon with prefers-color-scheme — adapts to theme</p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)