Favicon Sizes in 2026: Every File You Actually Need
A favicon is the small icon that represents your site in browser tabs, bookmarks, history, search results, and on phone home screens. The advice online is a mess of legacy sizes from a decade ago. Here's what actually matters in 2026 — a short list, not the 20-file dumps some generators still produce.
What size should a favicon be?
Short answer: a favicon isn't a single size — it's a small set. The most important dimension is 32×32 pixels for modern browser tabs, with 16×16 for legacy displays; both live inside one favicon.ico. For phones and installable web apps you also want a 180×180 Apple touch icon and 192×192 and 512×512 PNGs. Here are the favicon dimensions that actually matter in 2026:
| Size (px) | File | Where it's used |
|---|---|---|
| 16×16 | favicon.ico | Legacy browser tabs and the address bar |
| 32×32 | favicon.ico | Modern browser tabs and bookmarks — the key size |
| 48×48 | favicon.ico | Windows site shortcuts and taskbar |
| 180×180 | apple-touch-icon.png | iOS home-screen icon |
| 192×192 | icon-192.png | Android home screen (via web manifest) |
| 512×512 | icon-512.png | PWA install and splash screens |
| Scalable | icon.svg | Modern browsers, any size, light/dark variants |
You don't have to make these by hand — our favicon generator exports every size above (plus the .ico, manifest, and HTML snippet) from a single image, letter, or emoji.
The files that matter today
- favicon.ico (16, 32, 48px): a single multi-resolution
.icofile is still the most compatible base. Browsers pick the sharpest size for tabs and bookmarks. - icon-192.png and icon-512.png: used by Android and Progressive Web Apps, referenced from a web manifest. The 512px version is also the source for splash screens.
- apple-touch-icon.png (180px): shown when someone adds your site to an iOS home screen. iOS ignores
.ico, so this is required for a sharp Apple icon. - An SVG icon (optional but recommended): a single scalable file modern browsers can use at any size, and it supports light/dark variants.
That's it. You do not need separate 57px, 72px, 114px, or 144px Apple icons anymore — those targeted long-obsolete iOS versions.
The HTML to add
Place these tags in the <head> of every page:
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" type="image/svg+xml" href="/icon.svg"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest">
The manifest then references your 192 and 512px PNGs for Android and PWA installs. Our favicon generator produces every one of these files — plus the manifest and a ready-to-paste snippet — from a single image, letter, or emoji.
Designing an icon that reads at 16px
The hardest part of a favicon isn't the export, it's the design. At 16 × 16 pixels there's room for one idea, not your full logo. Tips that help:
- Simplify. Drop wordmarks and fine detail; use a single glyph, monogram, or shape.
- High contrast. The icon sits on tabs of unknown color; a solid background keeps it legible.
- Test small. Shrink your design to 16px and check it's still recognizable before committing.
If you don't have a logo yet, a single letter or emoji on a colored background makes a perfectly good favicon — the generator can build one in seconds.
What format should a favicon be?
The practical answer in 2026 is ICO + PNG + (optional) SVG, not one format alone:
- ICO — still the most compatible file for tabs and bookmarks. Put 16, 32, and 48px frames in one
favicon.ico. - PNG — use for Apple (180px) and Android/PWA (192 and 512px). PNG keeps edges clean and supports transparency when you need it.
- SVG — best for crisp scaling and light/dark variants in modern browsers. Keep ICO/PNG as fallbacks; don't rely on SVG alone.
Avoid serving only a random favicon.png with no ICO and no Apple icon — that's the most common reason a site looks fine on a laptop and broken on a phone.
WordPress favicon size
In WordPress (Appearance → Customize → Site Identity, or your theme's Site Icon control), upload a square image at least 512×512 pixels. WordPress generates the smaller sizes from that master file. A 512×512 PNG is the safest source: sharp enough for PWA icons, and WordPress can downscale cleanly for tabs.
If the customizer crops oddly or your theme ignores Site Icon, drop a hand-built set from the favicon generator into your theme/root and add the <link> tags above in your header template (or via a small plugin that injects head markup).
Wix favicon size
Wix asks for a site icon under Settings → Website Settings → Favicon. Use a square PNG, ideally 256×256 or larger (512×512 is fine). Wix resizes it for the tab; a blurry result usually means the upload was tiny or heavily compressed. Generate a clean square master first, then upload — don't stretch a wide logo into the square crop.
Common mistakes
- Only providing a PNG named favicon.png. Some browsers still expect
favicon.ico; provide both. - Forgetting the apple-touch-icon. Without it, iOS generates a blurry screenshot of your page instead of your icon.
- Caching. Browsers cache favicons aggressively. After updating, hard-refresh or test in a private window.
- Uploading a full logo with tiny text. At 16px the words vanish — use a monogram or simple mark.
Quick FAQ
- What size is a favicon? For the tab icon, think 32×32 (with 16×16 in the same ICO). For phones and installs, also ship 180, 192, and 512px PNGs.
- What size should a favicon.ico be? The
.icoitself is multi-size — include 16, 32, and 48px frames in one file. - What's the best favicon image size to start from? Design or export a square at 512×512, then generate the smaller files from it.
Ready to export the full package? Use the free online favicon generator — it builds the ICO, Apple icon, Android icons, manifest, and HTML snippet in your browser.