Favicons have evolved far beyond the tiny 16x16 pixel icons of the early web. Modern websites need a comprehensive icon set to look professional across browsers, operating systems, and devices.
Why Favicons Matter
A good favicon:
- Builds brand recognition in browser tabs and bookmarks
- Improves user experience on home screens and app launchers
- Signals professionalism — missing favicons look amateurish
The Essential Favicon Sizes
Browser Tabs and Bookmarks
- 16x16 — Classic favicon (still used in some browser tabs)
- 32x32 — Standard favicon for modern browsers
- 48x48 — Windows site pinning
Apple Devices (iOS/macOS)
- 180x180 — Apple Touch Icon (critical for iOS home screen)
Android and PWA
- 192x192 — Android Chrome home screen
- 512x512 — PWA splash screen and manifest
Special Cases
- favicon.ico — Multi-resolution ICO file (contains 16, 32, 48px)
- SVG favicon — Scalable vector for modern browsers
How to Generate All Sizes Quickly
Creating 7+ icon sizes manually is tedious and error-prone. Our FaviconDiet tool generates all required sizes from a single high-resolution image:
- Upload your logo (ideally 512x512 or larger)
- Preview how it looks at each size
- Download a complete icon package with all sizes
Implementation Code
Add these lines to your HTML <head>:
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">Design Tips for Small Icons
- Simplify: Complex logos don't work at 16px. Consider using just your logomark or initial.
- Test legibility: View your favicon at actual size before finalizing.
- Add padding: Icons look cramped without some breathing room.
- Use high contrast: Ensure visibility on both light and dark browser themes.
Common Mistakes to Avoid
- Using only favicon.ico: This ignores Apple and PWA requirements.
- Low-resolution source: Always start with at least 512x512.
- Transparent background issues: Test on dark mode browsers.
Frequently Asked Questions
Do I really need all these sizes?
At minimum, include: 32x32 PNG, 180x180 Apple Touch Icon, and a manifest.json with 192x192 and 512x512 icons. Our generator creates the complete set automatically.
Should I use SVG favicons?
SVG favicons are great for scalability but have limited browser support. Use them as an enhancement, not a replacement.
How do I test my favicon?
Clear your browser cache (Ctrl+Shift+R), check in incognito mode, and test on actual mobile devices.