Which Favicon Sizes You Actually Need in 2026

· Javed Iqbal · 8 min read

Old favicon generators spit out 20 files and a wall of link tags, and most of it is for devices that no longer exist. In 2026 you need a small, deliberate set: enough to cover browser tabs, iOS home screens, Android and PWAs, and Google search. That is it.

Here is exactly which sizes matter, what each one is for, the HTML to paste, and the one requirement Google actually enforces.

The sizes that matter (and why)

Size / fileUsed for
favicon.ico (16, 32, 48)The classic browser tab and address bar icon. Still expected at your site root, and used by older browsers and some tools.
32x32 PNGHigh-DPI browser tabs and Windows taskbar shortcuts.
icon.svgA single scalable icon modern browsers prefer. Crisp at any size and can adapt to dark mode.
180x180 PNGapple-touch-icon: the icon iOS uses when someone adds your site to their home screen.
192x192 PNGAndroid home screen and PWA (referenced in the web manifest).
512x512 PNGPWA splash screen and install prompt (also in the manifest).

That covers everything real. You do not need 48x48, 64x64, 96x96, 144x144 and the rest as separate files anymore; the ICO handles the small legacy sizes and the SVG handles the rest.

The modern minimal set

For a normal website in 2026, generate just these five:

  1. favicon.ico (a multi-size ICO holding 16, 32, and 48) at your site root
  2. icon.svg (optional but nice, scalable and dark-mode friendly)
  3. apple-touch-icon.png at 180x180
  4. icon-192.png at 192x192
  5. icon-512.png at 512x512

The exact HTML to add

Drop this in your <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

And the two PNGs go in your web manifest, not the head:

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

Note the sizes="any" on the ICO line. It tells modern browsers to prefer your SVG when they support it and fall back to the ICO when they do not.

The Google search requirement

The favicon that shows next to your site in Google results has one hard rule: it must be a square that is a multiple of 48px, so 48x48, 96x96, 144x144 and so on. If yours is an odd size, Google may ignore it and show a generic globe. A multi-size ICO plus a proper SVG satisfies this, but it is worth knowing why a favicon sometimes just does not appear in search.

The SVG favicon and dark mode

An SVG favicon is the nicest upgrade you can make. It stays sharp at every size and, because it is code, it can respond to the browser theme. Add a media query inside the SVG so the icon flips color in dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
  </style>
  <path d="..." />
</svg>

Why your favicon will not update (the cache trap)

You change the favicon, refresh, and the old one is still there. Browsers cache favicons harder than almost anything else. This bit me for an embarrassingly long time once. Fixes, in order: hard-refresh the page, open the favicon URL directly and refresh that, or bust the cache with a query string like /favicon.ico?v=2. Google can take a couple of weeks to refresh the one it shows in search, so do not panic if the SERP icon lags.

Make the whole set in one go

You do not need to resize anything by hand. Upload one square image (a clean PNG works best) to the favicon generator and it produces the ICO and the PNG sizes for you, in your browser, with nothing uploaded to a server. For the step-by-step on picking the source image, see how to make a favicon from a PNG.

FAQ

What favicon sizes do I actually need?

A multi-size favicon.ico (16, 32, 48), a 180x180 apple-touch-icon, and 192x192 plus 512x512 PNGs for Android/PWA. An SVG is a nice optional addition. That is the full modern set.

Is favicon.ico still needed in 2026?

Yes. It is still expected at the site root, used by older browsers and some crawlers, and it is a reliable fallback. Keep it even if you also ship an SVG.

What size is the Apple touch icon?

180x180 pixels. One file covers current iOS devices for the add-to-home-screen icon.

Why does Google show a blank favicon?

Usually the icon is not a square multiple of 48px, or Google has not recrawled yet. Use a correctly sized ICO/SVG and give it a week or two.

Generate the full set now with the free favicon generator, then paste the HTML above into your <head>.