The Favicon Guide 2026: Sizes, SVG Favicons & Dark Mode

The Modern Setup in 30 Seconds

Here is the entire HTML:

<!-- Modern favicon setup, 2026 -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

And the manifest:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

The rest of this guide explains why each piece exists, the exact size rules, how the SVG dark-mode trick works, and what Google requires before it will show your favicon in search results.

Why These Four Files (and Not Twenty)

Favicon advice fossilized around 2015, when you genuinely needed a pile of PNGs for Windows tiles, old iOS versions, and pre-HiDPI desktops. Browsers have long since converged. Each remaining file has one precise job:

Order matters: keep the .ico link before the SVG link. Browsers that understand type="image/svg+xml" pick the SVG; everything else silently takes the ICO. No JavaScript, no sniffing.

SVG Favicons: One File, Every Size

An SVG favicon is just a normal SVG served with type="image/svg+xml". Because it's vector, the same file is pixel-perfect in a 16px tab, a 32px bookmark bar, and a 96px new-tab tile — the exact property that makes SVG the standard for UI icons.

Two practical rules make or break SVG favicons:

• Design for 16px first. Your logo's fine detail will vanish in a tab. Simplify to one bold shape — the same discipline as pixel-perfect icon grids. If your mark needs a wordmark, drop it; ship the glyph alone.
• Keep a square viewBox. Browsers letterbox non-square favicons unpredictably. viewBox="0 0 24 24" or 0 0 512 512 — square, always.

Browser support, honestly

Chrome, Edge, Opera, and Firefox handle SVG favicons flawlessly. Safari remains the holdout — its SVG favicon rendering is unreliable across versions, which is precisely why the ICO fallback stays in the setup. You never need to choose: declare both and every browser self-selects.

The Dark Mode Favicon Trick

A dark logo disappears against Chrome's dark tab bar. ICO and PNG can't fix this — but SVG can, because SVG carries its own CSS. Embed a media query inside the icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <style>
    path { fill: #0A0A0A; }
    @media (prefers-color-scheme: dark) {
      path { fill: #F2F2F2; }
    }
  </style>
  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
</svg>

Chromium browsers and Firefox re-evaluate the query when the OS theme flips — your favicon follows the theme with zero JavaScript. Three refinements from production experience:

• The media query reflects the OS theme, not your site's theme toggle. There is no API to sync a favicon with an in-page theme switch (short of swapping link tags in JS).
• Test both themes at 16px — a hairline that works in light mode can smear in dark mode. The same contrast rules as dark-mode UI icons apply.
• A third option beats both single-color variants: give the glyph a self-contained background shape (a filled rounded square), making it theme-proof everywhere — including Safari and search results.

Google Search Result Favicons: The Actual Rules

Since favicons appear next to every result on mobile and desktop, this is now an SEO surface. Google's documented requirements:

• Size: any square icon of at least 8×8px is eligible, but Google recommends 48×48 or a multiple of it (96, 144…) — or an SVG. Your 32×32 ICO alone is not ideal here; the SVG or a 48×48+ icon satisfies it.
• Crawlability: both the favicon file and your homepage must not be blocked by robots.txt. A favicon behind a blocked /assets/ path silently never appears.
• Consistency: one favicon across the whole site — per-section favicons confuse the crawler and can delay updates.
• Appropriateness: generic placeholders (the default server globe, a CMS logo) get replaced with a neutral fallback icon in results.

Favicon changes take days to weeks to propagate in search results; Googlebot refreshes favicons far less often than pages. Don't panic-redeploy after a rebrand.

The Five Favicon Mistakes We See Everywhere

• 1. Transparent apple-touch-icon. iOS composites transparency onto a black tile. Always export the 180×180 with an opaque background.
• 2. Generator dumps. 20 link tags from a 2014-era favicon generator add HTTP requests and maintenance surface for zero benefit. Four files. That's the setup.
• 3. Full logo at 16px. Wordmarks and detailed marks turn to noise in a tab. Glyph only — simplify like you would any small-size icon.
• 4. Unoptimized SVG favicons. The favicon is requested on effectively every page load. Run it through SVGO like every other icon — our SVG optimization guide covers the config.
• 5. Forgetting the manifest icons. Without 192/512 PNGs, Android installs fall back to a screenshot-quality shrunken favicon, and PWA install prompts may not fire at all.

A 10-Minute Favicon Workflow

1. Pick or design the glyph. Need a base mark? Search 134,701 open-source icons on IconStash, customize the color, and export as SVG — 94.5% require zero attribution, favicons included.
2. Make it square and bold. Square viewBox, one shape, optional filled background for theme-proofing.
3. Add the dark-mode <style> block (or skip it if you used a background shape).
4. Export the rasters: 32×32 ICO, 180×180 opaque PNG, 192 and 512 PNGs. Any raster editor or a one-line ImageMagick/sharp script does it.
5. Drop in the five lines of HTML + manifest, put favicon.ico at the root, and verify in one Chromium browser, Firefox, Safari, and a Lighthouse PWA audit.

Frequently Asked Questions

What favicon sizes do I need in 2026?

Four files: 32×32 favicon.ico, a scalable SVG, a 180×180 apple-touch-icon.png, and 192×192 + 512×512 manifest PNGs. Nothing else.

Do SVG favicons work in all browsers?

Chrome, Edge, Firefox, and Opera: yes. Safari: unreliable — which the ICO fallback covers automatically. Declare both link tags and every browser picks its best option.

How do I make my favicon adapt to dark mode?

Embed @media (prefers-color-scheme: dark) rules in a <style> block inside the SVG favicon. Only SVG can do this — it's the strongest single reason to adopt SVG favicons.

Is favicon.ico still required?

Keep it. Safari, crawlers, RSS readers, and countless tools request /favicon.ico blindly. It costs a few kilobytes and prevents a class of 404s you'd otherwise see in your logs forever.

Why doesn't my favicon show in Google search results?

Usually one of three things: the icon isn't 48×48-multiple or SVG, the file or homepage is blocked from crawling, or the change simply hasn't propagated yet — favicon recrawls lag page recrawls by days to weeks.