PNG to ICO Converter: Create Favicon from PNG

Create Favicon-Sized PNGs from a Source Image

True ICO file generation requires writing a binary container format that the Canvas API does not support. Instead, this tool focuses on what the Canvas API does well: resizing your PNG to the standard favicon dimensions that modern browsers accept directly.

Modern favicon deployment uses PNG files declared with <link> tags, making the ICO container optional for most projects.

How It Works

1. Drop or select a PNG image (ideally square, at least 512x512)
2. Use the resize controls to set your target dimensions
3. The tool draws the image onto a Canvas at the specified size
4. Export the resized PNG
5. Repeat for each favicon size you need

The resize controls open by default on this page so you can immediately set your target dimensions.

Favicon Sizes You Actually Need

Not every guide agrees on favicon sizes, but here is a practical breakdown based on where each size is actually used:

For a minimal setup that covers most cases:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Modern Favicon Best Practices

Start with a high-resolution source

Begin with a PNG at 512x512 or larger. Scaling down from a high-resolution source produces clean results. Scaling up from a 16x16 icon produces blurry output. If your logo has fine detail, consider simplifying it for small sizes rather than relying on automatic downscaling.

SVG favicons: the modern approach

If your icon works as vector art, an SVG favicon is the best option:

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

SVG favicons scale to any size without generating multiple files. They can even respond to the user’s color scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #333; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M16 2 L2 30 L30 30 Z"/>
</svg>

Include a PNG fallback for Safari, which does not support SVG favicons.

The favicon.ico fallback

Despite modern alternatives, placing a favicon.ico file at the site root is still useful. Browsers request /favicon.ico by default when no icon link tag is present. Some tools (RSS readers, bookmarklets, enterprise proxies) only look for favicon.ico. If you need a true ICO file, use a dedicated ICO encoder that can bundle multiple sizes into the container format.

PWA manifest icons

Progressive Web Apps require icons declared in manifest.json:

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

Generate these sizes from your source PNG and reference them in the manifest. The 512x512 version is used for install prompts and splash screens on Android.

Tips for Clean Downscaling

Use pixel-perfect alignment at small sizes

A 16x16 icon has very few pixels to work with. If your design has thin lines, they may disappear or become blurry at 16x16. Some designers create hand-tuned versions specifically for 16x16 and 32x32.

Ensure sufficient contrast

Favicons appear on various background colors (light tabs, dark tabs, bookmark bars). Test your icon on both light and dark backgrounds.

Keep it simple

Text is unreadable at 16x16. A letterform or simple symbol works better than a detailed logo at favicon sizes.

For extracting images from existing ICO files, see ICO to PNG. For embedding images as data URIs, see the Base64 Encoder. For other format conversions, return to the Image Converter.