Favicons and theme
The favicon zoo (sizes, formats, the SVG shortcut), theme-color, and color-scheme — the browser-chrome tokens that match your brand.
The favicon — the little icon in the browser tab — used to be a 16×16 ICO file and that was it. Then came retina screens, then Apple's home-screen icons, then Android shortcuts, then dark mode, then the URL bar's theme color. The "favicon zoo" became a recipe of seven or eight files in different sizes and formats, copy-pasted from a template every time.
Modern browsers have simplified most of this. This lesson is the 2026 minimum — what you actually need to ship — plus the optional bits that earn their place when you care about iOS, Android, and PWAs.
The favicon, simplified
For modern browsers, a single SVG file is all you need.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
SVG scales to any size without blurring. Browsers use the same file for the tab (16×16, 32×32) and the bookmarks bar. The whole favicon problem becomes one file.
For older browsers (mostly older Edge and some legacy Chromium variants) that do not load SVG favicons, add a small ICO fallback:
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.ico" sizes="32x32">
The browser picks the SVG when it can; falls back to the ICO when it cannot. The ICO can be 32×32; older browsers will scale it.
If you want a dark-mode favicon (different colors when the user is in dark mode), use CSS inside the SVG file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<style>
@media (prefers-color-scheme: dark) {
.mark { fill: #fff; }
}
.mark { fill: #111; }
</style>
<path class="mark" d="M..."/>
</svg>The favicon adapts to the user's OS theme. No separate light/dark files needed.
Modern build tools and starters ship with a favicon recipe that generates all the sizes you might need — Next.js, Astro, Vite, and most starter templates handle it. For a simple site, a single SVG plus an ICO fallback is enough.
iOS and Android extras
When users save your site to their iPhone home screen, iOS uses a different icon (apple-touch-icon). It ignores the standard favicon link.
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
The image should be 180×180 PNG (Apple's preferred size). You can offer multiple sizes with the sizes attribute, but a single 180×180 covers every iOS device made in the past several years.
Android uses the manifest's icons array (lesson 6 covers the manifest). For Chrome on Android with no manifest, it falls back to apple-touch-icon if present.
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.json">
That four-line set covers the vast majority of platforms. The SVG handles browser tabs. The ICO handles older fallback. The Apple touch icon handles iOS home screen. The manifest handles Android, PWA installs, and any other "make this site feel like an app" path.
You may see older recipes with ten or more <link> tags for every conceivable size. That bloat is no longer needed in 2026.
theme-color
theme-color is the color of the browser's URL bar (on mobile) or the title bar (on installed PWAs). Set it to your brand color and the browser chrome blends with your design.
<meta name="theme-color" content="#c96442">
The hex value is a regular CSS color. The browser tints its UI to match. On Android Chrome, the URL bar fills with this color. On installed PWAs, the title bar uses it. On Safari iOS, the bar tints subtly.
You can ship two colors — one for light mode, one for dark — using the media attribute:
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fdf6e3"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#181818">
The browser picks the matching one based on the user's OS theme. Subtle, polished detail; cheap to ship.
The color does not affect anything inside your page. It is purely for the browser's surrounding UI.
<meta name="theme-color" content="#c96442">. What changes for users on Android Chrome?color-scheme
color-scheme tells the browser which themes (light, dark, or both) your page supports. The browser uses it to choose the default colors for things it controls — form controls, scrollbars, the background flash before your CSS loads.
<meta name="color-scheme" content="light dark">
The values:
light— page only supports light mode.dark— page only supports dark mode.light dark— page supports both. Browser picks based on the user's OS preference.
Without this meta, the browser assumes light and may flash a white background even if you have a dark CSS theme ready to go. Set light dark and the browser uses the user's OS-default theme for those built-in elements until your CSS takes over.
You can also set color-scheme in CSS instead — :root { color-scheme: light dark; } — which has the same effect. The meta tag works earlier in page load, before CSS parses; the CSS rule kicks in once the stylesheet runs. Belt-and-braces is fine.
Without color-scheme, dark-mode users may see a brief white flash when the page loads before your CSS defines a dark background. The meta or CSS rule prevents this.
A useful picture: theme-color paints the browser's frame; color-scheme tells the browser whether your picture is light or dark.
prefers-color-scheme media queries in CSS. Dark-mode users see a white flash on each page load. What's the smallest fix?