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.

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).

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-04-25.

Favicon Generator

Live Market Insight