PNG to ICO Converter

What the converter builds

An .ico file is a container, not a single picture. It holds a short header, one directory entry per icon size, and then the image data for each of those sizes packed end to end. This converter builds that container in JavaScript: your source picture is drawn onto a square canvas at each size you tick, exported as a PNG, and the resulting byte streams are assembled into a valid ICONDIR structure with the correct offsets, a colour plane count of one and 32 bits per pixel recorded for every entry. The 256 pixel entry is written as a zero in the width and height bytes, which is what the ICO specification requires, since a single byte cannot hold the number 256.

Because each size is rendered separately from your original rather than being scaled down from the largest icon, a 16 pixel entry is drawn directly from the full resolution artwork with high quality smoothing. Everything happens in your browser and nothing is uploaded to a server, so there is no queue, no watermark and no wait while a file travels to a converter and back.

Picking the sizes to include

Sixteen, 32 and 48 are ticked by default and 64, 128 and 256 are available. That default covers the cases that matter most: 16 is the browser tab, 32 is the bookmark bar and the taskbar pin, and 48 is what Windows Explorer reaches for in medium icon view. Adding 256 makes the file noticeably bigger and is mainly useful if the same .ico doubles as a desktop application icon. If the artwork has fine detail such as thin lettering, check the 16 pixel result before shipping it, because a logo that reads perfectly at 512 often turns to mush at tab size and is better replaced with a simplified mark.

A worked example

Start with a 512 x 512 PNG of a rounded square logo with a transparent corner radius. Leave 16, 32 and 48 ticked and press Download .ico. You get favicon.ico holding three PNG frames, typically four to six kilobytes in total, with the transparency preserved in every frame. Drop it in the root of your site and reference it with a single line in the head:

<link rel="icon" href="/favicon.ico" sizes="any">

Press Download favicon pack instead and you get favicon-pack.zip containing favicon.ico plus favicon-16.png, favicon-32.png and favicon-48.png, so you can also point an apple-touch-icon or a web manifest entry at a plain PNG.

What it will not do

• It does not crop. A rectangular source is stretched to fit a square, so a 1200 x 600 banner will come out squashed. Crop to a square first.
• It does not go the other way. There is no ICO to PNG extraction here.
• It does not read SVG files. Export your vector to a large PNG first, ideally 512 or 1024 across.
• It does not add transparency. A JPEG source has an opaque background and will keep it, including in the small sizes.
• It does not produce cursor files, animated icons or Windows .icl libraries.
• It does not write the classic BMP style icon data used before Windows Vista, so extremely old software may refuse the file.

Accepted inputs are PNG, JPEG and WebP. A source of 1024 x 1024 or smaller is plenty, and going much larger only slows the initial decode. Since the whole job runs on your device, a very large source on an older phone can be slow to render at six sizes at once.

Getting it onto your site

Put favicon.ico at the web root so browsers that request /favicon.ico blindly will find it, and add the link tag as well so you control the path. Browsers cache favicons aggressively, so after replacing one you may need a hard refresh, a private window or a cache busting query string to see the change. If the icon still looks wrong in a tab, check that no service worker is serving the old file.

Better tools for the neighbouring jobs

Square your artwork first with Crop Image, or scale it down with Resize Image before converting. To change the source between formats, for instance WebP to PNG, use the Image Converter. If your logo still sits on a white rectangle, clear it with the Background Remover so the icon has a proper transparent edge. To sample the exact brand colour for a theme-color tag, use Colour Picker from Image, and to bundle the pack with other assets there is Create ZIP and Extract ZIP.

Common questions

Which sizes should a favicon contain?

Sixteen and 32 cover browser tabs, bookmarks and taskbar pins. Adding 48 helps Windows Explorer. Sizes of 128 and 256 are worth including only if the same file is also used as an application icon.

Does the .ico keep transparency?

Yes, if your source has it. Each frame is stored as a 32 bit PNG with its alpha channel intact, so a rounded or cut out logo keeps its transparent edges at every size.

Is a PNG based .ico compatible?

Every current browser and Windows Vista onwards reads PNG compressed frames inside an ICO container. Only very old software that predates that support would need the older uncompressed format, which this tool does not write.

My logo is not square. What happens?

It is stretched to fit the square icon, which distorts it. Crop the image to a 1:1 ratio first, or add padding around it so the shape sits inside a square before you convert.

What is inside the favicon pack zip?

favicon.ico plus one PNG for each size you ticked, named favicon-16.png, favicon-32.png and so on, compressed at a middling level so the archive stays small.