🖼️ Image Tools
🌐 How to Create a Favicon for Your Website: All Sizes and Platforms
Complete favicon guide. All required sizes for browsers, iOS, Android, and PWAs. Design tips for tiny icons, HTML implementation code, and fixing cache issues.
⏱️ 5 min read🦉 365tool.net🌍 For everyone worldwide
All Required Favicon Sizes
| Size | Context | Platform |
|---|
| 16×16px | Browser tab icon — the most seen | Classic browser tab |
| 32×32px | Taskbar and Windows shortcuts | Desktop shortcut |
| 48×48px | Windows desktop shortcuts | System icon |
| 180×180px | Apple Touch Icon — iOS home screen | iPhone/iPad |
| 192×192px | Android Chrome home screen | Android |
| 512×512px | PWA splash screen and app stores | Progressive Web App |
Designing for Tiny Sizes
The hardest challenge: readability at 16×16px — a 256-pixel canvas. Here is what works and what fails:
| Design Element | At 16px |
|---|
| Single bold letter or initial | ✅ Works perfectly at all sizes |
| Simple geometric shape | ✅ Clear even at 16px |
| Dramatically simplified logo | ✅ With simplification |
| Detailed multi-element logo | ❌ Unreadable at 16px |
| Text longer than 2 characters | ❌ Illegible at small sizes |
| Photographic content | ❌ Becomes a blur |
Workflow: Design at 512×512px → simplify until instantly recognizable at 16px → generate all sizes.
HTML Implementation
Upload all generated files to your website root, then add to your <head>:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
The Favicon Generator outputs all files and provides this snippet ready to copy.
Fixing Browser Cache Issues
- Force refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
- Add version parameter: href="/favicon-32x32.png?v=2" — forces browsers to fetch fresh
- Clear browser cache: Settings → Privacy → Clear cached images
- Check file path — a 404 error on the favicon file is the most common reason it won't display
- Test in multiple browsers — Chrome may cache longer than Safari
❓ Frequently Asked Questions
What size should a favicon be?▼
Favicons need multiple sizes for different contexts: 16×16px (browser tab), 32×32px (taskbar), 180×180px (Apple Touch Icon for iOS), 192×192px (Android), and 512×512px (PWA). The Favicon Generator creates all standard sizes from one uploaded image.
What format should a favicon be?▼
PNG with transparent background is the modern standard. SVG scales perfectly but needs PNG fallbacks for maximum compatibility. ICO is legacy format for very old browsers. Upload a square PNG with transparent background for best results.
How do I add a favicon to my website?▼
Generate favicon files using the Favicon Generator, upload them to your website root directory, and paste the provided HTML link tags into your site's head section. The generator includes the ready-to-copy HTML snippet.
What design works best as a favicon?▼
Simple, bold, high-contrast designs. A single letter, simple shape, or drastically simplified logo. Test your design at 16px before committing — complex designs become an unrecognizable blur at tab size.
Why isn't my new favicon showing after I changed it?▼
Browsers cache favicons aggressively — sometimes for days. Force refresh with Ctrl+Shift+R, or add a cache-busting version number to the favicon URL: href="/favicon-32x32.png?v=2". This forces browsers to treat it as a new file.