The Complete Guide to ICO Files — Favicons for Every Browser
Favicons seem simple — a tiny icon in the browser tab. In practice, they’re one of the most fragmented areas of web development, with different browsers and platforms expecting different sizes, formats, and file names.
What Is an ICO File?
ICO (Windows Icon) is a container format that holds multiple images at different sizes inside a single file. This is its superpower: one favicon.ico can contain 16x16, 32x32, 48x48, and 256x256 versions, and the browser picks the appropriate one.
What Sizes Do You Actually Need?
| Size | Used By |
|---|---|
| 16x16 | Browser tab (default) |
| 32x32 | Browser tab (retina), Windows taskbar |
| 48x48 | Windows desktop shortcut |
| 180x180 | Apple touch icon (iOS Safari) |
| 192x192 | Android Chrome home screen |
| 256x256 | Windows high-DPI, various contexts |
| 512x512 | PWA splash screen, Google search results |
The Minimal Setup
For most websites, you need three files:
<!-- ICO for legacy support (place in site root) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- High-res PNG for modern browsers -->
<link rel="icon" href="/favicon-512.png" type="image/png" sizes="512x512">
<!-- Apple touch icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
The ICO file should contain 16x16, 32x32, 48x48, and 256x256 versions. KoalaPic’s PNG to ICO converter generates all four sizes automatically.
Starting from SVG (Best Approach)
If your logo is in SVG format, you get the best results because each size is rendered from the vector source independently — no upscaling or downscaling artifacts.
Use the SVG to ICO converter to generate your multi-size favicon directly from the vector.
Starting from PNG
If you have a PNG logo, ensure it’s at least 512x512 pixels. Smaller source images produce blurry favicons when scaled down to 16x16. The algorithm needs enough detail to work with.
Upload your PNG to the PNG to ICO converter and download the ready-to-use ICO file.
SVG Favicons (Modern Browsers)
Modern browsers also support SVG favicons, which scale perfectly and even support dark mode via prefers-color-scheme:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Use both ICO (fallback) and SVG (modern):
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Common Mistakes
- Using only one size: A 16x16 favicon looks terrible on a retina display or Windows taskbar
- Forgetting apple-touch-icon: iOS Safari uses a separate
apple-touch-icon.png(180x180) - Not placing favicon.ico in the root: Some older browsers only look for
/favicon.ico - Using JPEG: Favicons need transparency support — use PNG or SVG as source, not JPEG
- Low source resolution: Start with at least 512x512 for clean downscaling
Testing Your Favicon
After adding your favicon, clear your browser cache and verify it appears in: - The browser tab - Bookmarks - Your phone’s home screen (add to home screen)
Next Steps
- Generate your favicon: PNG to ICO | SVG to ICO
- Learn about SVG to PNG conversion for other use cases
- Read our web image optimization guide