Favicon Testing Checklist
Essential Tests (Must Pass)
Use this comprehensive checklist to ensure your favicons work perfectly across all browsers and devices.
Browser tab displays favicon
Open site, check icon appears in tab
Bookmark shows correct icon
Add to bookmarks, verify icon is visible
No 404 errors in DevTools
Network tab shows all favicon files load successfully
Mobile home screen icon works
Add to home screen on iOS/Android, check icon quality
Icon looks sharp on Retina displays
Test on high-DPI screens, no blurriness
Transparency works correctly
Test on light and dark browser themes
Test in incognito/private mode to avoid cached versions. Hard refresh (Ctrl+F5 or Cmd+Shift+R) clears browser cache if icons don't update.
Browser DevTools Testing
Chrome, Firefox, Edge, and Safari DevTools provide powerful debugging capabilities for favicons.
Chrome DevTools Favicon Testing
1. Network Tab
- • Open DevTools (F12 or Ctrl+Shift+I)
- • Go to Network tab
- • Filter by "img" or search "favicon"
- • Reload page (Ctrl+R)
- • Check all favicon requests show "200" status (not 404)
2. Application Tab
- • Open DevTools → Application tab
- • Click "Manifest" in left sidebar
- • Verify all manifest fields are correct
- • Click "Icons" section to preview PWA icons
- • Check for any error messages
3. Console Warnings
- • Check Console tab for warnings like:
- "Manifest: property 'icons' ignored, type array expected"
- "Failed to load resource: the server responded with a status of 404"
Google Lighthouse Favicon Audit
Lighthouse is Google's automated tool for testing PWA readiness, performance, and best practices including favicons.
Running a Lighthouse Audit
Method 1: Chrome DevTools (Free)
- Open your website in Chrome
- Open DevTools (F12) → Lighthouse tab
- Select "Progressive Web App" and "Best Practices"
- Click "Analyze page load"
- Wait 30-60 seconds for results
Method 2: PageSpeed Insights (Online)
- Go to PageSpeed Insights
- Enter your website URL
- Click "Analyze"
- Review "PWA" section in results
Lighthouse Favicon Checks
✓ Manifest contains a 192px icon
Required for installability. Must be in manifest.json.
✓ Manifest contains a 512px icon
Required for splash screen. Must be PNG format.
✓ Manifest icons are valid PNG
Must be proper PNG format with correct MIME type.
✓ Apple touch icon exists
Not required for PWA score but improves iOS experience.
Mobile Device Testing
Real device testing is crucial because desktop browser simulation doesn't perfectly replicate mobile behavior.
Testing on iPhone/iPad
1. Safari Icon Test
- Open your site in Safari
- Tap Share button (square with arrow)
- Scroll down and tap "Add to Home Screen"
- Check the icon preview - should be sharp and clear
- Verify it uses your apple-touch-icon.png (180x180)
- Tap "Add" and check home screen icon quality
2. What to Check
Common Testing Scenarios
Scenario: Testing After Update
You've updated your favicon but the old one still shows.
Testing Steps:
- Add version query string: `favicon.png?v=2`
- Clear browser cache (Ctrl+Shift+Del)
- Hard reload (Ctrl+F5 or Cmd+Shift+R)
- Test in incognito/private window
- Check DevTools → Application → Clear storage
- Test on different browser (cache is browser-specific)
Scenario: Testing Dark Mode Adaptation
You have an SVG favicon with dark mode support.
Testing Steps:
- Open site in Chrome/Firefox (SVG favicon support)
- Enable OS dark mode
- Verify favicon changes to light colors
- Switch to light mode
- Verify favicon changes to dark colors
- Test in Safari (should use PNG fallback - no dark mode switch)
Scenario: Testing Transparency
Your favicon has a transparent background.
Testing Steps:
- Test in light theme browser - background should be light
- Switch to dark theme - background should be dark
- Check in Firefox (sometimes renders differently)
- Test in Windows (black background) vs macOS (gray background)
- Verify logo is visible on both light and dark backgrounds
Automated Testing Tools
Favicon Checker
Comprehensive favicon validation tool by RealFaviconGenerator.
- ✓ Checks all major platforms
- ✓ Validates manifest.json
- ✓ Tests file accessibility
- ✓ Provides detailed report
SEOptimer Favicon Checker
Quick online tool for basic favicon validation.
- ✓ Fast scan
- ✓ Checks existence
- ✓ Validates dimensions
- ✓ Tests file format
Manifest Validator
Validates your PWA manifest.json structure and syntax.
- ✓ JSON syntax validation
- ✓ PWA spec compliance
- ✓ Icon reference checking
- ✓ Detailed error messages
Maskable.app Editor
Test adaptive/maskable icons for Android PWAs.
- ✓ Preview all device shapes
- ✓ Safe zone visualization
- ✓ Export optimized maskable icon
- ✓ Before/after comparison
Debugging Common Failures
Problem: Favicon Returns 404
Browser requests favicon but server returns "404 Not Found".
Diagnosis:
- Open DevTools → Network tab
- Filter for "favicon"
- Reload page
- Look for red 404 status codes
- Click the request to see full URL being requested
Common Causes:
- ✗ Wrong file path in HTML (case-sensitive!)
- ✗ File uploaded to wrong directory
- ✗ Typo in filename
- ✗ File not deployed to production server
- ✗ CDN not updated after file upload
Solution:
- → Verify file exists: try accessing directly in browser
- → Check HTML link href matches actual filename
- → Ensure file is in public/root directory
- → Clear CDN cache if using one
Browser-Specific Testing Notes
| Browser | Special Considerations |
|---|---|
| Chrome | • Caches favicons aggressively • Use Application tab to debug PWA manifests • Desktop PWA install affects Windows Start Menu |
| Firefox | • Best SVG favicon support • Page Info → Media shows loaded favicon • Private window ignores cache completely |
| Safari | • No SVG favicon support (uses PNG fallback) • iOS rounds corners on home screen icons • Requires apple-touch-icon for best quality |
| Edge | • Same engine as Chrome (Chromium) • Desktop PWA integration with Windows • Windows tiles use browserconfig.xml |
| IE 11 | • Requires ICO format (PNG not supported) • Only checks /favicon.ico in root • No PWA or manifest support |
Final Testing Checklist
Before Deployment Sign-Off
Generate Test-Ready Favicons
Our favicon generator creates optimized, validated icons that pass all Lighthouse tests. Get production-ready favicons with implementation code and testing guidance.
Generate Favicons Now →