web.dev: Building an Adaptive Favicon

A walkthrough on Google’s web.dev developer site, part of its GUI Challenges series, of building a favicon that switches between light and dark color treatments to match the user’s system theme, using an SVG file with its own embedded styles.

License: CC BY 4.0 — same basis as web.dev: Core Web Vitals Business-Impact Case Studies, confirmed via the page’s own footer (code samples separately under Apache 2.0).

Key points

• A favicon shows up in more places than desktop browser tabs, including “save for later” reader apps, bookmarks bars, and other sites linking to the page, so an icon that adapts to a light or dark theme benefits those contexts too.
• The technique is progressive enhancement: keep serving the widely-supported .ico favicon, and declare an .svg favicon after it for browsers that can use it.
• Because an SVG can carry its own <style> block, the icon’s light-theme colors can be its default styling, and a prefers-color-scheme: dark media query inside that same style block can swap in a dark-theme palette. No JavaScript or separate image files are needed.
• The dark variant doesn’t have to invert everything: the worked example replaces a bright border color with a dark gray and softens the main fill from white to a light gray, but keeps its accent color the same in both themes.
• Since the SVG favicon can look identical to the .ico one, the article recommends confirming in the browser’s developer tools (the Network panel, filtered to images) that the SVG is actually the file being loaded.

Cited In

Patterns

• Favicon