Favicon sizes in 2026: the files and HTML you actually need
Favicon checklists online still ask for twenty-odd sizes. Browsers and phones have moved on, and a handful of files now covers everything from a browser tab to an Android home screen.
Short answer: five files cover every current browser and device: favicon.ico (16, 32 and 48 px inside), a 32 × 32 PNG, a 180 × 180 apple-touch-icon.png, and 192 × 192 and 512 × 512 PNGs listed in a web manifest. An optional SVG favicon is a nice extra. The long lists of 20+ sizes you still see online are mostly obsolete.
The files you need, and what uses each one
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Older browsers, Windows shortcuts, tools that request /favicon.ico directly |
| favicon-32x32.png | 32 × 32 | Browser tabs and bookmarks in current browsers |
| favicon-16x16.png | 16 × 16 | Optional; tabs on low-resolution screens (the ICO already covers it) |
| apple-touch-icon.png | 180 × 180 | iPhone and iPad home screen when someone adds your site |
| icon-192.png | 192 × 192 | Android home screen and installed web apps, via the manifest |
| icon-512.png | 512 × 512 | Android splash screens and app install prompts, via the manifest |
| icon.svg (optional) | Vector | Browsers that support SVG favicons; scales to any size |
The favicon generator on this site produces exactly this set from one image (apart from the SVG, which is your own logo file), together with the manifest and the HTML to paste.
The HTML to add to your page
Put the files in the root folder of your site and add these lines inside the head of every page:
- <link rel="icon" href="/favicon.ico" sizes="48x48">
- <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
- <link rel="icon" href="/icon.svg" type="image/svg+xml"> (only if you have an SVG)
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- <link rel="manifest" href="/site.webmanifest">
The manifest is a small JSON file that lists the 192 and 512 px icons along with your site name, theme colour and background colour. Browsers request /favicon.ico from the root automatically even without a link tag, so keep that file at the root even if you link everything else.
Sizes you can stop making
Older favicon checklists ask for a dozen Apple sizes (57, 60, 72, 76, 114, 120, 144, 152 px), Windows tile images with a browserconfig.xml file, and a separate Safari pinned-tab mask icon. For a normal website none of these are needed any more:
- Apple sizes: iOS scales the single 180 px apple-touch-icon down for every device.
- Windows tiles: pinned-site tiles were a feature of old versions of Windows and Internet Explorer.
- Safari mask icon: current Safari versions use your regular icons instead.
Extra files do no harm, but they are more to keep up to date when the logo changes.
Getting each icon to look right
Tiny tab icons (16 and 32 px)
At 16 px you have 256 pixels to work with. Detailed logos, thin lines and words turn to mush. Use the simplest form of your mark: a single letter, a symbol, or the logo without its wordmark. Check the result at actual size, not zoomed in. Strong contrast matters because tabs can be light or dark depending on the browser and theme.
Apple touch icon (180 px)
- Use a solid background. iOS does not display transparency on home-screen icons; transparent areas can end up filled with black or another colour you did not choose.
- Do not round the corners yourself. iOS applies its own rounded mask. Pre-rounded artwork ends up with odd double corners.
- Leave some padding so the logo does not touch the edges. Around 10–15% on each side usually looks right.
Android and manifest icons (192 and 512 px)
Android launchers may crop icons into circles, squircles or rounded squares depending on the phone. If you mark an icon as maskable in the manifest, keep the important part of the logo inside the central circle (roughly the middle 80%) so nothing gets cut off. If you are not sure, a plain icon with generous padding and a solid background is the safe option.
SVG favicons and dark mode
An SVG favicon stays sharp at every size and can even change colour for dark mode, using a prefers-color-scheme media query inside the SVG. Support is good in Chrome, Edge and Firefox but has been less consistent elsewhere, so always keep the ICO and PNG versions as a fallback. If you need PNG versions of an SVG logo for other uses, the SVG to PNG converter exports any size.
Favicons in Google search results
Google shows your favicon next to your site in mobile and desktop results. Its guidelines ask for a square icon that is a multiple of 48 px (48 × 48, 96 × 96, 144 × 144 and so on) or an SVG, linked from your home page and not blocked by robots.txt. The set above meets that through the 48 px layer of the ICO, the 192 px PNG and the SVG. After a change, Google can take days or weeks to pick up the new icon; check Google Search Central for the current requirements.
Website builders and CMSs
If you use a hosted platform, you usually upload one image and it generates the sizes for you:
- WordPress: look for the Site Icon setting, under Site Identity in the Customizer on classic themes or in the site settings on newer versions. Upload a square image of at least 512 × 512 px.
- Shopify, Squarespace, Wix and similar: the favicon is set in the theme or site settings, usually under a heading like branding, design or site identity. Again, upload a square image of 512 px or more.
In both cases a square PNG with a transparent or solid background works best; avoid uploading a wide logo and letting the platform squash it.
When the new favicon will not show
- Caching: browsers hold on to favicons for a long time. Try a private window or a different browser before assuming it is broken.
- Wrong path: open yoursite.com/favicon.ico directly. If you get a 404, the file is not in the root.
- Old link tags left in the theme: two sets of icon tags pointing at different files will confuse browsers. Remove the old ones.
- Home-screen icons are copied when someone adds the site, so people who added it before the change keep the old icon until they add it again.
Frequently asked questions
What size should a favicon be?
Design it at 512 × 512 px or larger, then export the set: favicon.ico with 16, 32 and 48 px inside, a 32 px PNG, a 180 px Apple touch icon and 192 and 512 px PNGs. The favicon generator makes all of them from one image.
Do I still need a favicon.ico file?
Yes, it is still worth having. Browsers and many other tools request /favicon.ico from your site root automatically, and it covers older browsers and Windows shortcuts.
Can a favicon have a transparent background?
Tab icons can, and usually look best that way. The Apple touch icon should have a solid background, because iOS does not show transparency on home-screen icons.
Why is my favicon not showing in Google results?
Google needs a square icon that is a multiple of 48 px (or an SVG), linked from your home page and crawlable. Even when everything is correct, it can take some time for search results to update.