The little icon in your browser tab, the tile on a phone home screen, the logo next to a saved bookmark — they all come from the same family of files, and they all need different sizes. This guide explains which icons a website actually needs, what each size is for, and how to generate every one of them from a single image — free and entirely in your browser.
Which Icon Files Does a Website Need?
Browsers, operating systems and search engines each look for different icon files. The good news: you only need a handful, and most sites can get away with these:
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16/32/48 (packed) | Legacy browsers, bookmarks, address bar |
| favicon-32x32.png | 32×32 | Modern browsers (Chrome, Firefox, Edge) |
| favicon-16x16.png | 16×16 | Small tabs and favicon fallbacks |
| apple-touch-icon.png | 180×180 | iOS / iPadOS home screen and Safari |
| icon-192x192.png | 192×192 | Android / Chrome install prompt |
| icon-512x512.png | 512×512 | PWA installability and splash screens |
Add them to your HTML like this:
<link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
What Is favicon.ico and Why Still Use It?
favicon.ico is the classic multi-image icon format: one file contains several sizes (usually 16, 32 and 48), and the browser picks the best one. Modern versions of the format embed PNG images, so they support full transparency. Even though PNG favicons are now the norm in modern browsers, favicon.ico remains the safe fallback — bookmarks, older engines and some address bars still look for it.
Why PWA Icons Matter (Installability)
If you want visitors to install your site as an app — the "Add to Home Screen" prompt on Android and Chrome — your web manifest must include at least a 192×192 and a 512×512 icon. Missing or undersized icons silently disable the install prompt, which is why many sites lose that feature without realizing it. Generating all sizes up front avoids the surprise later.
Generate Everything from One Image
- Prepare the source: a square, bold, high-contrast logo works best at 16px. Transparent PNG sources keep transparency in every output.
- Upload it: open the favicon generator and click or drag your image.
- Pick a fit mode: center-crop for square designs, stretch for full-bleed, or fit for padding.
- Choose a background: keep transparency, or add a white background if your icon is dark and your browser theme is light.
- Add custom sizes: need a 64×64 or 96×96? Type the size and add it to the set.
- Download: grab each file individually or download everything as a ZIP, then place the files in your site root.
Tip: small icons (16–48px) are rendered from a 512×512 intermediate canvas with high-quality filtering, so edges stay as smooth as possible. Keep fine text out of designs that will be viewed at 16px.
Common Pitfalls
- Only a favicon.ico: modern browsers will upscale the 32px image for the tab — use a dedicated 32×32 PNG for crisp tabs.
- Missing 192/512 icons: the PWA install prompt silently disappears.
- Opaque background forced onto a transparent logo: pick "Transparent" unless you specifically need white.
- Not updating the manifest: point
site.webmanifestat the generated icon paths.
Frequently Asked Questions
Do I still need favicon.ico if I have PNG favicons?
Yes, as a fallback. Modern browsers prefer PNG, but favicon.ico is still requested by bookmarks, legacy engines and some address bars. It's one small file that costs nothing to keep.
Can favicon.ico have a transparent background?
Yes. Modern ICO files embed PNG data (16/32/48), which preserves full alpha transparency — a transparent PNG source stays transparent.
Why doesn't my site show the "Add to Home Screen" prompt?
The most common cause is missing 192×192 and 512×512 icons (or wrong paths) in the web manifest. Generate both sizes and point site.webmanifest at them.
Are my images uploaded when I generate icons?
No. The favicon generator renders every icon locally with Canvas — your image never leaves your device.
References
- Web app manifests and icons — MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/Manifest
- Favicon best practices — web.dev: https://web.dev/favicon-best-practices/