A favicon that adapts to dark mode
Only SVG can respond to the browser theme. Embed a <style> with a prefers-color-scheme query inside the SVG itself — the browser applies it when rendering the icon. This keeps a dark logo visible on a dark tab strip:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) { path { fill: #fff; } }
</style>
<path d="…your icon path…"/>
</svg>
Reference it as <link rel="icon" href="/icon.svg" type="image/svg+xml">. Keep a normal favicon.ico alongside it for browsers and Google Search, which won't run the media query.
Safari pinned-tab icon
When someone pins your tab in desktop Safari, it uses a separate flat, single-colour SVG (a "mask icon") — all shape, no gradients:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F0562E">
The color attribute sets the pin's tint. Export a monochrome version of your mark for this; anything with fine detail or multiple colours will render as a solid blob.
Maskable icons and the safe zone
Android's adaptive icons crop your image into a circle, squircle or rounded square depending on the launcher. A normal icon gets its corners chopped. Mark the manifest icons as maskable and keep the important content inside the central "safe zone" — roughly the middle 80%, i.e. a ~10% margin on every side:
{ "src": "/android-chrome-512x512.png", "sizes": "512x512",
"type": "image/png", "purpose": "any maskable" }
Design with a full-bleed background colour and the logo comfortably inside that margin, so no shape crops into it.
theme-color: the bar around the icon
Not the favicon itself, but it sits right next to it on mobile — theme-color tints the browser UI/address bar. It can also react to the theme:
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#111316" media="(prefers-color-scheme: dark)">
What a real .ico actually contains
A proper .ico is a container holding several bitmaps at once — typically 16, 32 and 48 pixels. The browser picks the size it needs for the surface (tab vs. bookmark bar vs. Windows shortcut), so it never has to scale a 16px image up or a 512px image down. A "favicon.ico" that is really a single renamed PNG loses that and looks soft at some sizes. This generator writes a true multi-size ICO.
Google Search favicon rules
To have your icon appear beside your result, Google requires all of the following: the favicon lives at a consistent URL; it is square and a multiple of 48×48 (48, 96, 144…); it is on the same host as the site; the page hosting it is indexable; and the icon is visually clear. Google fetches and caches it with its own crawler, separately from the page — so after a change, allow days to weeks and confirm /favicon.ico returns 200 to Googlebot.
Keep the files small
- SVG: strip editor metadata and comments; a clean icon SVG is often under 1 KB.
- ICO: 16/32/48 only — resist adding 64/128/256, which bloat the file for no benefit.
- PNG: the 512 icon is the heaviest; run it through a lossless optimiser.
Test it where it actually shows
Don't trust a single browser. Check: a normal tab (light and dark), a bookmark, an iOS "Add to Home Screen", an Android install, and the Google result once it recrawls. A quick way to force a clean read while testing is a private window plus a ?v= query on the icon URLs.