Most favicon guides either underspecify the problem or tell you to generate a giant bundle of files for every possible platform. In practice, most sites need a smaller, cleaner setup that still covers browser tabs, bookmarks, touch icons, and common mobile launch surfaces.
A sensible minimum file set
- favicon.ico for classic browser and Windows compatibility.
- favicon-32x32.png for modern browser use.
- favicon-16x16.png for small fallback scenarios.
- apple-touch-icon.png at 180x180 for iOS shortcuts.
- android-chrome-192x192.png and optionally 512x512 for PWA-style usage.
When ICO still matters
ICO is still useful because it remains well-supported for classic favicon behavior and Windows icon contexts. If you only ship PNGs, many browsers will still cope, but an ICO file is still a useful compatibility layer.
Recommended HTML tags
<link rel="icon" href="/favicon.ico" sizes="any">
<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">For many sites, that is enough. You can add manifest assets later if your product truly needs them.
How to create the ICO file
- Start with a clean square source image.
- Make sure the icon remains recognizable at small sizes.
- Use the PNG to ICO converter to export the ICO file.
- Keep separate PNG versions for touch and PWA use when needed.
Common mistakes
- Using artwork that is too detailed for 16x16.
- Shipping only a huge image and hoping browsers scale it well.
- Forgetting Apple touch icons when mobile shortcut polish matters.
- Using weak contrast that disappears on browser chrome.
- Keeping broken or duplicated favicon tags after redesigns.
Ready to make the ICO file?
Start with a square PNG or JPG and export an ICO file directly in the browser.
Convert Image to ICO