Free Favicon Generator: All Sizes + Manifest (No Upload)
Quick Start
- Upload logo/image (PNG, JPG, SVG recommended - square 512x512 or larger)
- Preview all sizes (16x16 to 512x512 auto-generated)
- Download ZIP with all files + manifest.json + HTML code
- Upload to website and add HTML snippet to <head>
Works locally. No uploads. Free, unlimited.
Favicon Pack Generator
Upload a square image, generate multiple favicon/manifest icons and download ZIP.
What is a Favicon?
Favicons are tiny icons displayed in browser tabs, bookmarks, and home screens. The name comes from "favorite icon" - originally shown in browser bookmarks. Modern websites need multiple sizes for different platforms and devices.
Where Favicons Appear
- Browser tabs: 16x16 or 32x32 icon left of page title
- Bookmarks bar: 32x32 icon in bookmark list
- iOS home screen: 180x180 icon when user adds to home
- Android home screen: 192x192 or 512x512 icon for PWA
- Windows taskbar: 32x32 icon when site is pinned
- Google search results: 192x192 icon next to site name (mobile)
Why You Need Multiple Favicon Sizes
Different devices and platforms require different sizes:
| Size | Used For | Platform |
|---|---|---|
| 16x16 | Browser tabs (standard size) | All browsers |
| 32x32 | Bookmarks, Windows taskbar | Chrome, Firefox, Windows |
| 180x180 | iOS home screen (when saved) | iPhone, iPad Safari |
| 192x192 | Android home screen, Google search | Android Chrome |
| 512x512 | PWA splash screens, app icons | Progressive Web Apps |
Without multiple sizes: Browsers scale one size to fit—results in blurry or pixelated icons. Providing exact sizes ensures sharp display on all devices.
What's Included in ZIP Download
Image Files
- favicon.ico: Multi-resolution (16x16, 32x32, 48x48) for legacy browser support
- apple-touch-icon.png: 180x180 for iOS Safari (iPhone, iPad)
- android-chrome-192x192.png: For Android home screens and PWA
- android-chrome-512x512.png: High-res for Android splash screens
- favicon-16x16.png: Browser tabs (modern browsers)
- favicon-32x32.png: Bookmarks and taskbar
Configuration Files
- manifest.json: PWA configuration (name, icons, theme colors)
- HTML-code.txt: Ready-to-paste <head> tags
HTML Code Snippet
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <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"> <link rel="manifest" href="/manifest.json">
How to Install Favicons
For Static HTML Websites
- Unzip files to root directory (same folder as index.html)
- Copy HTML snippet from HTML-code.txt
- Paste into <head> section of every HTML page (before </head>)
- Upload files to server along with HTML pages
For Next.js
- Place files in /public folder (favicon.ico, manifest.json, all PNGs)
- Add metadata to layout.tsx:
export const metadata = { icons: { icon: '/favicon.ico', apple: '/apple-touch-icon.png', }, } - Next.js auto-detects favicon.ico and manifest.json in /public
For WordPress
- Upload via admin: Appearance → Customize → Site Identity → Site Icon
- Or use FTP: Upload all files to /wp-content/themes/your-theme/ folder
- Or use plugin: "Favicon by RealFaviconGenerator" handles all sizes automatically
For React (Create React App)
- Replace files in /public folder: Delete existing favicon.ico, add new files
- Update index.html <head> with new <link> tags
- Restart dev server to see changes (Ctrl+C, then npm start)
Best Practices for Favicon Design
1. Start with High Resolution
Upload 512x512 or larger source image. Tool scales down to smaller sizes. Starting small (e.g., 64x64) and scaling up creates blurry results. Always scale down, never up.
2. Use Square Aspect Ratio (1:1)
Favicons must be square. Rectangular logos get cropped. If your logo is wide, add padding to make it square before generating. Use Aspect Ratio Padder to add padding automatically.
3. Keep Design Simple
Avoid tiny text and complex details. At 16x16 pixels, text becomes unreadable. Use:
- Simple logo mark (icon only, not full logo with text)
- Single letter or monogram
- Bold, recognizable shape
- High contrast (dark on light or light on dark)
Bad examples: Full company name text, intricate patterns, thin lines, multiple colors that blur together at small size.
Good examples: Apple's apple, Twitter's bird, single letter in bold font, simple geometric shape.
4. Test on Dark and Light Backgrounds
Some browsers use dark mode. If your favicon is dark (e.g., black logo), it disappears on dark tabs. Solutions:
- Add light-colored border or outline
- Use transparent background with balanced colors
- Provide separate dark mode favicon (advanced—requires media query)
5. Use PNG or SVG Source
PNG (transparent) or SVG (vector) work best. JPG adds white backgrounds to transparent areas. If using JPG, ensure background matches website theme color.
Troubleshooting
Favicon Not Showing After Upload
Cause: Browser cache is showing old favicon.
Fix:
- Hard refresh page: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
- Clear browser cache: Settings → Privacy → Clear browsing data
- Try different browser to confirm new favicon is correct
- Wait 24 hours—browsers cache favicons aggressively
Favicon Looks Blurry on Retina Displays
Cause: Only providing 16x16 size. Retina displays need 32x32 or larger.
Fix: Ensure HTML includes both 16x16 and 32x32 <link> tags. Modern browsers automatically select appropriate size for display density.
iOS Home Screen Icon Looks Wrong
Cause: Missing apple-touch-icon.png or using wrong size.
Fix: Upload apple-touch-icon.png (180x180) to root directory. Ensure <link rel="apple-touch-icon"> is in <head>.
PWA Icon Not Showing
Cause: manifest.json not linked or icons path incorrect in manifest.
Fix: Verify manifest.json is in root directory, linked in <head>, and "icons" array contains correct paths (e.g., "/android-chrome-192x192.png").