The favicon is the smallest design asset on your site and the one users see most — in every tab, bookmark and home-screen shortcut. Getting it right takes five minutes if you know which files matter.
The sizes that actually matter
Guides from 2015 list twenty sizes. In practice, modern browsers and devices need a handful:
| File | Size | Used by |
|---|---|---|
| favicon-16x16.png | 16px | Browser tabs |
| favicon-32x32.png | 32px | Tabs on high-DPI screens, bookmarks |
| apple-touch-icon.png | 180px | iOS home screen |
| favicon-192x192.png | 192px | Android home screen (via manifest) |
| favicon-512x512.png | 512px | Android splash / PWA install |
Generate the whole pack
Drop one square logo and download every size plus the manifest, zipped.
Open Favicon Pack GeneratorPNG vs ICO vs SVG
- PNG is the workhorse — universally supported, crisp, small. Use it for everything above.
- ICO is the legacy Windows format that can bundle several sizes in one file. Still useful as a root
/favicon.icofallback for old crawlers, but no longer required. - SVG favicons scale perfectly and can even adapt to dark mode, with good modern-browser support — ship one alongside PNGs, not instead of them.
Design tips for 16 pixels
- Simplify ruthlessly. Your full logo will be mush at 16px — use a single letter, glyph or shape.
- Fill the canvas. Tiny margins waste your only pixels; bleed the mark close to the edges.
- Check contrast on dark tabs. Browsers have dark UIs now — a near-black mark disappears. A subtle background plate fixes it.
- Test in a real tab, pinned and unpinned, before shipping.
The HTML you need
Link the pack in your <head>: the two small PNGs with rel="icon", the 180px rel="apple-touch-icon", and a site.webmanifest that points at the 192/512px icons. Our generator writes that manifest for you and includes a README with the exact tags to paste. Resize source art first with the Crop tool so the input is perfectly square.