Generating a Complete Favicon Set for Your Website
Generating a Complete Favicon Set for Your Website
A favicon is the small icon that represents your website in browser tabs, bookmarks, shortcut menus, and mobile home screens. Despite being tiny, favicons are important for branding and user experience — they help users identify your site at a glance among many open tabs. Modern web development requires multiple favicon sizes to support different devices and contexts, and generating them all from a single source image ensures visual consistency.
Which Favicon Sizes Do You Need?
Different platforms and contexts use different favicon sizes:
16x16 and 32x32 — Browser tabs and bookmarks. These are the traditional favicon sizes displayed in browser tabs, address bars, and bookmark lists. The 16x16 size is the original standard; 32x32 is used on high-DPI (Retina) displays. The .ico format traditionally contains both sizes.
48x48 — Desktop shortcuts. When users create a desktop shortcut to your website, Windows uses a 48x48 icon. This size is included in the .ico file for compatibility with older Windows systems.
180x180 — Apple touch icon. iOS devices use this size when users add your website to their home screen via Safari. It is referenced with a tag. This is a PNG file, not part of the .ico.
192x192 — Android Chrome home screen. Android devices use this size when users add your site to their home screen via Chrome. It is also the minimum size required for PWA (Progressive Web App) manifest icons.
512x512 — PWA manifest and splash screens. This large size is used for PWA splash screens and high-resolution displays. It is referenced in the web app manifest.json file.
The .ico File
The .ico format is a multi-resolution icon container that can hold several sizes in one file. Our generator produces a .ico file containing 16x16, 32x32, and 48x48 PNG entries. The browser automatically selects the appropriate size based on the display context.
The .ico file is the traditional favicon format and is still required for maximum compatibility, especially with older browsers. Modern browsers can use individual PNG files, but including an .ico ensures your favicon displays correctly everywhere.
Preparing Your Source Image
Square is best. The tool auto-crops non-square images to square by center-cropping. For best results, start with a square image or an image that is close to square. Extreme cropping may cut off important parts of your logo.
High resolution. Use a source image that is at least 512x512 pixels. The generator downscales to smaller sizes, and starting with a high-resolution image ensures the small sizes are crisp and clear.
Simple design. Favicons are displayed at very small sizes (16x16 pixels). Complex designs with fine details will be unrecognizable at that scale. Use a simple, bold design — a single letter, a simple shape, or a clear logo mark.
Strong contrast. At small sizes, subtle color differences disappear. Use high contrast between the icon and its background to ensure the favicon is visible in browser tabs.
Adding Favicons to Your Website
After generating and downloading the favicon set, add these tags to the section of your HTML:
```
```
For PWA support, add these entries to your manifest.json:
```
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
]
```
Upload all the PNG files and favicon.ico to your website root directory.
Why Not Just Use One Size?
You might wonder why you cannot just use a single 32x32 favicon. The answer is platform fragmentation:
- iOS ignores .ico files entirely and requires a 180x180 PNG for Apple touch icons.
- Android requires 192x192 and 512x512 PNG files for home screen and PWA support.
- Older browsers only support .ico and may not display PNG favicons.
- High-DPI displays need larger icons to appear sharp.
Providing all sizes ensures your favicon looks correct on every device and in every context.
Try the Favicon Generator to create your complete favicon set.