What is a favicon?
A favicon (favorites icon) is the small symbol shown in the browser tab, in bookmarks and in the address bar next to the URL. The name dates back to the Internet Explorer favorites bar, where the icon first appeared.
Today "favicon" is an umbrella term for all of a website's app icons — from the 16×16-pixel tab icon to the 512×512-pixel PWA splash-screen icon.
⚡ Get started: Use our free favicon generator — upload a logo, generate every size at once and download it as a ZIP.
Which sizes do I need?
Depending on the use case, different sizes are needed:
| Size | Use | Filename |
|---|---|---|
| 16×16 | Browser tab (standard) | favicon-16.png |
| 32×32 | Browser tab (crisp), Windows taskbar | favicon.png / favicon-32.png |
| 48×48 | Windows taskbar | favicon-48.png |
| 96×96 | Android / shortcut | favicon-96.png |
| 180×180 | Apple Touch Icon (iPhone/iPad) | apple-touch-icon.png |
| 192×192 | Android PWA / home screen | icon-192.png |
| 512×512 | PWA splash screen, Google Play | icon-512.png |
The traditional favicon.ico
Older tutorials recommend a favicon.ico in the root directory — a container format that stores several sizes (16×16, 32×32, 48×48) in one file. Today a favicon.ico is no longer strictly required: modern browsers fully support PNG favicons, and a single 32×32 PNG is enough for browser tabs.
Exception: if you need maximum compatibility with very old browsers, a favicon.ico (without an HTML tag, simply placed in the root) can serve as a fallback.
The Apple Touch Icon
When an iPhone user adds a website to their home screen, the Apple Touch Icon is displayed — much like an app. The standard size is 180×180 pixels. Apple rounds the corners automatically, so no manual rounding is needed.
Important details:
- No transparent background — Apple fills transparency with black
- A colored, opaque background is recommended
- Filename: apple-touch-icon.png (iOS looks for it automatically even without a link tag)
- Declare it explicitly with a link tag for best control
PWA icons (Progressive Web App)
For a full PWA install (add to home screen on Android, Windows etc.), two core sizes are needed:
- 192×192 px — for Android home-screen icons
- 512×512 px — for splash screens and high-density displays
Also recommended: a maskable icon — a version with extra padding (safe zone) that Android crops into various shapes (circle, square, rounded square). Our PWA generator creates maskable icons automatically.
The complete HTML code
This code belongs in the <head> of every page:
<link rel="icon" type="image/png" href="/favicon.png">— standard favicon<link rel="apple-touch-icon" href="/apple-touch-icon.png">— iOS home screen<link rel="manifest" href="/manifest.json">— PWA manifest<meta name="theme-color" content="#f97316">— browser UI color
Step by step: create a favicon
- 1. Prepare a square SVG or 512×512 PNG logo — the simpler the better (details become unreadable at 16px)
- 2. Generate all sizes — with our favicon generator in one step
- 3. Copy the files into your public/ directory
- 4. Add the HTML code to <head>
- 5. Test — browser tab, iPhone home screen, Chrome DevTools → Application → Manifest
Design tips for favicons
- Simplicity beats detail — at 16px, fine details disappear
- Use a high-contrast background so the icon stands out in the tab
- Avoid letters smaller than 10px — they become illegible
- Test your icon in different browser themes (dark-mode tab bar!)
- For dark mode you can provide a second icon via
media="(prefers-color-scheme: dark)"
Conclusion
A professional favicon setup today needs more than a single 16×16 favicon.ico. With our favicon generator or PWA generator you can create every required size automatically — including the Apple Touch Icon, PWA icons, maskable icons, manifest.json and ready-to-use HTML code.