Favicon Checker
About Favicons
A favicon (favorite icon) is a small icon that appears in browser tabs, bookmarks, and address bars. Modern websites should provide multiple favicon formats for different devices and platforms.
Common Favicon Formats
| Format | Filename | Size | Use Case |
|---|---|---|---|
| .ico | favicon.ico | 16x16, 32x32, 48x48 | Traditional format for browsers |
| .png | favicon.png | 32x32, 192x192 | Modern browsers, Android home screen |
| .svg | favicon.svg | Scalable | Modern browsers with vector support |
| Apple Touch Icon | apple-touch-icon.png | 180x180 | iOS home screen and Safari |
How to Implement Favicons
1. Basic Favicon (ICO Format)
<!-- Place in <head> section -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">2. PNG Favicons (Multiple Sizes)
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">3. SVG Favicon (Scalable)
<link rel="icon" type="image/svg+xml" href="/favicon.svg">4. Apple Touch Icon
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">5. Complete Implementation
<!-- Comprehensive favicon setup -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Best Practices
- Provide multiple formats: ICO for legacy support, PNG for flexibility, SVG for scalability
- Multiple sizes: Include 16x16, 32x32, and 180x180 (Apple) at minimum
- Keep it simple: Favicons should be simple and recognizable at small sizes
- Use consistent branding: Favicon should match your brand colors and logo
- Test across devices: Check how your favicon appears on different browsers and devices
- Optimize file size: Keep favicon files small for faster loading
- Use root directory: Place favicon.ico in your site's root for automatic detection
Generating Favicons
You can use online tools to generate all required favicon sizes from a single image:
Common Issues
- Caching: Browsers aggressively cache favicons. Clear cache or hard refresh (Ctrl+F5)
- Wrong path: Ensure favicon links use absolute paths or correct relative paths
- Missing MIME type: Server should serve .ico files with correct MIME type
- File not found: Check that favicon files are actually uploaded to your server
Related Tools
- Meta Tag Generator - Create meta tags
- Image Optimizer - Optimize favicon images
- Meta Tag Analyzer - Analyze page metadata
- HTML Minifier - Optimize HTML
- Page Speed Analyzer - Performance check