ZairussalamTools

Favicon Sizes That Actually Matter in 2026

The classic 'generate 47 favicon files' advice is outdated. Here's the minimum viable set modern browsers and PWAs actually use.

·Ibrahimsyah Zairussalam·
faviconweb

Every favicon generator from 2015 dumps 40 files into your project root and hands you a <head> snippet longer than your actual HTML. apple-touch-icon-152x152-precomposed.png. mstile-310x150.png. Four sizes of .ico. The Microsoft browserconfig XML. All of it.

In 2026, almost none of that matters. Here's what you actually need.

What Modern Browsers Actually Read

Let's start with the empirical truth. If you open devtools on any major site's tab load and filter for icon requests, here's what you'll see:

  • 32×32 PNG or SVG — browser tab, bookmark bar, address bar
  • 180×180 PNG — iOS Safari "Add to Home Screen" (Apple Touch Icon)
  • 192×192 PNG — Android Chrome home screen, low-density PWA install
  • 512×512 PNG — PWA splash screen, high-density launch icons

That's it. Four files. Five if you count the SVG.

Favicon Generator

Generate favicon PNGs for every platform from a single source image. All processing in your browser.

Why .ico Is (Mostly) Dead

The .ico file exists because in 1999, Internet Explorer needed a multi-resolution container format. A single .ico can hold 16×16, 32×32, 48×48 in one file, and IE would pick the right one.

Today:

  • Chrome, Safari, Firefox, Edge all happily use PNG or SVG <link rel="icon">
  • The only place .ico still matters is /favicon.ico at the root for legacy fallback and RSS reader thumbnails
  • You can ship a 32×32 PNG renamed to favicon.ico and nothing will complain

Keep one .ico at your domain root as a safety net. Don't spend a second optimizing it.

The SVG Favicon Approach

Here's the nice thing nobody told you: favicons can be SVG now, and have been since ~2020 across all major browsers.

A single SVG favicon, any resolution

Benefits:

  • One file, perfect at every size
  • A few hundred bytes instead of kilobytes
  • Easy to theme with prefers-color-scheme via <style> inside the SVG
  • Scales crisply on 4K, 8K, and whatever comes next

The catch: iOS Safari still wants a raster PNG for home-screen icons. Android Chrome PWAs still want raster for the splash screen. So SVG replaces your tab icon, not the mobile ones.

The Minimum Viable <head> Snippet

This is the 2026 answer. Copy, paste, ship.

Paste this into your <head>
{/* Tab icon (crisp, scales anywhere) */}
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
{/* Fallback for browsers that ignore SVG */}
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
{/* iOS home screen */}
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
{/* PWA manifest handles Android + splash screens */}
<link rel="manifest" href="/site.webmanifest" />

And the matching site.webmanifest:

site.webmanifest

That's five image files and two lines of HTML. Done.

Maskable Icons: The One New Thing

The one new thing you should care about is the maskable icon purpose. Android adaptive icons crop your icon into various shapes (circle, squircle, rounded square) depending on the launcher theme. If your icon goes edge-to-edge, the crop will eat your logo.

A maskable icon has a safe zone — the inner 80% circle is guaranteed to be visible. Pad your logo within that zone and you're fine.

Bad maskable

Logo fills the full 512×512 canvas. Android's circle crop slices off the corners — "SaaS" becomes "aaS".

Good maskable

Logo sits in the inner 80%, with solid background color filling the outer 20%. Whatever shape Android crops to, the logo stays intact.

If you don't ship a maskable variant, Android just uses your regular icon with a white background padding. Looks fine for most cases, terrible for logos with transparency.

What You Can Safely Delete

If you're auditing an existing project's <head>, you can probably drop:

  • apple-touch-icon-57x57.png through apple-touch-icon-152x152.png — iOS just uses the 180 now and downscales
  • mstile-*.png and browserconfig.xml — Windows 10 Live Tiles are dead, Windows 11 doesn't use them
  • Android launcher-icon-48.png through launcher-icon-144.png — manifest handles it
  • msapplication-TileColor meta tags — same reason
  • safari-pinned-tab.svg — Safari dropped pinned tabs in macOS Big Sur

If your CI is building 20 image variants for no one to see, that's seconds of build time and bytes of repo for nothing.

The Dark Mode Trick

If you want your favicon to adapt to the user's system theme:

Dark-mode-aware SVG favicon

Works in tabs. Doesn't work on mobile home screens (those get a baked raster).

The Takeaway

The correct 2026 favicon set:

  1. favicon.svg — for tab rendering, with optional dark mode
  2. favicon-32.png — fallback for SVG-shy browsers
  3. favicon.ico at root — RSS readers and ancient clients
  4. apple-touch-icon.png — 180×180, iOS home screen
  5. icon-192.png and icon-512.png — PWA manifest
  6. icon-maskable-512.png — adaptive Android icons

Six files. One manifest. One SVG.

If you're still copy-pasting 40-line favicon snippets from 2013, you're doing work nobody benefits from.

Try these tools

Favicon Generator

Generate favicon PNGs for every platform from a single source image. All processing in your browser.

More articles

·cron, scheduling

Cron Expression Cheatsheet With Real Examples

The handful of cron patterns you actually need, the difference between 5-field and 6-field syntax, and the timezone gotcha that will burn you.

·csv, json, data

CSV ↔ JSON Conversion Pitfalls: Escaping, Quoting, Encoding

CSV looks trivial until you ship it. Embedded commas, Excel's auto-formatting, UTF-8 BOMs, and the locale wars — with rules for getting it right.

·crypto, privacy, aes

Encrypt Text in Your Browser Without Sending It Anywhere

How WebCrypto's AES-GCM works, why PBKDF2 iteration count matters, and what passphrase-based encryption actually protects you from.