1. Upload
Drop your logo image or create a text-based monogram.
Drop your image here
or click to browse
Supports SVG, PNG, JPG (square images work best)
Frequently Asked Questions
Common questions about favicons, installation, and troubleshooting.
What is a favicon and why do I need one?
A favicon is the small icon that appears in browser tabs, bookmarks, and mobile home screens. It helps users quickly identify your site among multiple open tabs and makes your brand more recognizable. Without a favicon, browsers show a generic icon, making your site look unprofessional.
What's the difference between ICO and PNG favicons?
ICO files contain multiple sizes in one file (16px, 32px, 48px) and work in all browsers, including older ones. PNG files are individual sizes that offer better quality and transparency support. Modern sites use both: ICO for legacy browser compatibility and PNGs for modern devices and high-DPI displays.
Do I really need all these file sizes?
Essential (required): favicon.ico, favicon-16.png, favicon-32.png, apple-touch-icon.png (180×180)
Highly recommended: android-chrome-192.png, android-chrome-512.png, site.webmanifest
Optional: 48px, 64px, 96px, 128px, 256px (for specific platforms and better quality)
More sizes = better compatibility across all devices, but you can start with just the essentials.
Where do I put the favicon files?
Root directory (recommended): Upload all files to your website's root folder where index.html lives.
Platform-specific:
- WordPress: /wp-content/themes/your-theme/
- Next.js: /public/ folder
- Shopify: Files section in admin
- Static sites: Same folder as index.html
How do I install the favicon on my website?
Step 1: Upload ALL files to your website's root directory
Step 2: Copy the HTML code from snippet-head.html
Step 3: Paste it in your website's <head> section (between <head> and </head>)
Step 4: Clear your browser cache and refresh to see the new favicon
💡 The snippet includes all the necessary <link> tags pointing to your favicon files.
What is site.webmanifest and do I need it?
The site.webmanifest file enables Progressive Web App (PWA) features like "Add to Home Screen" on mobile devices. It tells browsers your app name, icons, theme color, and how to display your site when installed. You should include it - it's required for PWA features and improves mobile experience, even if you're not building a full PWA.
Why isn't my favicon showing up?
Most common fixes:
- Clear browser cache: Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac)
- Hard refresh: Ctrl+Shift+R or Cmd+Shift+R
- Check file paths: Verify the HTML snippet paths match your file locations
- Verify uploads: Make sure all files were uploaded successfully
- Wait 5-10 minutes: CDNs and caching can delay updates
- Test in incognito: Opens a fresh browser without cache
Why is my old favicon still showing?
Browsers aggressively cache favicons. Try these steps in order:
- Clear browser cache and cookies
- Close and reopen the browser completely
- Try in a different browser or incognito mode
- Clear DNS cache: Run
ipconfig /flushdns(Windows) orsudo dscacheutil -flushcache(Mac) - Add a version parameter to your favicon URLs: favicon.ico?v=2
Why does my iOS icon have a white background?
iOS doesn't support transparent backgrounds for Apple Touch Icons. If you generate a favicon with transparency, iOS will add a white background automatically. Solution: Use the "Use transparent background" toggle to OFF and choose a solid background color that matches your brand. Apple also automatically rounds the corners, so don't add rounded corners yourself.
What makes a good favicon design?
✅ Good practices:
- Use simple, bold shapes that work at 16×16 pixels
- High contrast between foreground and background
- 1-3 letters for monogram favicons
- Solid colors or simple gradients
- Match your brand colors
- Test at actual size (16px) before finalizing
❌ Avoid:
- Thin lines or small details (they disappear at small sizes)
- Full words or sentences
- Complex gradients or patterns
- Low contrast color combinations
- Photos or detailed illustrations
What's the safe area for maskable icons?
Android and some other platforms crop icons into various shapes (circles, rounded squares, etc.). The safe area ensures your important content isn't cut off:
- 80% safe zone (green): Recommended - keep all important content here
- 66% safe zone (orange): Minimum - absolutely critical content only
- Outside: May be cropped depending on device
💡 Use "Show safe area" toggle in the sidebar preview to see these zones while designing.
Can I use emoji as a favicon?
Yes! Using the monogram feature, you can enter emoji characters (like 🚀, 💡, 🎨) and they'll work great as favicons. Emoji are actually perfect for favicons because they're designed to be recognizable at small sizes. Just paste the emoji into the text field and generate. Note: Emoji may look different across operating systems (iOS vs Android vs Windows).
How do I update my favicon without users seeing the old one?
Best practice: Version your filenames
Instead of replacing favicon.ico, use versioned filenames:
<link rel="icon" href="/favicon.ico?v=2">
<!-- or -->
<link rel="icon" href="/favicon-v2.ico">This forces browsers to download the new file instead of using the cached old one. Update the version number each time you change the favicon.
Still have questions? Check the detailed README.md file included in your download, or generate a new favicon pack and review the installation instructions.