Which favicon sizes do you actually need in 2026?

The legacy guidance of "just ship favicon.ico" stopped being enough a decade ago. Modern browsers and OSes expect specific sizes for specific contexts:

16×16 — classic browser tab icon.
32×32 — higher-DPI tabs, taskbar shortcuts.
48×48, 96×96 — Windows shortcuts, Android Chrome "add to home."
180×180 — Apple touch icon (iPhone/iPad home screen).
192×192, 512×512 — Android Chrome PWA icons, referenced in manifest.webmanifest.

Shipping all of these covers every real device from a 2015 browser to a 2026 flagship phone, including installed PWA shortcuts.

HTML snippet

After downloading the PNG set to /public, paste this in your <head>:

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

When SVG favicon is the smarter move

Modern browsers support <link rel="icon" type="image/svg+xml" href="/favicon.svg">. If your favicon is simple — a letter, a shape, a geometric logo — ship one SVG and skip the entire PNG multi-size dance for browser tabs. You still need the PNG 180×180 for Apple touch (Apple doesn't support SVG here) and 192/512 for PWA manifest, but everything else can be one SVG.

Emoji mode — when it's perfect

Emoji mode renders an emoji or 1–4-character text on a colored background. Great for:

Weekend projects and personal sites where the first letter of your name is good enough.
Quick prototypes where the logo isn't designed yet.
Staging/dev environments that need a visible marker different from production.

ICO vs PNG vs SVG favicon — format comparison

Format	Browser support	Typical size	Transparency	Retina	Recommended use
.ico	Universal (IE6+)	2–20 KB	Yes	No	Legacy fallback only; no new projects
.png	All modern browsers	1–50 KB per size	Yes (alpha)	With correct size tag	Primary format for 2026. Ship 16, 32, 180, 192, 512.
.svg	Chrome, Firefox, Edge (no Safari tab)	Under 1 KB	Yes	Perfect (vector)	Best for simple logos and icons; needs PNG fallback for Apple

The practical recommendation: ship PNG for all sizes, optionally add an SVG for desktop browsers, and skip ICO entirely unless you have legacy IE requirements. This tool generates PNG only — add an SVG separately if your logo is a simple vector shape.

Web app manifest (site.webmanifest)

The web app manifest is a JSON file that tells browsers how to present your site when installed as a PWA. Create a file called site.webmanifest in your public root with at minimum:

{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/favicon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Link to it from your <head> with <link rel="manifest" href="/site.webmanifest">. The 192 icon is used for the Android home screen shortcut; the 512 is used for the PWA splash screen on Android. Without the manifest, Chrome will not show the "Add to home screen" prompt.

Favicon checklist for production

16×16 PNG — browser tab icon. Link with <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">.
32×32 PNG — high-DPI tabs, Windows taskbar. Add a separate sizes="32x32" link tag.
180×180 PNG (apple-touch-icon) — iPhone and iPad home screen. Link with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.
192×192 PNG — Android PWA home screen shortcut. Referenced in site.webmanifest.
512×512 PNG — Android PWA splash screen. Referenced in site.webmanifest.
site.webmanifest linked — <link rel="manifest" href="/site.webmanifest"> in <head>.
og:image for social sharing — not a favicon, but critical for link previews. Use a 1200×630 PNG as your <meta property="og:image"> — distinct from favicon but often overlooked alongside it.

FAQ

What happened to .ico?

Still supported, still works — but PNG is better in every way (smaller, sharper, color-accurate). Ship PNG and link with explicit sizes attributes. Only ship favicon.ico if you need to support IE (you don't).

Do I need a site.webmanifest?

Only if you want users to install your site as a PWA. Otherwise the <link rel="manifest"> tag is optional.

Does the image-upload mode preserve transparency?

Yes. PNG alpha is preserved. SVG inputs render with transparent backgrounds (unless you added a bg in the SVG itself).

How do I update my favicon after deploying?

Browsers cache favicons aggressively — more aggressively than regular assets, and often ignoring standard Cache-Control headers. A user who visited your site yesterday may see the old favicon for days or weeks even after you've replaced the file. The reliable fix is to change the filename (e.g., favicon-v2.png) and update the <link> tag to match, or append a cache-busting query string: href="/favicon-32.png?v=2". Most modern build tools (Vite, Next.js) handle this automatically with asset hashing. For static sites, a manual version suffix is the simplest approach.

Related tools

Base64 Encoder / Decoder — Encode and decode Base64 strings and files. Client-side, safe for sensitive data.
Color Picker — Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.
QR Code Generator — Generate QR codes for URLs, text, Wi-Fi, contact cards. Custom size, colors, error correction. Download as PNG or SVG. 100% client-side.
Aspect Ratio Calculator — Calculate aspect ratios (16:9, 4:3, 21:9, etc.). Given W:H and one dimension, get the other. Responsive padding-top % for CSS aspect-ratio containers.

Pillar

Part of Frontend & Design.

Written by Mian Ali Khalid. Last updated 2026-05-13.

Favicon Generator & PNG to ICO Converter