That tiny icon in your browser tab may look insignificant, but it is one of the most important branding elements on the web. A favicon (short for "favorites icon") appears in browser tabs, bookmarks, history, search results, and even in mobile app icons when users save your site to their home screen.
Yet most website owners either skip it entirely (showing an ugly generic globe icon) or use a blurry, incorrectly sized image. This guide shows you how to create a perfect favicon in every required size and format — for free.
What is a Favicon?
A favicon is a small square icon that represents your website. It appears in:
- Browser Tabs: The small icon next to your page title.
- Bookmarks Bar: Helps users visually find your site in their bookmarks.
- Google Search Results: Google sometimes displays favicons next to URLs in search results.
- Mobile Home Screens: When users "Add to Home Screen" on iOS or Android, the favicon becomes the app icon.
- PWA (Progressive Web App): The favicon is the splash screen icon for installed web apps.
Without a favicon, your site looks unfinished and unprofessional. Users are 30% more likely to click on a search result that has a recognizable favicon.
Favicon Size Guide 2026: Every Size You Need
In 2026, a single 16×16 pixel ICO file is no longer enough. Modern browsers, operating systems, and devices each expect different sizes. Here is the complete cheat sheet:
| Size (px) | Format | Purpose |
|---|---|---|
| 16 × 16 | ICO / PNG | Browser tab (standard displays) |
| 32 × 32 | ICO / PNG | Browser tab (Retina/HiDPI displays) |
| 48 × 48 | ICO / PNG | Windows taskbar, larger browser UI |
| 64 × 64 | PNG | Windows site shortcuts |
| 96 × 96 | PNG | Google TV, high-res Chrome tabs |
| 128 × 128 | PNG | Chrome Web Store icon |
| 180 × 180 | PNG | Apple Touch Icon (iOS/iPadOS home screen) |
| 192 × 192 | PNG | Android Chrome, PWA manifest |
| 512 × 512 | PNG | PWA splash screen, Google search |
Rule of thumb: Start with a 512×512 px source image. Our tool will generate every smaller size from it automatically, ensuring each one is crisp.
Favicon Formats Explained
ICO — The Legacy Standard
The .ico format is the original favicon format. It can pack multiple sizes (16, 32, 48) into a single file, making it the most compatible option across all browsers, including ancient ones.
- Best for: Maximum backward compatibility.
- Limitation: Larger file sizes compared to modern formats.
PNG — The Modern Standard
PNG favicons are lightweight, support transparency, and look crisp. Most modern browsers fully support PNG favicons.
- Best for: Modern websites, high-quality icons with transparency.
- Limitation: Requires separate files for each size.
SVG — The Future
SVG favicons are vector-based, meaning they scale to any size without losing quality. They also support CSS media queries, letting you create favicons that change based on the user's dark mode/light mode preference.
- Best for: Cutting-edge sites, dark mode support.
- Limitation: Not yet supported by all browsers (about 90% support in 2026).
How to Create a Favicon (Step-by-Step)
You don't need Photoshop or design skills. Our Favicon Generator does everything in your browser.
Step 1: Prepare Your Source Image
Start with your logo or brand icon:
- Size: At least 512 × 512 pixels (larger is better).
- Shape: Square (1:1 ratio). If your logo is rectangular, crop it to a square first using our Crop Tool.
- Background: Transparent PNG works best. Use our Background Remover to strip the background if needed.
- Simplicity: At 16×16 pixels, complex details disappear. Use a simplified version of your logo — just the icon, not the full wordmark.
Step 2: Generate All Sizes
- Go to our Favicon Generator.
- Upload your square image.
- The tool instantly generates previews at all standard sizes: 16, 32, 48, 64, 96, 128, 192, and 512 pixels.
- Toggle on or off the sizes you need.
Step 3: Download
- Click "Download All" to get individual PNG files for every selected size.
- Click "Download .ICO" to get a multi-size ICO file that works everywhere.
Step 4: Add to Your Website
Place the downloaded files in your website's root directory (or /public folder for React, Next.js, Vite projects). Then add the following HTML to your <head> section:
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Modern PNG favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json">
And in your manifest.json (for PWA support):
{
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Design Tips for Great Favicons
1. Simplify Ruthlessly
Your logo at 512px looks great. At 16px, it is a blurry mess unless you simplify. The best favicons use:
- A single letter (like "G" for Google).
- A simple icon (like Twitter/X's bird).
- A bold shape (like YouTube's red play button).
2. Use High Contrast
In 2026, tabs are small and browsers support dark mode. Your favicon must be visible against both light and dark backgrounds. Avoid:
- White icons (invisible on light backgrounds).
- Black icons (invisible on dark backgrounds).
- Use a colored background or a bright, high-contrast design.
3. Avoid Text
Never put full words or small text in a favicon. At 16px, "MyCompany" becomes an unreadable smudge. If you must use text, use a single bold letter.
4. Test on Multiple Backdrops
After generating your favicon, check how it looks:
- In a Chrome tab (light and dark mode).
- As a bookmark in your browser bar.
- On your phone's home screen.
Framework-Specific Setup
React (Vite)
Place favicon.ico in the /public folder. Vite automatically serves it. Add PNG variants in your index.html <head>.
Next.js
Place favicon files in /public. Next.js serves them at the root URL. Add <link> tags in your _document.js or use the next/head component.
WordPress
Go to Appearance → Customize → Site Identity → Site Icon. Upload your 512×512 PNG. WordPress auto-generates the smaller sizes.
Shopify
Go to Online Store → Themes → Customize → Theme Settings → Favicon. Upload a 32×32 or larger square PNG.
Common Favicon Mistakes
| Mistake | Fix |
|---|---|
| Using a non-square image | Crop to 1:1 with our Crop Tool |
| Only providing 16×16 | Generate all sizes with our Favicon Generator |
| Forgetting Apple Touch Icon | Include a 180×180 PNG in your <head> |
| Using a JPEG (no transparency) | Convert to PNG using our Image Converter |
| Blocking favicon in robots.txt | Allow Googlebot to crawl /favicon.ico |
| Not testing dark mode | Use a colored background, avoid white or black icons |
Frequently Asked Questions
What is the best favicon size? There is no single "best" size. You need multiple sizes: 16×16 and 32×32 for browser tabs, 180×180 for Apple devices, and 512×512 for PWA splash screens. Our Favicon Generator creates all of them from one upload.
Can I use a JPG as a favicon? Technically yes, but you should not. JPG does not support transparency, so your icon will have an ugly white box around it in dark-themed browsers. Always use PNG (or ICO which contains PNG layers).
How do I make a favicon with a transparent background? Start with a PNG that already has transparency. If your logo has a solid background, remove it first using our Background Remover, then upload the transparent PNG to the Favicon Generator.
Why doesn't my favicon show in the browser?
Three common reasons: (1) Browser cache — hard-refresh with Ctrl+Shift+R. (2) Wrong file path — make sure the href in your HTML matches the actual file location. (3) Missing <link> tags — add the HTML code shown above to your <head>.
Does a favicon affect SEO? Indirectly, yes. Google displays favicons in search results, and a recognizable icon improves click-through rates. Google also uses the presence of a favicon as a minor trust signal.