PNG to ICO — Convert Images to Favicon Format

PNG is the best format for favicon design work. ICO is the format browsers expect at the site root. Converting PNG to ICO is the final step in creating a favicon that works everywhere.

Use the Favicon Generator to convert any PNG image to ICO and all required favicon sizes simultaneously.

Why ICO files are still needed

Browsers look for favicon.ico at the root of every website by default, even without any <link rel="icon"> tag. This default lookup happens automatically whenever someone visits your site.

Modern browsers support PNG favicons via <link rel="icon" type="image/png">. But:

1. The default /favicon.ico lookup still happens — if it returns a 404, that’s a console error and a failed network request
2. Some older browsers (IE 11, older Safari) only support .ico format
3. Windows taskbar and Start menu pinning uses .ico files
4. Windows Explorer shows website icons as .ico in shortcuts

The recommended approach in 2026:

1. Place favicon.ico at the site root (for default browser lookup)
2. Add PNG favicon <link> tags for modern browsers
3. Add SVG favicon for browsers that support it (adapts to dark mode)

What the ICO file format contains

An ICO file is a container format. Unlike PNG (one image) or SVG (one vector), ICO can embed multiple images at multiple sizes in a single file.

A typical multi-size favicon.ico contains:

• 16×16 px version (browser tab)
• 32×32 px version (taskbar, larger tabs)
• 48×48 px version (desktop shortcut)

The browser picks the most appropriate size for the context. For a 16px tab icon, it uses the 16px embedded image. For a 32px shortcut icon, it uses the 32px image.

ICO vs multiple PNG files: An ICO with 16, 32, and 48px versions is roughly 4–8KB total. Three separate PNG files would be similar in total size but require separate <link> tags. The ICO approach is cleaner for the browser’s default lookup.

How to convert PNG to ICO

Requirements for the source PNG

• Minimum size: 64×64 px (ideally 512×512 or larger)
• Format: PNG-32 (with alpha transparency) or PNG-24 (solid background)
• Shape: square (1:1 ratio)
• Content: simple, readable at 16px

Using the Favicon Generator

1. Open the Favicon Generator
2. Upload your square PNG (ideally 512×512)
3. The tool generates ICO with embedded 16, 32, and 48px versions
4. Download favicon.ico and place it in your site’s root directory

Command-line conversion (ImageMagick)

# Basic PNG to ICO:
convert input.png favicon.ico

# Multi-size ICO (recommended):
convert input.png -define icon:auto-resize=64,48,32,16 favicon.ico

# From high-res source with specific sizes:
convert input-512.png -resize 16x16 favicon-16.png
convert input-512.png -resize 32x32 favicon-32.png
convert input-512.png -resize 48x48 favicon-48.png
convert favicon-16.png favicon-32.png favicon-48.png favicon.ico

Python (Pillow)

from PIL import Image

def create_favicon(source_path, output_path, sizes=[(16, 16), (32, 32), (48, 48)]):
    img = Image.open(source_path)
    
    # Convert to RGBA if not already (for transparency support):
    if img.mode != 'RGBA':
        img = img.convert('RGBA')
    
    # Create ICO with multiple sizes:
    img.save(
        output_path,
        format='ICO',
        sizes=sizes
    )
    print(f"Created {output_path} with sizes: {sizes}")

create_favicon('logo-512.png', 'favicon.ico')

Node.js (sharp + to-ico)

const sharp = require('sharp');
const toIco = require('to-ico');
const fs = require('fs');

async function createFavicon(sourcePath) {
  const sizes = [16, 32, 48];
  
  // Generate PNG buffers for each size:
  const pngBuffers = await Promise.all(
    sizes.map(size => 
      sharp(sourcePath)
        .resize(size, size)
        .png()
        .toBuffer()
    )
  );
  
  // Convert to ICO:
  const icoBuffer = await toIco(pngBuffers);
  fs.writeFileSync('favicon.ico', icoBuffer);
  console.log('favicon.ico created');
}

createFavicon('logo-512.png');

ICO file size and compression

ICO files can embed images using BMP format (no compression) or PNG format (compressed). Modern browsers support PNG-embedded ICO files (IE 6+ and all modern browsers).

PNG compression inside ICO dramatically reduces file size:

• 16+32+48 px BMP inside ICO: ~12–15 KB
• 16+32+48 px PNG inside ICO: ~3–5 KB

Always use PNG compression in ICO files. ImageMagick does this by default for modern versions. Pillow uses PNG when creating ICO files.

Checking favicon implementation

After deploying your favicon:

1. Clear browser cache (Ctrl+Shift+R / hard refresh) — favicons are aggressively cached
2. Check DevTools: Network tab → filter for favicon — verify favicon.ico returns 200 (not 404)
3. Verify sizes: In Chrome DevTools → Sources → find favicon.ico — right-click → Open in new tab to see what the browser received
4. Test bookmarking: Bookmark your page and check the bookmark icon
5. Test sharing: Some social platforms and chat apps use the favicon as the site thumbnail

Common PNG to ICO conversion mistakes

Converting a non-square image: ICO must be square. If your logo is rectangular, add transparent padding to make it square before converting. Forcing a rectangular image into a square ICO will distort it.

Too small source image: Converting a 32×32 PNG to an ICO that embeds a 32×32 image has no upscaling room. Start from 256×512px or larger.

Saving as ICO directly from image editors: Some editors save ICO format incorrectly — they create single-size ICO files or don’t support transparency properly. Use a dedicated favicon tool.

Not testing in a dark browser theme: If your favicon has a transparent background and dark-colored icon, it becomes invisible in dark mode browser tabs. Test against both light and dark browser themes.

SVG favicons as the alternative

For modern browsers (Chrome 80+, Firefox 41+, Safari 12+), an SVG favicon scales to any size without needing multiple embedded versions:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico">  <!-- Fallback -->

An SVG favicon is a single file (typically 1–3KB for a simple icon) that works at all sizes. It can also include a prefers-color-scheme media query to switch between light and dark versions.

However: SVG isn’t sufficient on its own — you still need favicon.ico for the default browser lookup and for browsers that don’t support SVG favicons (older iOS Safari, IE).

Related tools

• Favicon Generator — generate ICO and all PNG sizes from a single image
• Image Compressor — reduce PNG file sizes
• Color Picker — pick background colors for favicons