Design Mistakes
Mistake #1: Too Complex for 16x16
Using intricate designs, multiple elements, or fine details that become an unrecognizable blur at small sizes.
❌ Don't:
- Multiple objects crowded together
- Thin lines and delicate details
- Complex gradients with many colors
- Photographic images or faces
✅ Do:
- One or two simple shapes maximum
- Bold, thick lines
- Solid colors or simple gradients
- Geometric or abstract symbols
Mistake #2: Low Contrast Colors
Using colors that disappear on certain backgrounds (light gray on white, dark blue on black browsers).
✅ Solution:
- Add a border or outline in contrasting color
- Use vibrant, saturated colors
- Test on light AND dark browser themes
- Avoid pure white or pure black as main colors
Mistake #3: Using Text in Favicon
Including company names, words, or even single letters that become illegible at 16x16 pixels.
Why it fails:
At 16x16, a single letter needs at least 12x12 pixels to be readable. That leaves almost no room for styling or context. Text smaller than this becomes a blur.
✅ Better Alternatives:
- Use your brand's symbol or icon instead
- Extract a shape from your logo
- Use brand colors in an abstract design
- If text is essential, use only at 32x32+ sizes
Mistake #4: Not Testing at Actual Size
Designing at large size (512x512) and assuming it will look good when scaled down.
✅ The Squint Test:
- Export your design at 16x16 pixels
- View it at 100% size (not zoomed)
- Step back 3 feet and squint
- Can you still identify it? If not, simplify.
Mistake #5: Generic Stock Icons
Using common symbols (house, gear, globe) that don't differentiate your brand.
✅ Solution:
Create a custom icon that's uniquely yours. Use your brand colors, incorporate elements from your logo, or design an abstract symbol that represents your business specifically.
Technical Mistakes
Mistake #6: Wrong File Paths
Icons in /assets/images/ instead of root directory, causing 404 errors.
✅ Fix:
Place all favicons in website root (/favicon.ico, /apple-touch-icon.png, etc.)
Mistake #7: Missing Sizes
Only providing 16x16, causing pixelation on Retina displays and mobile devices.
✅ Fix:
Minimum: 16x16, 32x32, 180x180, 192x192, 512x512 for complete coverage
Mistake #8: Using JPEG Format
JPEG doesn't support transparency, resulting in ugly white boxes on dark themes.
✅ Fix:
Always use PNG format for favicons. Export with alpha channel enabled.
Mistake #9: No Transparency
Solid background color that clashes with different browser themes.
✅ Fix:
Use transparent background (PNG with alpha channel). Test on light and dark.
Mistake #10: Files Too Large
Unoptimized 512x512 favicon that's 500KB+ slowing down page load.
✅ Fix:
Target sizes: 16x16 under 1KB, 512x512 under 50KB. Use PNG optimization tools.
Implementation Mistakes
Mistake #11: Forgetting favicon.ico
Only providing PNG files, leaving IE11 and older browsers with no icon.
<!-- Add this for legacy browser support -->
<link rel="shortcut icon" href="/favicon.ico">Solution: Always include a favicon.ico file in addition to PNGs.
Mistake #12: No Mobile Sizes
Missing apple-touch-icon and Android sizes, resulting in generic icons on mobile.
✅ Mobile Requirements:
- 180x180 - apple-touch-icon.png (iOS)
- 192x192 - android-chrome-192x192.png
- 512x512 - android-chrome-512x512.png
Mistake #13: Wrong HTML Tags
Using incorrect rel attributes or missing sizes attributes.
❌ Wrong:
<link rel="icon" href="icon.png">✅ Correct:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">Mistake #14: Missing Cache Headers
Favicons re-downloaded on every page visit, wasting bandwidth.
# Apache .htaccess
<FilesMatch "\.(ico|png)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>Set 1-year cache expiry for favicons (they rarely change).
Mistake #15: Not Testing Across Devices
Only checking on desktop Chrome, missing iOS/Android issues.
✅ Complete Test Checklist:
- ☐ Chrome (Windows, Mac, Linux)
- ☐ Firefox (all platforms)
- ☐ Safari (Mac + iOS)
- ☐ Edge (Windows)
- ☐ Chrome Mobile (Android)
- ☐ Test "Add to Home Screen" on iOS and Android
Quick Audit Checklist
Audit Your Current Favicons
Avoid All These Mistakes Automatically
Our favicon generator follows all best practices automatically. Get properly sized, optimized favicons with correct file formats and ready-to-use HTML code.
Generate Error-Free Favicons Now →