Favicon Guide
Everything you need to know about favicons for modern websites
What is a Favicon?
A favicon (short for "favorite icon") is a small image that represents your website in browser tabs, bookmarks, and history lists. It's a crucial part of your website's branding and helps users quickly identify your site among many open tabs.
Modern favicons need to work across dozens of devices, browsers, and contexts - from tiny 16×16px browser tabs to 512×512px Android home screen shortcuts. That's why FaviconForge Pro generates a complete package with all required formats and sizes.
Design Best Practices
Keep it Simple
Favicons are displayed at very small sizes (as small as 16×16px). Use simple shapes, high contrast, and avoid fine details that won't be visible.
Use High Contrast
Choose colors that stand out against both light and dark browser themes. Your favicon should be recognizable in any context.
Match Your Brand
Use your brand's colors and style. If you have a logo, simplify it to its most recognizable element. Many brands use their first letter or a symbol.
Test at Small Sizes
Always preview your favicon at 16×16px and 32×32px to ensure it's still recognizable at the smallest sizes where it will appear.
Consider Dark Mode
Many browsers now support dark themes. Make sure your favicon works well against both light and dark backgrounds. Keep an eye on how colors shift across modes and adjust your palette so the icon remains legible.
File Formats Explained
PNG Files (favicon-*.png)
PNG is the most common format for modern favicons. You need multiple sizes to ensure your favicon looks crisp on all devices:
- 16×16px, 32×32px, 48×48px: Browser tabs and desktop shortcuts
- 192×192px, 512×512px: Android home screens and app icons
- 64×64px, 128×128px: High-DPI displays and Windows taskbar
ICO File (favicon.ico)
The traditional favicon format that contains multiple resolutions in one file. Still used by older browsers and some Windows applications. FaviconForge Pro includes 16×16, 32×32, and 48×48 sizes in the ICO file.
SVG File (favicon.svg)
A scalable vector format that looks perfect at any size. Modern browsers support SVG favicons, and they're perfect for simple, geometric designs. Smaller file size than PNG, but not supported by all browsers yet.
Apple Touch Icons
Special favicons for iOS devices when users add your site to their home screen. Includes 76×76, 120×120, 152×152, and 180×180px sizes for different iPhone and iPad models.
Microsoft Tiles
Windows-specific icons (150×150, 310×310px) used when users pin your site to their Start menu or taskbar.
Installation Guide
Step 1: Upload Files
Copy all PNG, ICO, and SVG files to your website's root directory. For many frameworks, this is the /public folder.
Step 2: Add HTML Tags
Copy the HTML code from your downloaded package and paste it into your website's <head> section. This tells browsers where to find your favicon files.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">Step 3: Add Manifest Files
Place site.webmanifest and browserconfig.xml in your root directory. Update the "name" fields in site.webmanifest to match your website.
Step 4: Clear Cache and Test
Clear your browser cache (Ctrl+Shift+Delete or Cmd+Shift+Delete) and refresh your website. You should see your new favicon in the browser tab! Before you announce the update, preview how it appears in social cards using any Open Graph validator to confirm the correct icon shows up.
Common Mistakes to Avoid
Using Only One Size
Don't rely on a single favicon.ico file. Modern websites need multiple sizes (16×16 to 512×512) to look sharp on all devices and contexts.
Too Much Detail
Complex logos with fine details become illegible at 16×16 pixels. Simplify your design - use solid colors, simple shapes, and high contrast.
Ignoring Dark Mode
A white favicon disappears on light backgrounds; a dark one vanishes on dark themes. Test your favicon in both light and dark browser modes and adjust your palette until it remains legible everywhere.
Wrong File Paths
Favicon files must be in your website's root directory or properly referenced. A broken path means no favicon. Always test after deployment.
Skipping Mobile Formats
Don't forget Apple Touch Icons and Android Chrome icons. These are essential for users who add your site to their home screens.
Common Issues & Solutions
Favicon not showing up?
- Clear your browser cache - browsers aggressively cache favicons
- Try hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
- Check that files are in the correct directory
- Verify HTML code is in the <head> section, not <body>
- Use your browser's developer tools to check for 404 errors
Favicon looks blurry?
- Make sure you're including all size variations
- Use simple, high-contrast designs that scale well
- Avoid fine details that disappear at small sizes
Old favicon still showing?
- Browser cache can persist for days - clear it thoroughly
- Try testing in an incognito/private window
- Some browsers (like Safari) can be particularly stubborn - give it time or clear all browsing data
Testing Checklist
Use this checklist to verify your favicon works correctly across all contexts:
Good vs Bad Favicon Examples
Visual comparison of effective and ineffective favicon designs:
Good Designs
Simple letter: High contrast, recognizable at all sizes
Simple emoji: Vibrant gradient, clear symbol, works at tiny sizes
Geometric shape: Bold contrast, simple icon, distinctive style
Bad Designs
Too much text: Illegible at small sizes, low contrast
Too complex: Multiple symbols blur together, weak colors
Poor contrast: Invisible against light backgrounds, no dark mode support
Advanced Topics
🎬 Animated Favicons
You can create animated favicons using the GIF format or by programmatically swapping PNG files with JavaScript. Common use cases include:
- Loading indicators: Show a spinning animation while content loads
- Notification badges: Draw attention to unread messages or alerts
- Real-time status: Display live data like recording status or timer countdowns
Note: Animated favicons should be used sparingly as they can be distracting and may hurt battery life on mobile devices. Always provide a static fallback.
⚡ SVG Favicons
SVG (Scalable Vector Graphics) favicons are the future - they look perfect at any size and have smaller file sizes than PNG. Modern browsers like Chrome, Firefox, and Safari support them.
Benefits:
- Infinitely scalable without quality loss
- Smaller file size (typically 1-2 KB vs 5-10 KB for PNG)
- Can include CSS for dark mode support (see below)
- Can be animated with CSS or JavaScript
Compatibility: Not supported by older browsers or Internet Explorer. Always include PNG fallbacks alongside your SVG favicon.
🌓 Dark Mode Favicons
With dark mode becoming standard across operating systems and browsers, your favicon needs to work in both light and dark contexts. There are two main approaches:
Approach 1: Design for both themes
Use colors with good contrast against both light and dark backgrounds. Avoid pure white or pure black. Try vibrant colors like blue (#3B82F6), purple (#9333EA), or green (#10B981).
Approach 2: SVG with CSS media queries
Use an SVG favicon with embedded CSS that responds to prefers-color-scheme. This allows different colors for light and dark modes in a single file.
<svg><style>@media(prefers-color-scheme:dark){path{fill:#fff}}</style></svg>🔄 Dynamic Favicons with JavaScript
You can programmatically change favicons using JavaScript to reflect real-time application state:
- Notification counters: Show unread message count (like Gmail)
- Status indicators: Change color based on connection status
- Progress indicators: Display upload/download progress
- Theme switching: Update favicon when user toggles dark mode
Partner spotlight
Need more than favicons? SVGShift can help you next.
Convert and optimize SVG files for perfect web performance.
Explore SVGShiftReady to Create Your Perfect Favicon?
Generate a complete, professional favicon package in seconds
Start Creating Now