How to Create a Favicon for Your Website: Complete Guide
Complete guide to creating favicons for your website. Learn sizes, formats (ICO, PNG, SVG), design tips, implementation code, and tools to create professional favicons that work across all browsers and devices.
Complete guide to creating favicons for your website. Learn sizes, formats (ICO, PNG, SVG), design tips, implementation code, and tools to create professional favicons that work across all browsers and devices.
What You'll Learn: This comprehensive guide teaches you how to create professional favicons for your website. You'll learn required sizes, file formats (ICO, PNG, SVG), design principles for small icons, generation tools (free and paid), implementation code, and troubleshooting for all browsers and devices.
What is a Favicon and Why It Matters
A favicon (short for "favorite icon") is the small icon that appears in browser tabs, bookmarks, address bars, and mobile home screens. It's a crucial branding element that helps users identify and remember your website.
Where Favicons Appear
- Browser tabs: Next to page title (most visible use)
- Bookmarks/Favorites: Helps users find saved sites quickly
- Browser history: Makes browsing history scannable
- Mobile home screen: When site is added to home screen (Progressive Web Apps)
- Search results: Google may display favicon in search results
- Task switchers: App preview thumbnails on mobile
Why Favicons Matter
- Branding: Reinforces brand identity across all browser touchpoints
- Recognition: Users identify your site 3x faster with distinctive favicon
- Professionalism: Missing favicons make sites look incomplete or amateur
- Tab management: Users with many tabs open rely on favicons to navigate
- SEO benefit: Google shows favicons in mobile search results (May 2019+)
- PWA requirement: Essential for Progressive Web Apps
2026 Favicon Requirements: Complete Size Guide
Modern websites need multiple favicon sizes for different devices and contexts:
| Size | Use Case | Required? | Format |
|---|---|---|---|
| 16x16px | Browser tabs, address bar (classic) | Yes (legacy) | ICO, PNG |
| 32x32px | Browser tabs, bookmarks (standard) | Yes | ICO, PNG |
| 48x48px | Windows site icons | Recommended | ICO |
| 64x64px | Windows taskbar button | Optional | ICO |
| 180x180px | Apple Touch Icon (iOS home screen) | Yes (mobile) | PNG |
| 192x192px | Android home screen, Chrome | Yes (PWA) | PNG |
| 512x512px | Android splash screen, PWA | Yes (PWA) | PNG |
| SVG | Modern browsers (scalable) | Future-proof | SVG |
Minimum Viable Favicon Package
Essential files you MUST have:
- favicon.ico - Multi-size ICO (16x16, 32x32, 48x48) for legacy browsers
- icon-192.png - 192x192px PNG for Android/Chrome
- icon-512.png - 512x512px PNG for high-res displays/PWA
- apple-touch-icon.png - 180x180px PNG for iOS devices
- favicon.svg - SVG version for modern browsers (optional but recommended)
Favicon File Formats Explained
ICO Format (favicon.ico)
What it is: Microsoft's icon format that can contain multiple sizes in one file
Pros:
- Universal browser support (IE, all legacy browsers)
- Contains multiple sizes (16x16, 32x32, 48x48) in single file
- Automatic fallback when placed in root directory
- No HTML tag needed (browsers check /favicon.ico automatically)
Cons:
- Larger file size than individual PNGs
- Limited editing software support
- Not ideal for complex/colorful designs
When to use: Always include for maximum compatibility
PNG Format
What it is: Standard image format with transparency support
Pros:
- Excellent quality and color support
- Transparency support (alpha channel)
- Smaller file sizes for individual icons
- Easy to create and edit
- Required for mobile home screen icons
Cons:
- Need separate file for each size
- Requires HTML tags (not auto-discovered)
When to use: Mobile icons (180x180, 192x192, 512x512) and modern web
SVG Format (Modern)
What it is: Scalable vector graphic that works at any size
Pros:
- One file works for all sizes (infinitely scalable)
- Very small file size (typically 1-5KB)
- Perfect quality at any resolution
- Can be themed with CSS (dark mode support)
- Future-proof
Cons:
- Limited browser support (Chrome 80+, Firefox 41+, Safari 9+)
- Not supported in IE or older browsers
- Only works for simple designs (logos, icons)
- Complex designs may look bad at small sizes
When to use: Modern sites with simple logos, as supplement to PNG/ICO
Designing an Effective Favicon
Design Principles for Small Icons
Favicons appear tiny (16x16px to 32x32px), so design requires special considerations:
1. Keep It Simple
- Avoid detail: Complex logos lose clarity at small sizes
- Use symbols: Single letter, simple shape, or iconic element
- Reduce elements: Maximum 2-3 colors, one main shape
- Test at 16x16px: If it's unrecognizable, simplify more
2. High Contrast
- Strong color contrast: Ensure visibility against browser chrome
- Test on both: Light and dark browser themes
- Avoid grays: Low contrast colors disappear in tabs
- Use brand colors: But ensure they're distinctive
3. Recognizable at a Glance
- Unique shape: Should be identifiable from silhouette
- Brand consistency: Use primary brand color or logo element
- Avoid clichés: Generic symbols blend in with other sites
- Test in context: View among many tabs, not in isolation
4. Square Format
- Design for square: All favicons are square (1:1 ratio)
- Center important elements: Edges may be cropped or rounded
- Leave padding: Don't go to edges (10% margin recommended)
Common Favicon Design Approaches
Approach 1: First Letter / Monogram
Examples: "G" for Google, "F" for Facebook
Best for: Companies with strong letter associations
- Bold, sans-serif typeface
- Brand color background
- High contrast letter color
- Works at any size
Approach 2: Simplified Logo
Examples: Twitter bird, Instagram camera
Best for: Brands with iconic logo marks
- Strip away text and complexity
- Keep core recognizable shape
- Solid color or 2-tone version
Approach 3: Abstract Symbol
Examples: Slack hashtag, Airbnb "A"
Best for: Modern brands with abstract marks
- Geometric shapes
- Unique and memorable
- Scales perfectly
Approach 4: Industry Icon
Examples: Shopping cart for e-commerce, envelope for email
Best for: Service-focused or generic sites
- Immediately communicates purpose
- Easy to understand
- Risk: less unique, blends with competitors
Color Recommendations
- Use brand colors: Maintain consistency with overall identity
- Avoid pure white: Invisible on light browser backgrounds
- Avoid pure black: Harsh, may need border/background
- Test against dark mode: Ensure visibility in dark browser themes
- Consider background: Solid color background with contrasting icon
Method 1: Online Favicon Generators (Easiest)
Best for: Quick creation, no design software, free
Top Free Favicon Generators
1. Favicon.io (Highly Recommended)
Website: favicon.io
Features:
- Generate from text, image, or emoji
- Text option: Choose font, colors, size
- Generates all required sizes automatically
- Provides HTML code for implementation
- Downloads as ZIP with all sizes
- 100% free, no watermarks
How to use:
- Go to favicon.io
- Choose generation method:
- Text: Enter 1-2 letters, choose font and colors
- Image: Upload your logo/icon
- Emoji: Select emoji as favicon
- Preview result
- Download ZIP package (contains all sizes + HTML code)
- Upload to your website
2. RealFaviconGenerator
Website: realfavicongenerator.net
Features:
- Most comprehensive favicon generator
- Platform-specific customization (iOS, Android, Windows)
- Preview on different devices
- Advanced options (background colors, margins)
- manifest.json generation for PWAs
- HTML code provided
Best for:
Progressive Web Apps, precise control over all platform variations
3. Favicon Generator (favicon-generator.org)
Features:
- Simple upload and generate
- Generates 9 different sizes
- Includes ICO and PNG versions
- Fast and straightforward
4. Canva Favicon Maker
Website: canva.com
Features:
- Design custom favicon with templates
- Drag-and-drop interface
- Access to graphics, fonts, icons library
- Export as PNG, then convert to ICO
Best for: Custom design without Photoshop
Method 2: Photoshop / Design Software
Best for: Professional design, brand consistency, full control
Creating Favicon in Photoshop
Step-by-Step Process:
- Create new document:
- File → New
- Size: 512x512px (design large, scale down)
- Resolution: 72 PPI (web)
- Color Mode: RGB
- Background: Transparent
- Design your icon:
- Keep it simple (remember 16x16px final size)
- Use shapes, text, or simplified logo
- High contrast colors
- Leave 10% padding around edges
- Test at small size:
- Image → Image Size → 16x16px
- View at 100% zoom - is it recognizable?
- If not, simplify design
- Undo back to 512x512px
- Export multiple sizes:
- Save 512x512px as PNG (icon-512.png)
- Image Size → 192x192px → Save as icon-192.png
- Image Size → 180x180px → Save as apple-touch-icon.png
- Image Size → 32x32px → Save as favicon-32.png
- Image Size → 16x16px → Save as favicon-16.png
- Create ICO file:
- Use online converter (e.g., ConvertICO.com)
- Upload 16px, 32px, 48px PNGs
- Generate multi-size favicon.ico
Creating in Figma / Sketch
- Create 512x512px frame/artboard
- Design icon with simple shapes
- Export as PNG at multiple sizes (512, 192, 180, 32, 16)
- Use online tool to convert PNGs to ICO
Creating in GIMP (Free)
- File → New → 512x512px
- Design your icon
- Export as PNG for each size
- For ICO: Install ICO plugin or use online converter
Method 3: Converting Existing Logo
Best for: Using existing brand assets
From Vector Logo (SVG, AI, EPS)
- Open vector logo in Illustrator, Inkscape, or Figma
- Simplify if necessary (remove text, fine details)
- Export as SVG (for modern browsers)
- Export as PNG at 512x512px
- Use favicon generator to create all sizes from 512px PNG
From PNG/JPG Logo
- Open in Photoshop or GIMP
- Remove background (make transparent)
- Crop to square (1:1 aspect ratio)
- Resize to 512x512px
- Optionally add background color for better visibility
- Use favicon generator for multi-size output
Implementing Favicons: HTML Code
Basic Implementation (Minimum)
<!-- Place in <head> section -->
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Modern PNG favicons -->
<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) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Complete Implementation (Recommended)
<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android/Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<!-- Web App Manifest (for PWAs) -->
<link rel="manifest" href="/site.webmanifest">
<!-- Safari Pinned Tab (optional) -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<!-- Microsoft Tiles (optional) -->
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- Theme Color -->
<meta name="theme-color" content="#ffffff">
SVG Favicon (Modern Browsers)
<!-- SVG favicon for modern browsers -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Fallback ICO for older browsers -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Note: Modern browsers will use SVG if available, fall back to ICO if not supported.
Web App Manifest (site.webmanifest)
Required for Progressive Web Apps and Android home screen icons:
{
"name": "Your Website Name",
"short_name": "Short Name",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Platform-Specific Implementation
WordPress
Method 1: WordPress Customizer (Easy)
- Dashboard → Appearance → Customize
- Site Identity → Site Icon
- Upload square image (512x512px recommended)
- WordPress automatically generates all sizes
- Publish
Method 2: Manual Upload
- Upload favicon files to theme folder via FTP
- Edit header.php
- Add favicon link tags in <head> section
Method 3: Plugin
- All In One SEO: Includes favicon uploader
- Yoast SEO: Upload via Search Appearance → General
Shopify
- Admin → Online Store → Themes
- Customize → Theme Settings
- Favicon → Upload image (32x32px minimum)
- Save
Wix
- Site Dashboard → Settings
- Favicon
- Upload image (recommended: 512x512px PNG)
- Save
Squarespace
- Home Menu → Design → Browser Icon
- Upload image (300x300px minimum)
- Save
Static Sites (HTML/React/Next.js)
- Place favicon files in
/publicfolder - Add link tags to <head> section of index.html or _document.js
- Ensure files are served from root (
/favicon.iconot/public/favicon.ico)
Testing Your Favicon
Quick Browser Tests
1. Tab Icon
- Open your website in new tab
- Check if favicon appears next to page title
- Test in Chrome, Firefox, Safari, Edge
2. Bookmark Test
- Bookmark your page (Ctrl+D / Cmd+D)
- Check bookmarks bar for favicon
- Verify it's the correct icon
3. Mobile Home Screen
- iOS: Safari → Share → Add to Home Screen
- Android: Chrome → Menu → Add to Home Screen
- Check if 180x180/192x192 icon displays correctly
4. Hard Refresh (Clear Cache)
- Browsers cache favicons aggressively
- Clear cache: Ctrl+Shift+R (Cmd+Shift+R on Mac)
- Or use incognito/private browsing
Online Testing Tools
- Favicon Checker: realfavicongenerator.net/favicon_checker
- Google Search Console: Check mobile-friendly test
- Browser DevTools: Network tab → check if favicon loads (200 status)
Troubleshooting Common Issues
Problem: Favicon Not Showing
Solutions:
- Clear browser cache: Ctrl+Shift+Delete, clear cached images
- Check file path: Ensure
/favicon.icois in root directory - Verify HTML tags: Correct <link> tags in <head>
- Check file format: Ensure .ico file is valid (use online validator)
- Hard refresh: Ctrl+Shift+R to force reload
- Check 404 errors: DevTools → Network tab → look for failed favicon request
Problem: Old Favicon Still Showing
Solutions:
- Clear browser cache completely
- Use incognito/private window to test
- Add version query parameter:
favicon.ico?v=2 - Wait 24-48 hours (browser cache timeout)
- For immediate testing: use different browser
Problem: Favicon Looks Blurry
Solutions:
- Ensure you created proper small sizes (16x16, 32x32)
- Don't rely on browser auto-scaling large images
- Use resampling (bicubic) when creating small sizes
- Simplify design - fewer details look better at small sizes
Problem: Different Icon on Mobile
Cause: Missing apple-touch-icon or Android icons
Solutions:
- Add
apple-touch-icon.png(180x180px) - Add Android icons to manifest (192x192, 512x512)
- Ensure icons are referenced in HTML
Problem: Favicon Not Showing in Google Search
Solutions:
- Ensure favicon is public (not blocked by robots.txt)
- Must be multiples of 48px (48x48, 96x96, 144x144)
- File size under 100KB
- Wait for Google to re-crawl (can take weeks)
- Check Google Search Console for favicon issues
Advanced: Dark Mode Favicons
Support both light and dark browser themes with media queries:
<!-- SVG with CSS for dark mode -->
<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">
Or use SVG with CSS variables:
<!-- favicon.svg with theme-aware colors -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
:root { --favicon-fill: #000; }
@media (prefers-color-scheme: dark) {
:root { --favicon-fill: #fff; }
}
</style>
<circle cx="16" cy="16" r="14" fill="var(--favicon-fill)"/>
</svg>
Best Practices Checklist
Before Launch:
- ✓ Created minimum viable set (ICO, 192px, 512px, 180px Apple)
- ✓ Design is simple and recognizable at 16x16px
- ✓ High contrast colors for visibility
- ✓ Files placed in root directory (/favicon.ico)
- ✓ HTML link tags added to <head> section
- ✓ Tested in Chrome, Firefox, Safari, Edge
- ✓ Tested on mobile (iOS and Android)
- ✓ Clear browser cache and verified display
- ✓ No console errors for missing favicon files
- ✓ File sizes optimized (under 10KB for ICO)
- ✓ Consistent with overall brand identity
- ✓ Manifest.json created for PWA (if applicable)
Conclusion
A well-designed favicon is a small but important detail that enhances your website's professionalism and brand recognition. By following this guide, you can create favicons that work perfectly across all browsers, devices, and contexts.
Whether you use a simple letter, simplified logo, or custom icon, a thoughtfully designed favicon makes your website more professional and memorable.
Ready to Create Your Favicon?
Use our free tools to convert your logo to favicon format:
Key Takeaways
- Minimum viable set: favicon.ico, 192px, 512px, 180px Apple touch icon
- Keep designs simple: Must be recognizable at 16x16px
- Use high contrast: Ensure visibility in browser tabs
- Multiple sizes required: Don't rely on browser scaling
- Test on all platforms: Desktop browsers and mobile devices
- ICO format for compatibility: Always include for legacy browser support
- SVG for modern sites: Future-proof, scalable solution
- Clear cache for testing: Favicons are aggressively cached
- Use generators: Save time with favicon.io or RealFaviconGenerator
- Brand consistency: Favicon should reflect your brand identity
Ready to convert?
Use Convert a Document to convert, compress, and optimize files fast.