Complete Favicon Guide - Sizes, Formats, and Implementation
What Is a Favicon?
A favicon (short for "favorite icon") is the small icon displayed in browser tabs, bookmarks, and search results. It's a crucial visual element for brand recognition, helping users quickly identify your site when multiple tabs are open.
A site without a favicon shows a default icon (typically a globe), which undermines professional credibility. Since it takes minimal effort to set up, always configure a favicon when publishing a website.
Required Favicon Sizes and Formats
Modern websites need favicons in multiple sizes and formats.
**Essential Favicons** - favicon.ico (32x32px): For legacy browser compatibility. ICO format can contain multiple sizes in one file. - apple-touch-icon.png (180x180px): For iPhone/iPad home screens. - favicon-192.png (192x192px): For Android PWA. - favicon-512.png (512x512px): For PWA splash screens.
**Recommended Favicons** - favicon.svg: Vector format that stays crisp at any size. Can support dark mode via CSS media queries. - favicon-16.png (16x16px): For some older browsers.
**For PWA Support** Define icon paths and sizes in a site.webmanifest file. You'll need 192x192px and 512x512px PNG images.
ICO vs PNG vs SVG
**ICO Format** The most established favicon format with near-universal browser support. Its unique ability to store multiple sizes (16x16, 32x32, 48x48px) in a single file makes it essential for legacy compatibility.
**PNG Format** The standard for modern browsers. Supports transparency (alpha channel) and is used for larger icons like Apple Touch Icons.
**SVG Format** Vector-based, so it renders crisply at any size. Can adapt colors for dark mode using CSS media queries. However, not all browsers support it, so pair it with ICO and PNG fallbacks.
How to Add Favicons to Your HTML
Add favicon references in your HTML <head> section:
Basic setup: <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Frameworks like Next.js and React often auto-detect favicon files placed in the public folder.
After setup, clear your browser cache to verify the correct icon appears. Cached versions of old icons can persist otherwise.
Favicon Design Tips
1. **Keep it simple**: Favicons can be displayed as small as 16x16px. Fine details will be lost, so prioritize recognizability.
2. **Use brand colors**: Maintain visual consistency by using your site's theme colors.
3. **Use transparent backgrounds**: PNG and SVG formats support transparency, ensuring visibility in both dark and light modes.
4. **Generate all sizes at once**: Manually creating each size is tedious. YuruLabs' Favicon Generator creates all required sizes and formats from a single image.
5. **Test on real browsers**: Check favicon display across multiple browsers and devices in a deployed environment, not just locally.