A favicon is the small icon that appears in browser tabs, bookmarks, and search results. It's one of the first things users notice about your website, yet many developers skip it or use a generic one.
In this guide, you'll learn everything about favicons: what sizes you need, which formats to use, and how to add them to your HTML. Plus, we have a free favicon generator that does it all for you.
What Sizes Do You Need?
Modern browsers and devices expect favicons in multiple sizes. Here's the complete list:
| Size | Use Case | Required? |
|---|---|---|
| 16×16 | Browser tabs | Yes |
| 32×32 | Taskbar, newer tabs | Yes |
| 48×48 | Windows site icons | Recommended |
| 64×64 | High-DPI tabs | Optional |
| 128×128 | Chrome Web Store | If applicable |
| 180×180 | Apple Touch Icon | Yes (iOS) |
| 192×192 | Android Chrome | Yes (PWA) |
| 512×512 | PWA splash screen | Yes (PWA) |
At minimum, provide 16×16, 32×32, 180×180, and 192×192 versions.
Favicon Formats
PNG (Recommended)
PNG is the modern standard. It supports transparency, works everywhere, and produces crisp icons at all sizes.
ICO (Legacy)
The .ico format can contain multiple sizes in one file. It's only needed for Internet Explorer support, which is increasingly irrelevant in 2026.
SVG (Modern)
SVG favicons are supported in modern browsers and scale perfectly to any size. Use them alongside PNG fallbacks:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">HTML Code
Add these lines to the <head> of every page:
<!-- Standard favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android/PWA -->
<link rel="manifest" href="/site.webmanifest">Web Manifest (site.webmanifest)
For Progressive Web Apps, create a site.webmanifest file:
{
"name": "Your Site",
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}Design Tips
- Keep it simple. Favicons are tiny. Use 1-2 colors and a simple shape or letter.
- Test at 16×16. If it's not recognizable at the smallest size, simplify.
- Use your brand color. The favicon should match your site's color scheme.
- Consider dark mode. Ensure your favicon is visible on both light and dark backgrounds.
- Avoid text (mostly). A single letter works, but full words don't scale down.
Common Mistakes
- Using a full logo — it becomes unreadable at 16×16
- Forgetting the Apple Touch Icon — iOS uses it for home screen bookmarks
- Not testing on mobile — favicons look different on phones
- Using JPEG format — no transparency, larger file size
Create favicons from text, emoji, or images. All sizes, free.
Quick Method: Text-Based Favicon
Don't have a logo? A simple letter on a colored background works great. Our favicon generator makes this easy — just type a character, pick colors, and download all sizes.
Checking Your Favicon
After deploying, verify your favicon works:
- Open your site in a new tab — check the tab icon
- Bookmark the page — check the bookmark icon
- On iOS, add to home screen — check the app icon
- Use Favicon Checker for a full audit