Favicon Creation Guide: From Design to Deployment
Favicons appear in browser tabs, bookmarks, home screens, and search results. A complete favicon set requires multiple sizes and formats to cover all platforms. This guide covers the full process from design through implementation.
Key Takeaways
- A single `favicon.ico` file is no longer sufficient.
- Favicons are displayed at 16×16 to 32×32 pixels in browser tabs.
- Place these tags in your `<head>` element:
- Using `sizes="any"` on the ICO file — specify `sizes="32x32"` instead.
- Serving the manifest from a CDN without CORS headers — it must be same-origin or have proper cross-origin headers.
Color Palette Generator
The Modern Favicon Set
A single favicon.ico file is no longer sufficient. Modern browsers and platforms expect multiple icon sizes and formats:
| File | Size | Purpose |
|---|---|---|
favicon.ico |
32×32 | Browser tabs, bookmarks, legacy support |
icon.svg |
Scalable | Modern browsers (supports dark mode via CSS media queries) |
apple-touch-icon.png |
180×180 | iOS home screen shortcut |
icon-192.png |
192×192 | Android Chrome, PWA icon |
icon-512.png |
512×512 | PWA splash screen, high-DPI displays |
icon-mask.png |
512×512 | Android adaptive icon (safe zone: center 50%) |
Design Guidelines
Keep It Simple
Favicons are displayed at 16×16 to 32×32 pixels in browser tabs. Fine details, thin lines, and small text become unreadable at this size. Use a single bold shape, letter, or symbol. Test your design at 16×16 pixels before committing — if it's not instantly recognizable at that size, simplify further.
Color and Contrast
Choose colors with strong contrast against both light and dark browser chrome. Avoid pure white (invisible on light backgrounds) and very dark colors (invisible in dark mode tabs). If your brand color has low contrast, add a colored background shape or border.
SVG Favicon with Dark Mode
SVG favicons can adapt to the user's color scheme preference:
HTML Implementation
Place these tags in your element:
Common Mistakes
Using sizes="any" on the ICO file — specify sizes="32x32" instead. Forgetting the apple-touch-icon — iOS will use a screenshot instead. Serving the manifest from a CDN without CORS headers — it must be same-origin or have proper cross-origin headers.