What files a favicon package should include
A complete package is seven files. The last column is the practical test: what visibly goes wrong if you leave that file out.
| File | Size | Used by | Without it |
|---|---|---|---|
| favicon.ico | 16, 32, 48 px | Anything that asks for /favicon.ico, Windows shortcuts | 404s in your logs; a blank icon in feed readers and older tools |
| favicon-16x16.png | 16×16 | Browser tabs on standard screens | The browser scales the 32 px file down, often blurrier |
| favicon-32x32.png | 32×32 | Tabs on high-DPI screens, Windows taskbar | Browsers fall back to the ICO |
| apple-touch-icon.png | 180×180 | iPhone and iPad home screen | iOS shows a screenshot of the page or a letter tile |
| android-chrome-192x192.png | 192×192 | Android home screen | Android uses a low-resolution favicon or a letter |
| android-chrome-512x512.png | 512×512 | Install prompt and splash screen | Chrome will not offer to install the site as an app |
| site.webmanifest | JSON | Android, Chrome and Edge | The two Android icons are never found |
The ZIP also contains favicon-tags.html, a copy of the HTML below, so the snippet travels with the files when you hand them to someone else.
Which favicon sizes are needed in 2026?
Five pixel sizes: 16, 32, 180, 192 and 512, plus 48 inside the ICO. The list shrank over the years because devices got better at scaling:
- Apple touch icons once came in 57, 72, 76, 114, 120, 144, 152 and 167 px versions. Every iPhone and iPad since iOS 8 takes the 180 px file and scales it down.
- Windows tiles (
mstile-*.pngandbrowserconfig.xml) were for the Windows 8 and 10 Start screen. Edge no longer reads them. - Safari's pinned-tab mask icon (
safari-pinned-tab.svg) only ever affected pinned tabs in Safari on macOS. Since Safari 12 shows regular favicons in tabs, most sites have dropped it. - Extra Android sizes (36, 48, 72, 96, 144 px) are generated by Android itself from the 192 and 512 px manifest icons by scaling.
The favicon sizes guide explains where each remaining size appears, and Apple and Android icons covers padding and maskable icons for the home screen.
The HTML and manifest, line by line
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
- The ICO line is declared as
32x32, notany. With “any”, Chrome prefers the ICO over the sharper PNGs on the next two lines. - The two PNG lines let each browser take the exact size it needs instead of scaling.
apple-touch-iconis the only line iOS reads for the home screen. It ignores the manifest.- The manifest line points Android and Chrome to the 192 and 512 px icons.
{
"name": "My Website",
"short_name": "Website",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"start_url": "/",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}theme_color tints the Android status bar and the title bar of an installed app; background_color fills the splash screen while the app loads. Use your brand colour for one and the page background for the other. The fields in the tool above rewrite this JSON as you type.
Where to upload favicon files
The files belong in whatever folder your site serves from /. That folder has a different name on each platform:
| Platform | Put the files in | Then |
|---|---|---|
| Plain HTML / shared hosting | public_html/ or the folder with index.html | Paste the tags into every page, or your header include |
| Next.js (App Router) | public/ — or app/favicon.ico, app/icon.png, app/apple-icon.png | With the app/ files, Next.js writes the tags itself |
| Vite, Create React App, Astro | public/ | Paste the tags into index.html or the base layout |
| Hugo, SvelteKit | static/ | Add the tags to the base template |
| GitHub Pages project site | The repository root | Enter /repo-name in the Folder field so the paths include it |
| WordPress | Not needed — use Site Icon | See the WordPress favicon guide |
| Shopify | Not needed — upload one image in the theme editor | See the Shopify favicon guide |
Detailed steps: how to add a favicon, WordPress favicon and Shopify favicon.
How to test whether a favicon works
- Open each file directly. Visit
/favicon.ico,/apple-touch-icon.pngand/site.webmanifeston your domain. Each must load, not show a 404 or your home page. - Check the content types. From a terminal:
curl -sI https://yoursite.com/favicon.ico | grep -i content-type curl -sI https://yoursite.com/site.webmanifest | grep -i content-type
Expectimage/x-icon(orimage/vnd.microsoft.icon) andapplication/manifest+json(application/jsonalso works). - Read the manifest in DevTools. In Chrome or Edge, open DevTools → Application → Manifest. It lists the icons it found and flags any it could not load.
- Look at a private window. Favicon caches are stubborn; a private window shows what new visitors see.
- Try a phone. On iPhone, Share → Add to Home Screen should show your 180 px icon, not a screenshot. On Android, Chrome's menu → Add to home screen uses the 192 px icon.
- Run the favicon checker. It fetches your page like a browser would and reports each tag and file as present, missing or broken.
Google Search shows the new icon only after it recrawls your home page, which can take weeks. See favicon not showing in Google.
Favicon package FAQ
Why does the package have only seven files when other generators produce twenty?
Most of the extra files serve devices and browsers that no longer exist: Windows 8 tiles, the Safari pinned-tab mask icon and Apple touch icons for iOS 6. Current iPhones downscale the 180 px icon, and Android picks from the 192 and 512 px icons in the manifest. Seven files cover every current browser, phone and search engine.
Do I need site.webmanifest if my site is not a web app?
It is still worth shipping. Android uses the manifest icons when someone adds your site to the home screen, and some browsers read it for the app name and theme colour. If you do not want an installable app, set display to “browser”.
What should short_name be?
The label shown under the icon on a phone home screen. Keep it to about 12 characters or it will be cut off with an ellipsis. name is used where there is more room, such as install dialogs.
My files cannot go in the site root. What do I change?
Enter the folder in the Folder field, for example /icons or /my-project for a GitHub Pages project site. The HTML tags and the icon paths inside site.webmanifest are updated to match. If the whole site lives in that folder, as on a GitHub Pages project site, also change start_url in the manifest to the same path. Browsers still request /favicon.ico from the domain root, so put a copy there if you can.
Should the Android icons be maskable?
Only if the design fits inside the central 80% of the square, because Android crops maskable icons to circles and other shapes. The icons here are declared as standard icons, which Android shrinks onto a white shape instead of cropping. Add padding of about 10–15% if you later mark them as maskable.
Does the package include an SVG favicon?
No. The package is generated from a picture, and an SVG made from a bitmap would just wrap the same pixels. If you have the logo as a real SVG, ship it as favicon.svg next to this package and add <link rel="icon" href="/favicon.svg" type="image/svg+xml">.
Related tools and guides
- Favicon generator — no logo yet? Build the same package from text, an emoji or an icon.
- Image to favicon — just the PNG sizes, each downloadable on its own.
- Favicon ICO generator — only favicon.ico, with a choice of layers.
- SVG to favicon — for vector logos and SVG favicons with dark mode.
- Favicon best practices — design rules for icons that stay readable at 16 px.