How to Create a Favicon for Your Website (Free)
A favicon is the small icon displayed in browser tabs, bookmarks, search results, and mobile home screens. It's a small detail that makes a big difference for branding and professionalism. Here's everything you need to know to create and implement one.
1. What Is a Favicon?
"Favicon" stands for favorite icon. It was originally created for Internet Explorer's bookmark ("favorites") feature, but today it appears everywhere:
- Browser tabs - the small icon next to the page title
- Bookmarks & reading lists
- Google search results - displayed next to your URL in mobile results
- Mobile home screens - when users "Add to Home Screen"
- PWA app icons - Progressive Web App installs
2. Required Sizes & Formats
Modern websites need multiple favicon sizes. Here's a complete reference:
| Size | Format | Where It's Used |
|---|---|---|
| 16×16 | ICO / PNG | Browser tabs (standard) |
| 32×32 | ICO / PNG | Browser tabs (Retina), Windows taskbar |
| 48×48 | PNG | Windows desktop shortcut |
| 180×180 | PNG | Apple Touch Icon (iOS home screen) |
| 192×192 | PNG | Android Chrome, PWA icon |
| 512×512 | PNG | PWA splash screen, large display |
| Any | SVG | Modern browsers (scales perfectly) |
3. How to Create a Favicon
Step 1: Prepare Your Source Image
Start with a square image at least 512×512 pixels. This can be your brand logo, an initial, or a recognizable symbol. Keep it simple - favicons are tiny, so fine details get lost.
Use a transparent background (PNG) if your icon doesn't fill the entire square.
Step 2: Generate All Sizes
Upload your image to the Snipinsta Favicon Generator. It automatically creates all the sizes and formats you need - ICO, PNG at multiple sizes, and Apple Touch Icon - in a single download.
Step 3: Verify with a Checker
After deploying, use the Snipinsta Favicon Checker to verify your favicon is correctly detected across all sizes and platforms.
4. Adding a Favicon to Your Website
HTML (Any Website)
Place your favicon files in the site root directory, then add these tags to the <head> of every page:
WordPress
Go to Appearance → Customize → Site Identity → Site Icon and upload your 512×512 PNG. WordPress generates all required sizes automatically.
Next.js / React
Place favicon.ico in the /public folder. For the App Router, place it in /app/favicon.ico. Add PNG variants via a metadata export or <Head> component.
5. Design Best Practices
- Keep it simple. At 16×16 pixels, detailed logos are illegible. Use a single letter, symbol, or simplified mark.
- Use bold colors. The favicon needs to stand out against browser chrome (both light and dark themes).
- Test at small sizes. View your favicon at 16×16 and 32×32 before deploying. If it's not recognizable, simplify.
- Match your brand. Use your primary brand color and a recognizable element from your logo.
- Include both light and dark variants if your audience uses dark mode. SVG favicons can use
prefers-color-schememedia queries.
6. Troubleshooting Common Issues
| Problem | Solution |
|---|---|
| Favicon not showing | Hard refresh (Ctrl+F5), clear cache, or test in incognito mode. Check the file path in your HTML. |
| Old favicon still showing | Browsers aggressively cache favicons. Rename the file or add a cache-busting query string: ?v=2 |
| Blurry on Retina displays | Make sure you're serving a 32×32 version, not just 16×16. |
| Missing on iOS home screen | Add the apple-touch-icon link tag with a 180×180 PNG. |
| Not appearing in Google results | Google crawls /favicon.ico at the root. Make sure it exists. Google may take weeks to display updated favicons. |
Frequently Asked Questions
Generate Your Favicon Now
Create all required favicon sizes from a single image - free, instant download.
Favicon Generator Favicon Checker