What size should a favicon actually be?
Favicons used to be one tiny 16×16 file. Now there's a handful of sizes and formats. Here's the short, no-jargon answer on what you actually need in 2026.
A favicon is the little icon in your browser tab. It's also the icon people see when they bookmark your site or save it to their phone's home screen. It's small, but a blank or blurry one makes a site feel unfinished.
The confusing part: there isn't one favicon anymore. Browsers, phones, and operating systems each want a slightly different size. Here's what's worth caring about.
The short answer
You need a few files, not one:
favicon.icois the classic tab icon. It bundles 16×16, 32×32, and 48×48 so browsers pick what they need.apple-touch-icon.png(180×180) is what iPhones and iPads use when someone saves your site to their home screen.- 192×192 and 512×512 PNGs cover Android and progressive web apps (the "install this site as an app" feature).
- An SVG icon (optional but nice) scales perfectly to any size and can even adapt to dark mode.
That's the set. You don't need 12 files like some old tutorials say.
Why so many sizes?
Different surfaces, different resolutions. A browser tab is tiny, so 16×16 or 32×32 is plenty. A phone home screen icon sits next to your real apps, so it needs to be sharp at 180 or 192 pixels. The big 512×512 is for splash screens and app stores.
Make one clean image and export it to all of these, and every surface gets a crisp version.
Start big, scale down
The most common favicon mistake: starting from a tiny image. If you design at 16×16 and try to scale up, it turns to mush.
Do the opposite. Make your icon at 512×512 (or bigger), keep the shape simple and bold, then generate the smaller sizes from it. A logo with thin lines or tiny text disappears at 16 pixels, so simplify. Think one strong shape, not your full wordmark.
Don't forget the manifest
There's one more file: site.webmanifest. It's a small text file that tells phones your app name, colors, and which icons to use when someone installs your site. Without it, the "add to home screen" experience looks half-baked.
You also need a few lines in your page's <head> so browsers know where to find all these files.
The easy way
Setting all this up by hand is fiddly. Our sigil tool does the whole set for you: drop in one PNG and it spits out favicon.ico, the apple-touch-icon, the 192 and 512 PWA icons, a ready-to-paste site.webmanifest, and the exact <head> snippet to copy in. It runs entirely in your browser, so your image never leaves your machine.
Make your icon once, big and simple, and let the tool handle the rest. Try sigil.