Favicon sizes in 2026: which five files you actually need

Favicon guides tend to list fourteen files and six meta tags, most of which target platforms that no longer exist. Here is the current minimum that covers every real client.

The five files

The HTML

<link rel="icon" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" />
<link rel="apple-touch-icon" href="/favicon-180x180.png" />
<link rel="manifest" href="/site.webmanifest" />

The 192 and 512 sizes go in the manifest rather than in link tags:

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

Do you still need favicon.ico?

Almost certainly not. Every browser released in the last decade reads PNG favicons from link tags.

The one argument for keeping one: some clients request /favicon.ico blindly without parsing your HTML, and a 404 in your logs is noise. If that bothers you, keep a 32×32 ICO at the root. It is not doing any real work.

The SVG favicon

Modern browsers accept an SVG favicon, which is one file at any resolution:

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" />

List both. Browsers that support SVG take it; the rest fall back to the PNG. The catch is that Safari's support has historically been inconsistent, so the PNG fallback is not optional.

An SVG favicon can also respond to dark mode with a media query inside the SVG itself - genuinely useful, since a dark logo disappears against a dark tab bar.

Designing one that reads at 16px

This is where most favicons fail, and it is a design problem rather than a technical one.

At 16×16 you have 256 pixels. A full wordmark shrunk down is illegible mush. What works:

• A single letter at high contrast.
• One bold shape from your logo, not the whole thing.
• High contrast against both light and dark tab bars - mid-grey disappears against both.
• No thin strokes. Anything under 2px at the source size vanishes.

Design it at 16px first and scale up, rather than designing at 512 and hoping it survives the shrink.

Why your new favicon is not showing

Favicons are cached more aggressively than almost anything else and largely ignore normal cache headers.

1. Check in a private window first - that rules out your own cache.
2. Add a query string: href="/favicon-32x32.png?v=2".
3. Confirm the file actually returns 200 and is served as image/png, not text/html from a catch-all route.
4. Hard-refresh, then restart the browser. Some browsers only re-read favicons on startup.