Favicon Sizes Guide (2026): 16×16 to 512×512, Explained
Favicon Sizes Guide (2026): Everything You Need
A favicon is the little icon next to your site's title in the browser tab. It sounds trivial — until you notice your site showing a generic globe next to your carefully designed brand. The tricky part: there isn't one favicon size. Browsers, taskbars and phones each request a specific size, and using the wrong one means a blurry or missing icon.
The Favicon Sizes That Actually Matter
| Size | Where it's used |
|---|---|
| 16×16 | Browser tabs, bookmarks, history |
| 32×32 | Windows taskbar, hi-DPI tabs |
| 48×48 | Legacy Windows shortcuts |
| 64×64 | High-DPI Windows taskbar |
| 128×128 | Chrome Web Store (older) |
| 180×180 | Apple touch icon (iOS home screen) |
| 192×192 | Android / PWA icon |
| 512×512 | PWA manifest (required) |
The safest approach: generate the full set. Browsers silently pick the size they need — provide them all and your icon always looks crisp.
Why a Single 16×16 Icon Isn't Enough
If you only provide 16×16, tablets and phones will upscale it and blur it, and iOS will refuse it entirely for the home screen. A single high-res PNG doesn't work either — tiny tabs downscale it, losing the sharp edges. The correct pattern is a set, not one file.
How to Create a Favicon (2 Minutes)
- Open our **Favicon Generator tool**
- Upload your logo (a transparent PNG works best) — or pick an emoji to start instantly
- Set padding so the mark sits centered, and choose a background (transparent or solid)
- Download the pack or individual sizes (16 → 512 px)
- Add the files to your site
Everything runs in your browser — no upload, no account, no watermark.
Installing the Favicon Files
Place favicon-16x16.png and favicon-32x32.png in your site root, then add these lines to your HTML `<head>`:
- `link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"`
- `link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"`
- `link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"`
- `link rel="icon" href="/android-chrome-192x192.png" sizes="192x192" type="image/png"`
Next.js / React apps: export the PNGs, then add `favicon` or `icons` in your `metadata` — the framework injects the correct `link` tags for you.
Favicon Design Rules That Actually Matter
- Bold shapes, not fine detail — your mark must read at 16×16, where a 2px line is already huge
- Contrast — test against white, dark and colored tab themes
- Padding — a few pixels of breathing room keep the mark centered and legible
- No tiny text — anything smaller than a quarter of the canvas disappears at 16×16
Should You Export .ico or .png?
Modern browsers accept PNG favicons via `<link rel="icon">` — PNG covers Chrome, Edge, Firefox, Safari and Android. The old `.ico` format is only needed for legacy Internet Explorer scenarios. For almost every site today, a clean PNG set is the right answer.
Step Up Your Site Icon Game
Start from your existing logo — turn any image into a full favicon set in seconds:
Learn more: Favicon Generator Basics | Create a Favicon From an Image