PNG to ICO Converter

Build a multi-resolution Windows .ico favicon from a PNG. Output contains 16×16, 32×32, 48×48 and 64×64 versions in a single file — ready to drop into your site as favicon.ico.

Drop a square PNG here, or click to choose

For best results upload at least 256×256 · Stays in your browser

100% private — processed in your browser. No upload, no server.

What is a .ico file and why do you still need one?

The Windows ICO format is a container that holds multiple raster images in a single file — typically the same icon at several different pixel sizes. When an OS or browser displays the icon, it picks the closest available size to whatever it needs (16×16 in a browser tab, 32×32 in a desktop shortcut, 48×48 in Windows Explorer's "Medium" icon view, 256×256 in "Extra Large"). Having multiple sizes inside one file ensures the icon looks crisp at every place it appears.

For websites, favicon.ico at the root of your domain is the longest-standing way to ship a browser-tab icon. Modern browsers also support PNG-based favicons declared via <link rel="icon"> tags, and arguably you should ship both for maximum compatibility — Internet Explorer and some legacy crawlers still look for /favicon.ico specifically. Building both takes a minute; not having an ICO is a small but real reason a fraction of your visitors see a default browser icon instead of your brand.

How this converter works

You upload a single, large PNG. The tool resamples it down to each of the sizes you've ticked (16×16, 32×32, etc.), encodes each size as a PNG-inside-ICO entry (modern .ico files can hold PNG payloads as well as the older BMP-style format), and stitches them together into a valid .ico binary. The browser downloads the result as favicon.ico.

The ICO container format is straightforward: a 6-byte header, one 16-byte directory entry per included size, then the raw PNG data for each size concatenated together. We build this in JavaScript using a Uint8Array and DataView, no external library required. The whole thing runs locally in your browser — your PNG never leaves your device.

Why a square source matters

Icons are always square (16×16, 32×32, etc.), so non-square source PNGs get stretched or letterboxed during the resize. The simplest path is to upload a square source. If your logo isn't square, crop it to a square first with the PNG Cropper (use the 1:1 preset), or add transparent padding so the visible content is centred in a square frame.

For source resolution: aim for at least 256×256. Anything smaller will be upscaled to fit the larger ICO sizes, which produces a soft/blurry result. Vector or 512×512+ PNGs always give the best output.

Which sizes should I include?

16×16 — browser tab favicon. Always include.
32×32 — high-DPI browser tab, Windows taskbar pinned-site icon. Always include.
48×48 — Windows Explorer medium-icon view. Recommended.
64×64 — Windows large-icon view, some Linux desktop environments. Recommended.
128×128 — Mac OS X dock (rare for .ico, more common for .icns). Optional.
256×256 — Windows "Extra Large" icon view, modern bookmark thumbnails. Optional but adds significant file size — only include if you ship the .ico beyond browser-tab use.

The 16, 32, 48, 64 set (the default) covers every realistic browser and desktop use without bloating the file. Toggle on 128/256 only for desktop app icons or detailed dashboard favicons.

Installing your new favicon.ico

Once downloaded, rename the file favicon.ico if it isn't already, then:

Upload it to the root of your website's document directory (the same level as your index.html / index.php).
Modern browsers will pick it up automatically when they see /favicon.ico. No HTML tag is strictly required, but adding one belt-and-braces is recommended.
In your site's <head> add:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">

Browsers can be aggressive about caching favicons — if you replace your old favicon, users may see the old one until they force-refresh. Adding ?v=2 to the URL once is a common trick to force re-fetch.

Tips and best practice

Design for 16×16 specifically. Tiny icons can't carry detail. Simple shapes, high contrast, very few colours. A logo with 6 lines of fine detail will be unreadable at favicon size.
Test what your favicon looks like at 16×16 by looking at the browser tab. If you have to squint to recognise it, simplify the design.
Transparent backgrounds work well for both light and dark browser themes. If your icon includes white that should stay white, make sure the alpha channel is correct in the source PNG.
If your logo is rectangular, design a square "mark" version specifically for icons — initial letter, abstracted shape, or compact glyph.

FAQs

Will transparency be preserved?

Yes. Modern PNG-in-ICO supports the full 8-bit alpha channel.

Is one .ico enough, or do I also need PNG favicons?

One .ico covers most browsers. For maximum coverage (especially on modern phones and tablets), add PNG favicons and an apple-touch-icon as shown above.

Why does my new favicon not appear in the browser?

Almost always cache. Force-refresh (Ctrl+F5 / Cmd+Shift+R), open in a private window, or add a cache-busting query string.

How big should the source PNG be?

At least 256×256. 512×512 is a good safe target.

Is anything uploaded?

No. The conversion runs in your browser.

Can I include sizes bigger than 256?

The ICO format technically supports up to 256×256 per entry without a workaround. We cap at 256 to ensure compatibility.