ICO Converter — Create Favicon and Icon Files the Right Way

# ICO Converter — Create Favicon and Icon Files the Right Way

The humble favicon — that tiny icon in your browser tab — has a surprisingly complicated history. What started as a simple 16x16 pixel bitmap in Internet Explorer 5 (1999) has evolved into a multi-format, multi-resolution system that most web developers get wrong.

Let's fix that.

What an ICO File Actually Is

An ICO file isn't a single image. It's a container that holds multiple images at different resolutions and color depths, all packed into one file. When Windows or a browser needs an icon, it picks the most appropriate size from the container.

A well-constructed favicon.ico might contain:

• 16x16 pixels — browser tabs, bookmark bars
• 32x32 pixels — Windows taskbar, higher-DPI browser tabs
• 48x48 pixels — Windows desktop icons

A Windows application icon (the .ico embedded in an .exe) typically includes more sizes:

• 16x16, 24x24, 32x32, 48x48, 64x64, 128x128, 256x256

The 256x256 version is usually PNG-compressed within the ICO container (yes, ICO supports embedded PNG for large sizes). The smaller sizes use uncompressed BMP data for maximum compatibility.

The Modern Favicon Setup (2026)

Here's what actually works across all browsers and platforms right now. I've tested this across Chrome, Firefox, Safari, Edge, and various mobile browsers:

The minimal setup (covers 99% of use cases):

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

That's it. Three files.

favicon.ico — 32x32, for legacy browsers and fallback. Some browsers still look for /favicon.ico at the root even without a tag. icon.svg — a single SVG that scales to any size. Modern browsers (Chrome 80+, Firefox 41+, Safari 15.4+) support SVG favicons. The huge advantage: one file works at every resolution, and you can use CSS media queries inside the SVG for dark mode support. apple-touch-icon.png — 180x180 PNG. Apple devices use this when someone adds your site to their home screen. Safari ignores SVG favicons for this purpose.

If You Also Need a Web App Manifest

For Progressive Web Apps or sites that want nice icons when pinned/installed:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Add 192x192 and 512x512 PNG files. These are used by Android Chrome, Windows PWA installation, and other platforms.

Creating the ICO File

You need to go from a source image (usually your logo as a PNG or SVG) to a properly formatted ICO file with the right sizes embedded.

MyPDF's ICO Converter takes your source image and generates a multi-resolution ICO file containing 16x16, 32x32, and 48x48 versions. Upload a high-resolution PNG or JPG, and it handles the resizing and packaging.

For the full Windows application icon set (up to 256x256), GIMP can export ICO files with custom size selection: File > Export As > change extension to .ico > select which sizes to include in the dialog.

Common Mistakes

Using a photograph as a favicon. At 16x16 pixels, a photo is an unrecognizable blob. Favicons need simple shapes, bold colors, and high contrast. A single letter or a geometric logo works best. Only including 16x16. On high-DPI displays (which are now the majority), a 16x16 icon gets scaled up and looks blurry. Include 32x32 at minimum. Forgetting the apple-touch-icon. Without it, Apple devices will take a screenshot of your webpage and use that as the home screen icon. It looks terrible — a tiny, unreadable thumbnail of your site. Using PNG instead of ICO for the fallback. While modern browsers handle fine, some older systems specifically look for favicon.ico. Having both covers all bases. Not testing in a private/incognito window. Browsers aggressively cache favicons. You'll change the icon, reload, and see the old one for days. Incognito mode or clearing the favicon cache is the only way to verify your changes.

Windows Application Icons

If you're building a Windows application (or an Electron app), the ICO requirements are different from web favicons:

• Include all sizes from 16x16 to 256x256
• The 256x256 version should be PNG-compressed (keeps the .ico file under 300 KB)
• Windows 10/11 uses the 256x256 version for high-DPI displays and the Start menu
• The 48x48 version shows in Explorer's default icon view

For Electron apps, you'll also need a .icns file for macOS (which is a different multi-resolution container format) and a 512x512 PNG for Linux.

SVG Favicon: The Dark Mode Trick

One genuinely cool feature of SVG favicons is dark mode support. You can embed a CSS media query inside the SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      path { fill: #e0e0e0; }
    }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

Your favicon automatically adapts when the user switches between light and dark mode. No JavaScript, no multiple files. This is one of those small details that makes a site feel polished.

Related Tools

• ICO Converter — Create multi-resolution ICO files from any image
• Image Resize — Resize images to specific dimensions for icons and favicons
• PNG to SVG — Trace a PNG logo to SVG for scalable favicon use
• Image to Base64 — Inline tiny favicons directly in HTML