Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

interactionsRauno

SVG Favicon with Theme Support

SHOULD

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

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

Bad

Good

Why it matters

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.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.