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?

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

1. Using only one size: A 16x16 favicon looks terrible on a retina display or Windows taskbar
2. Forgetting apple-touch-icon: iOS Safari uses a separate apple-touch-icon.png (180x180)
3. Not placing favicon.ico in the root: Some older browsers only look for /favicon.ico
4. Using JPEG: Favicons need transparency support — use PNG or SVG as source, not JPEG
5. 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