Favicon Sizes in 2026: What You Actually Need (and What to Skip)
The favicon size lists online are twenty files long. Four cover essentially everything. Which files to generate, the HTML to paste, and how to design one that reads at 16px.
Updated August 11, 20265 min read
Search for favicon sizes and you get lists of twenty files, half of them for platforms that no longer exist. The genuinely load-bearing set in 2026 is four items: an ICO for legacy compatibility, an SVG if you have vector art, a 180×180 PNG for iOS home screens, and 192/512 PNGs for Android and progressive web apps. Everything else on those lists is either covered by one of the four or serves a platform with negligible share.
The files that matter
| File | Size | Purpose | Still needed? |
|---|---|---|---|
favicon.ico | 16, 32, 48 in one file | Browser tabs, bookmarks, legacy fallback | Yes |
icon.svg | Vector | Modern browsers; supports dark mode | If you have vector art |
apple-touch-icon.png | 180 × 180 | iOS home screen | Yes — one size covers all devices |
icon-192.png | 192 × 192 | Android home screen | Yes |
icon-512.png | 512 × 512 | PWA install dialog and splash | Yes, if you ship a manifest |
| Windows tiles | 70–310 | Windows 8/10 Start tiles | Rarely — legacy |
The ICO format is worth understanding because it is unusual: a single .ico file can contain several sizes, and the browser picks the one it needs. That is why one file covers 16, 32 and 48 rather than needing three.
Apple simplified its side considerably — 180 × 180 is now the only touch icon size you need, and both older and newer devices scale that one file. The long lists of 57, 72, 114 and 144 pixel Apple icons are years out of date.
Design for 16 pixels, not for your logo
This is where most favicons fail. A full wordmark shrunk to 16 × 16 is an unreadable smudge — at that size you have roughly the detail of a single letter. The favicon's job is to be recognisable in a row of twenty tabs, not to reproduce the brand.
- Use one letter or one mark, not the full logo. The first initial, the icon half of a combination mark, or a single distinctive shape.
- Drop fine detail. Thin strokes, gradients and outlines disappear or turn to mush. Solid shapes survive.
- Use high contrast against both light and dark. Browser tab bars come in both, and a dark mark on a dark tab bar vanishes.
- Fill the square. Large transparent margins make the mark smaller than it needed to be. Leave only a little breathing room.
- Test at actual size. Not zoomed in your editor — at 16 pixels, in a real browser tab, next to other tabs.
Generating the files
Start from a square, transparent source
Ideally 512 × 512 or larger. If your logo sits on a white box, cut it out with the background remover; if it is not square, crop it with the cropper rather than letting the generator letterbox it.
Generate the set
The favicon generator produces favicon.ico (16, 32 and 48 in one file), PNG favicons at 16, 32, 48 and 96, the 180 × 180 Apple touch icon, the 192 and 512 PNGs for Android and installable web apps, a site.webmanifest and an HTML snippet to paste — all in one zip. Android density icons, Windows tiles and an SVG copy of a vector source are added with Pro.
Fill in the manifest details
The 512 × 512 icon and site.webmanifest are already in the pack — the PWA icons are on by default. Before you generate, set the app name, short name and theme colour in the generator so the manifest carries them; it already points at the 192 and 512 icons for you.
Drop the files at the site root and add the tags
Root placement matters: browsers request /favicon.ico directly whether you declare it or not.
Drop in a logo, get the full favicon pack as one zip. Generated on your device — the logo is never sent to a server.
Generate a faviconThe HTML you need
Four lines in the <head> cover every current browser and platform. More than this is almost always legacy cruft copied from an old tutorial:
<link rel="icon" href="/favicon.ico" sizes="32x32">— the compatibility baseline.<link rel="icon" href="/icon.svg" type="image/svg+xml">— modern browsers prefer this when present.<link rel="apple-touch-icon" href="/apple-touch-icon.png">— iOS home screen.<link rel="manifest" href="/site.webmanifest">— points at the 192 and 512 icons for Android and PWA install.
An SVG favicon has a genuine advantage beyond scaling: it can respond to the browser's colour scheme with a prefers-color-scheme media query inside the SVG, so a dark mark can flip to light on a dark tab bar. Keep the ICO alongside it — SVG favicons work in Chrome, Firefox, Edge and, since Safari 26, Safari, but older browsers and other tools still want the ICO as the fallback.
Why your new favicon has not appeared
Favicons are cached unusually aggressively — often beyond a normal hard refresh, and sometimes independently of the page cache entirely. Before assuming your file is wrong, open it directly at https://yoursite.com/favicon.ico to confirm it is being served, then try a private window, which usually starts with a clean icon cache.
If it is genuinely stuck, adding a query string to the link tag (/favicon.ico?v=2) forces a re-fetch. And check the file size while you are there: favicons are requested on essentially every page load, so a 200KB icon is worth running through the PNG compressor. A well-made favicon set is a few kilobytes in total.
Frequently asked questions
What favicon sizes do I actually need in 2026?
Four things cover it: a `favicon.ico` containing 16, 32 and 48 pixel versions, an SVG if you have vector art, a 180 × 180 Apple touch icon, and 192 and 512 pixel PNGs referenced from a web manifest. The longer lists you find online are mostly legacy Apple and Windows sizes.
Can I use a PNG instead of favicon.ico?
Modern browsers accept PNG and SVG favicons, but browsers still request `/favicon.ico` from the site root by default, and some tools and feed readers expect it. Ship the ICO as a fallback and let modern browsers prefer the SVG or PNG you declare.
Why does my favicon look blurry?
Usually because it was generated from a source smaller than the largest output size, so it was upscaled. Start from at least 512 × 512. It can also be over-detailed — thin strokes and gradients turn to mush at 16 pixels regardless of source quality.
How do I make a favicon from my logo?
Crop the logo to a square, remove any background so it has real transparency, simplify it to a single mark or letter, then run it through a generator to produce the ICO and PNG set. Test the result at 16 pixels in a real tab before shipping it.