How to Create a Favicon (All Sizes)
A favicon is a tiny brand asset that appears in tabs, bookmarks and phones. Get the sizes and the HTML right once and forget it.
Updated 16 September 2026
·
7 min read
Advertisement
What a favicon is
A favicon is the small icon shown in browser tabs, bookmarks, history and on mobile home screens when a site is saved. It is a small detail that signals professionalism and aids recognition.
Generate the full set with the free favicon generator.
The sizes that matter
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 16, 32, 48 | Legacy / fallback |
| favicon-32.png | 32×32 | Modern browsers |
| favicon-16.png | 16×16 | Small tabs |
| apple-touch-icon.png | 180×180 | iOS home screen |
| icon-192.png | 192×192 | Android / PWA |
| icon-512.png | 512×512 | PWA splash / stores |
Add the HTML
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
Use a PWA manifest to cover Android and installable apps.
Design tips
- Simple shapes — a tiny icon cannot hold detail.
- High contrast so it reads at 16px.
- Test at 16px before you commit.
- Avoid text; use a mark or monogram.
- Match your brand colour.
Social sharing image is separate
A favicon is not your Open Graph image (the large preview on social posts). Build a 1200×630 image with the OG image generator.
Troubleshooting
- Not showing — hard refresh; check the path is correct.
- Blurry — you supplied only a small size; add larger ones.
- Wrong icon on iOS — missing
apple-touch-icon. - Android shows nothing — no manifest or missing 192/512 icons.
Generate the set
Drop one square logo into the favicon generator and download every size at once — free and private.
Advertisement