PNG to ICO

PNG to ICO conversion turns one PNG image into an ICO file, the container format behind the classic favicon.ico. A good conversion does not just rename the file or wrap a single picture: it renders the image at several sizes, 16, 32 and 48 pixels for a favicon, and stores all of them as separate layers inside one ICO, so each place that shows the icon gets a version drawn for its size.

This guide explains what an ICO file really is, opens a real favicon.ico byte by byte, shows how to convert PNG, JPG and WebP sources the right way, and lists the mistakes that make a converted icon look blurry or broken. Every measurement here comes from files we generated and then read back, not from a spec summary copied from elsewhere.

What an ICO file is

An ICO file is a small container that holds one or more images of different sizes, each with its own pixel data. It starts with a six-byte header, followed by one sixteen-byte directory entry per image, followed by the image data itself. The header says how many images the file holds; each directory entry says how wide and tall its image is, how many bits per pixel it uses, how many bytes its data takes and where in the file that data starts.

That structure is the whole point of the format. A PNG holds exactly one picture at one size. An ICO can hold a 16 pixel version drawn crisp for a tab, a 32 pixel version for a denser screen, and a 48 pixel version for larger surfaces, all in one file at one address. Whatever displays the icon can choose the layer that fits.

The image data inside an ICO can be stored in one of two ways: as a bitmap (a device-independent bitmap without the usual file header) or as an embedded PNG. Both are allowed by the format. Which one a converter writes affects the file size, as the measurement below shows.

Inside a real favicon.ico, byte by byte

We generated a favicon.ico from a square PNG and read its directory back. This is what it contains:

The header plus three directory entries take 6 + 3 x 16 = 54 bytes, which is why the first layer starts at byte 54. Each layer starts with the four bytes 28 00 00 00, the signature of a 40-byte bitmap info header, so all three are stored as 32-bit bitmaps with a full alpha channel, not as compressed PNGs.

That explains a number that looks odd at first: the file is 15,086 bytes, and it stayed 15,086 bytes in every test we ran, whether the source was a flat color square or a busy design. An uncompressed 32-bit bitmap costs 4 bytes per pixel whatever the picture is. For the 16 pixel layer that is 16 x 16 x 4 = 1,024 bytes of color, plus a 40-byte header, plus a 64-byte one-bit transparency mask, for 1,128. The same arithmetic gives 4,264 for 32 pixels and 9,640 for 48. Add the 54 bytes up front and you get 15,086.

Is 15 KB too big for a favicon? No. It is smaller than a typical photo thumbnail, it is a single small download, and the bitmap layers are the most widely readable way to store an icon. The standalone PNG icons in the same package are compressed and come out far smaller, a few hundred bytes for the 16 and 32 pixel versions.

How to convert PNG to ICO the right way

To convert PNG to ICO properly, start from a large square PNG and render each layer from that source, rather than shrinking a tiny image or stuffing one size into the container. The steps:

1. Check the source is square. Favicons are square. If your PNG is wide or tall, decide whether to pad it or crop it before converting. Padding keeps the whole logo; cropping cuts part of it off.
2. Check the source is large enough. 512 by 512 pixels or larger gives every size a clean downscale. A favicon set also includes 192 and 512 pixel app icons, and a small source has to be enlarged for those, which makes them soft.
3. Render 16, 32 and 48 pixel versions. Each is a downscale from the large source, not a downscale of the previous size.
4. Pack the three into one ICO. The order of directory entries does not change the picture, but every size must be present.
5. Keep the transparency. A PNG with a transparent background should become an ICO with a transparent background. A 32-bit layer has a full alpha channel, so soft edges stay soft.
6. Check the result. Open the ICO and confirm it reports three layers at 16, 32 and 48. A file that reports one layer is a renamed PNG, not a favicon set.

Our free PNG to favicon tool does all six from one upload. It reads the real format of your file from its contents rather than its extension, refuses an animated image with an explanation instead of silently taking the first frame, pads a non-square source with transparency instead of cropping it, and warns you when the source is smaller than 512 pixels. The ICO comes back inside a ZIP with every other file a favicon set needs.

PNG to favicon: more than one file

PNG to favicon is a bigger job than PNG to ICO, because a modern favicon is a set, not one file. The ICO covers the root address /favicon.ico and the small sizes. Alongside it a site needs standalone PNG icons, a 180 by 180 touch icon, app icons at 192 and 512 pixels, a maskable icon with padding for platforms that crop app icons to a shape, a web app manifest and the link tags that wire them all up.

Converting only to ICO and stopping there leaves the larger surfaces with nothing to use but a 48 pixel image. Our favicon size guide lists every file in the set and what each size is for.

JPG to ICO conversion

JPG to ICO works the same way as PNG to ICO, with one difference that matters: a JPG has no transparency. Every pixel in a JPG is opaque, so the icon will have whatever background the photo or graphic had, usually white. If you want a transparent background, the conversion cannot invent one for you.

Practical advice for JPG sources:

• If your logo exists as a PNG or SVG, use that instead of a JPG.
• If the JPG is all you have, crop it square first so the subject fills the frame, because a busy background is what becomes unreadable at 16 pixels.
• Avoid heavily compressed JPGs. Compression blocks that are invisible at full size can show up as muddy edges once the image is reduced.

When you convert a JPG with our tool, the opaque background is kept as it is, and a non-square JPG is padded with transparency to make it square, so the result has a transparent margin around an opaque rectangle. Cropping it square first usually looks better.

WebP to ICO conversion

WebP to ICO conversion is supported and behaves like PNG: WebP can carry transparency, and that transparency is kept in the ICO layers. WebP is common because many sites and design tools now export it by default, so it is often the format a logo file arrives in.

Two things to watch with WebP:

• Animated WebP. WebP can be animated. Icons do not animate, so an animated file has no single correct frame to use. Our tool refuses an animated WebP and tells you how many frames it found, so you can export the frame you want.
• Lossy WebP. Like JPG, a lossy WebP can carry compression artifacts. Prefer a lossless export of your logo if you can.

SVG to ICO: what happens to vectors

An SVG can be converted to ICO, but the ICO itself is always raster: each layer is a grid of pixels. When you convert an SVG, the vector is drawn once at a large size and each layer is reduced from that drawing, which keeps all sizes consistent with each other.

Our tool draws an SVG source to a 1,024 pixel master and produces every size from it. It also includes your original SVG in the package as favicon.svg, byte for byte, and links it in the head snippet, so you get the vector and the bitmaps. It does not turn a raster PNG into an SVG; a PNG upload produces no favicon.svg, because wrapping a PNG in an SVG file would add a file that is not really a vector.

One requirement for SVG sources: the root svg element needs a viewBox or a width and height. Without either there is no way to know what size to draw it at, and the tool says so instead of guessing.

ICO file vs PNG favicon: which to use

You do not have to choose between an ICO file and a PNG favicon: a correct set uses both, for different jobs.

• The ICO sits at /favicon.ico, the address the HTML standard allows a user agent to fetch when a page links no icon at all, and it carries several small sizes in one file.
• The PNGs are linked directly with rel="icon" and a sizes attribute, and the larger ones are listed in the web app manifest.

Google Search Central's favicon documentation, as of this writing, lists ICO and PNG among the formats it accepts for the icon it shows in search results, and it asks for a square icon of at least 8 by 8 pixels, recommending larger than 48 by 48. Both files in our package meet that. You can read Google's page at Google Search Central.

Common PNG to ICO mistakes

The common PNG to ICO mistakes all produce an icon that looks fine on your screen and wrong somewhere else:

• Renaming a PNG to .ico. The bytes are still a PNG. Some software reads it anyway, some does not. Convert it into a real ICO container.
• A single-layer ICO. One 16 pixel layer gets scaled up wherever a larger icon is needed, and the result is blurry.
• A 16 pixel source. Every larger size is an enlargement of 256 pixels of information. Start big and reduce.
• A non-square source stretched to square. Stretching distorts the logo. Pad or crop instead.
• Thin details. A one-pixel line in a 512 pixel source is gone at 16 pixels. Look at the smallest layer before shipping.
• Lost transparency. Converting through a format without alpha, such as JPG, flattens the background. Keep the chain in PNG or WebP.

How to check an ICO file you already have

To check an ICO file, look at its directory: how many layers it holds and what size each one is. Many image viewers list the sizes inside an ICO. If you are comfortable with a hex viewer, the first six bytes tell you most of it: two zero bytes, then 01 00 for an icon, then the layer count as a little-endian number. Each sixteen-byte entry that follows starts with the width and the height, where a stored 0 means 256.

A healthy favicon.ico for a website reports at least the 16 and 32 pixel layers. Ours carries 16, 32 and 48.

After the conversion: install the files

Once you have the ICO and the rest of the set, the files go in the root folder of your site and the link tags go in the head of every page. The package from our tool includes head-snippet.html with those tags already written. Our guide on how to add a favicon in HTML walks through the upload, the tags and the cache problems that make a new icon seem not to appear.

If you need the conversion inside a build or a product where your users upload their own logos, the same package is available from code; see the favicon API guide.

The short answer

PNG to ICO done right means rendering a large square PNG at 16, 32 and 48 pixels and packing all three layers into one favicon.ico, transparency intact. JPG works too but has no transparency; WebP works like PNG; SVG is drawn once at a large size and then reduced. Drop your image into the free favicon maker and you get the ICO plus every other file a favicon needs, with a snippet to paste. New to the topic? Start with what a favicon is.