The favicon is one of the smallest but most recognizable parts of your website. That tiny icon in browser tabs helps users identify your site among dozens of open tabs. Getting it right matters.
What Is a Favicon?
Short for "favorite icon," the favicon appears in:
- Browser tabs
- Bookmarks and favorites
- Mobile home screen shortcuts
- Browser history
- Search results (sometimes)
Create yours with our favicon generator.
Essential Favicon Sizes
Modern websites need multiple sizes:
Minimum Required
- 32×32 pixels: Standard browser tab icon
- 16×16 pixels: Very small displays
Recommended Additions
- 180×180: Apple Touch Icon (iOS home screen)
- 192×192: Android Chrome
- 512×512: Android PWA splash screens
- 150×150: Windows tiles
Favicon Formats
ICO (Traditional)
- Contains multiple sizes in one file
- Maximum compatibility
- Supported everywhere including older IE
PNG
- Modern standard
- Supports transparency
- Crisp at all sizes
- Separate file per size
SVG
- Scales perfectly to any size
- Smaller file size
- Limited browser support for favicons
- Good for high-DPI displays
HTML Implementation
Basic setup in your HTML head:
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG versions -->
<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">
<!-- Web App Manifest (for Android) -->
<link rel="manifest" href="/site.webmanifest">Design Best Practices
Keep It Simple
At 16×16 pixels, detail is lost. Use:
- Simple shapes
- Bold colors
- High contrast
- Single letters or icons
Test at Small Sizes
Design at large size but check at actual favicon size. What looks good at 512px might be unrecognizable at 16px.
Consider Dark Mode
Light favicons disappear on dark tab bars. Add borders or use colors that work on both light and dark backgrounds.
Match Your Brand
Use your logo, brand colors, or a recognizable element from your visual identity.
Common Favicon Mistakes
- Too complex: Intricate details become muddy at small sizes
- Wrong format: Using JPEG (no transparency support)
- Missing sizes: Only providing one size looks blurry elsewhere
- Poor contrast: Invisible against certain backgrounds
- Forgetting touch icons: Mobile shortcuts look unprofessional
Web App Manifest
For PWAs and Android home screen icons, create site.webmanifest:
{
"name": "My Website",
"short_name": "MySite",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Testing Your Favicon
- Check in multiple browsers (Chrome, Firefox, Safari, Edge)
- Test on mobile devices
- Add to home screen on iOS and Android
- Verify in incognito/private mode (no cached version)
- Check both light and dark mode tabs
Favicon Generator Tools
Our favicon generator creates all necessary sizes from a single image:
- Upload one high-resolution image
- Automatically generates all sizes
- Downloads as ready-to-use package
Related tools:
- Image Resizer - Adjust source images
- Image Compressor - Optimize file sizes
A proper favicon setup takes minutes but improves your site's professionalism and recognizability across all platforms.
