Complete Guide to Favicons: Sizes, Formats & Best Practices
What Is a Favicon?
A favicon (favorite icon) is the small icon displayed in browser tabs, bookmarks, and history. It's one of the most overlooked yet important elements of web branding. A missing or broken favicon makes your site look unfinished. Every website — from personal blogs to enterprise apps — needs one.
Required Favicon Sizes
Modern websites need favicons in multiple sizes. The classic 16×16 is used in browser tabs. 32×32 is used for taskbar shortcuts and higher-DPI tabs. Apple devices require a 180×180 apple-touch-icon. Android and PWA manifests need a 512×512 icon for splash screens and app install prompts.
Favicon Formats
The traditional .ICO format bundles multiple sizes into one file but is being replaced by PNG and SVG. Modern browsers support PNG favicons natively. SVG favicons scale perfectly to any size and support dark mode via CSS media queries. For maximum compatibility, provide both an .ICO file (for legacy browsers) and PNG files for modern browsers.
Design Tips
Favicons are tiny — keep the design extremely simple. Use a single letter, symbol, or simplified version of your logo. Avoid fine details that disappear at small sizes. Use bold colors with high contrast. Test your favicon at 16×16 to ensure it's still recognizable. Your favicon should be instantly identifiable among dozens of browser tabs.