How to Create a Favicon for Your Website (All Sizes)
A favicon is the small icon that appears in browser tabs, bookmarks, and home screen shortcuts. Getting it right requires generating multiple sizes and linking them correctly in your HTML — but the process is straightforward once you know the requirements.
What Is a Favicon?
"Favicon" stands for "favorites icon." It was originally a 16×16 pixel icon for Internet Explorer bookmarks. Modern browsers and devices require many sizes:
| File | Size | Used For |
|------|------|----------|
| favicon.ico | 16×16, 32×32 | Browser tabs, Windows taskbar |
| favicon-16x16.png | 16×16 | Small browser tab icons |
| favicon-32x32.png | 32×32 | Standard browser tabs |
| apple-touch-icon.png | 180×180 | iOS home screen shortcut |
| android-chrome-192x192.png | 192×192 | Android home screen |
| android-chrome-512x512.png | 512×512 | Android splash screen, PWA |
How to Generate All Favicon Sizes with ZapFile
- Open ZapFile's Favicon Generator
- Upload a square image (PNG recommended, minimum 512×512 pixels)
- Click Generate
- Download the ZIP containing all sizes plus the
.icofile
How to Add Favicons to Your Website
Add these tags to the section of your HTML:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">For Progressive Web Apps (PWA), also add a site.webmanifest file:
{
"name": "Your App",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}Designing a Good Favicon
Keep It Simple
At 16×16 pixels, complex logos become unrecognizable. Use the first letter of your brand name, a simplified icon, or a solid color block.Use High Contrast
The favicon appears against both light and dark browser chrome. Test both. A solid colored background (matching your brand color) with a white symbol reads well in both modes.Start at 512×512
Generate from the highest-resolution source. ZapFile downscales cleanly from 512px, but upscaling from 16px produces blurry results.SVG Favicons (Modern Browsers)
Chromium-based browsers support SVG favicons, which scale perfectly to any size. Add it alongside your PNG/ICO fallbacks:<link rel="icon" type="image/svg+xml" href="/favicon.svg">Common Favicon Mistakes
- Using a low-resolution source image: Always start at 512px or larger
- Only providing
.ico: Modern devices need PNG sizes; ICO alone leaves iOS and Android without a proper icon - Forgetting cache: After updating your favicon, browsers cache the old one aggressively. Append a version parameter (
favicon.ico?v=2) to force a refresh during development
Summary
- Favicons require multiple sizes for browsers, iOS, Android, and PWA
- Start with a 512×512 square PNG and generate all sizes at once
- ZapFile's Favicon Generator produces every required size plus the ICO file in seconds