Favicon tutorials love to prescribe twenty files: 57×57, 72×72, 114×114, 152×152… That list is a fossil from 2013. Modern browsers, iOS and Android are covered by five files and two lines of manifest. Here is the short list, the HTML to paste, and the reasoning — so you can delete the other fifteen files with confidence.
The five files you actually need
| File | Size | Who uses it |
|---|---|---|
favicon.svg | vector | modern browsers — sharp at every size, dark-mode capable |
favicon.ico | 32×32 | legacy browsers, crawlers and tools that request /favicon.ico blindly |
apple-touch-icon.png | 180×180 | iOS home screen and Safari |
icon-192.png | 192×192 | Android / PWA install |
icon-512.png | 512×512 | Android splash / PWA, app stores |
The HTML
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">…and inside manifest.webmanifest:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}Drop one SVG or PNG — get all five files, the ICO, the manifest and the HTML, zipped. Free, in your browser.
Design rules that survive 16 pixels
- One shape, not a scene. At tab size a favicon is ~16 CSS px. A single bold glyph or mark reads; a miniature logo lockup with text does not.
- Test on dark tabs. Browser UIs are dark for half your visitors. An SVG favicon can carry a
prefers-color-schememedia query inside it; otherwise avoid pure-black marks on transparency. - Solid background for the Apple icon. iOS composites transparency onto black. Give apple-touch-icon.png its own background colour.
- Mind the maskable safe zone. Keep the mark inside the centre 80% of the 512 px icon so Android's circular masks do not amputate it.
Starting from an existing logo
If your logo is an SVG, you are two minutes away: the favicon generator renders every size from it with live previews of tab, home-screen and Android shapes, and lets you set the Apple background colour and maskable padding before downloading the set. Starting from a PNG works too — use the largest, squarest version you have. Need just one odd size for some platform's form? The SVG to PNG converter renders any exact pixel size.