ICO to PNG Converter: Extract PNG from ICO Files

Convert ICO to PNG

ICO (Windows Icon) is a container format designed to hold multiple versions of an icon at different sizes and color depths. It is best known as the format for favicon.ico, the small icon displayed in browser tabs and bookmarks. This tool extracts a PNG image from an ICO file using your browser’s native rendering.

How It Works

1. Drop or select an ICO file
2. The browser’s image decoder reads the ICO container and selects an embedded image to render
3. The rendered image is drawn onto a Canvas element
4. The Canvas exports PNG data via toDataURL('image/png')
5. Download the PNG

The browser handles ICO parsing natively. It selects the most appropriate size from the embedded images, typically the largest available variant.

Understanding the ICO Format

ICO is not a single image format. It is a container that bundles multiple images, each at a different resolution and bit depth. A typical favicon.ico might contain:

Each embedded image can be stored as either a BMP variant (raw pixel data with an AND mask for transparency) or as a full PNG. The 256x256 size is almost always PNG-encoded because BMP at that resolution would be unnecessarily large.

When the browser renders an ICO file in an <img> tag, it picks one of these embedded images based on the display context. The Canvas export captures whichever one the browser selected.

Favicon Workflows

Inspecting a favicon

You found a favicon.ico and want to see what is actually inside it. Converting to PNG gives you a standard image file you can open in any viewer, zoom in on, check for transparency, or inspect in a design tool.

Extracting for reuse

You need the icon as a PNG for a README, a Slack integration, a tool dashboard, or an API avatar endpoint. Most platforms do not accept ICO files. Extracting to PNG gives you a universally compatible format.

Favicon debugging

Favicons behave inconsistently across browsers. Chrome, Firefox, and Safari handle ICO files differently, and caching makes debugging harder. Converting the ICO to PNG lets you verify the actual image content independent of browser rendering behavior.

Recovering a source image

Sometimes the only surviving version of a logo or icon is the favicon.ico on an old website. Extracting to PNG at least gives you a usable raster starting point, even if the resolution is limited.

ICO vs. Modern Favicon Approaches

The traditional favicon.ico approach is being replaced by PNG and SVG favicons:

<!-- Traditional -->
<link rel="icon" href="/favicon.ico">

<!-- Modern: PNG at multiple sizes -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">

<!-- Modern: SVG (scales to any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

SVG favicons are supported in Chrome, Firefox, and Edge (not Safari as of 2024). They scale perfectly to any tab size and can even respond to prefers-color-scheme for dark mode icons. The PNG approach gives you explicit control over each size with broader browser support.

Despite these modern options, favicon.ico remains relevant because browsers fall back to it automatically when no other icon link is specified, and it is the only format some older tools and crawlers recognize.

For creating favicons from PNG, see PNG to ICO. For encoding images as data URIs, see the Base64 Encoder. For other format conversions, return to the Image Converter.