How to Make a Favicon (ICO) from a PNG

Make the ICO in five steps

1. Start from a square PNG, ideally 256 x 256 pixels or larger, with the logo centered and a transparent background if you want the icon to blend with the browser tab.
2. Add it to the converter and choose ICO as the output format.
3. Look at the result's pixel size. The tool writes one image per ICO, capped at 256 pixels on the long side, so a larger PNG is scaled down to 256.
4. Download it and name it favicon.ico if it is not already.
5. Upload favicon.ico to the root of your site and add the link tags shown further down.

A picture that is not square is centered on a transparent square canvas, so a wide logo ends up as a small strip in the middle with empty bands above and below. Square it first. The background color setting does not apply to ICO; transparent areas stay transparent.

Which sizes a site needs, and which this tool can make

The reason for the last column: raster images are never enlarged, and the smallest choice in the maximum size menu is 640 pixels, so you cannot use the converter to shrink a big PNG to 16, 32 or 180 pixels. What it does is keep a source of up to 256 pixels at its own size and scale larger sources down to 256 for ICO. So the size you put in is the size you get, up to 256.

Getting 16 and 32 pixel icons right

A browser shows the tab icon at about 16 CSS pixels, or 32 device pixels on a high-density display. If your only file is a 256 pixel ICO, the browser scales it down itself, and thin lines, small text and fine detail turn to mush. The fix is a dedicated step before you use the converter: export the artwork at exactly 32 x 32 pixels from your design program, with a simplified version of the logo (a single letter or bold shape, no tagline, thicker strokes). Then drop that 32 pixel PNG into the converter and select ICO. Because a raster is never enlarged, the result is a 32 pixel ICO, and since it was drawn at that size it stays crisp.

The same trick yields a 16 pixel ICO from a 16 pixel PNG. Each file contains one image, so if you want both sizes you make two ICO files, or simply use the PNG files directly in link tags as described below. Single ICO files from this tool cannot be merged into one multi-size ICO.

For comparison, I generated a simple round purple icon with Pillow: the PNG at 256 pixels was 2,989 bytes, at 32 pixels 1,538, at 16 pixels 655. As ICO they came to 3,011, 1,560 and 677 bytes, a tiny overhead. All are far below anything that affects page speed.

The HTML that goes in the head of your pages

Browsers request /favicon.ico from the site root even when the page does not name it, but declaring your icons explicitly is more dependable. A compact set, in line with current practice, looks like this:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

The apple-touch-icon file should be 180 x 180 pixels, used when someone adds your site to an iPhone or iPad home screen. The manifest file lists the 192 and 512 pixel PNG icons for Android home screens and splash screens. The converter cannot make these at the right size, so export them from your design program.

Google's documentation on favicons in search results asks for a square icon of at least 8 x 8 pixels, and recommends one larger than 48 x 48 so it looks good on different surfaces. It accepts several formats, including ICO and PNG, and the tag must be on the home page.

Checking that the icon is really being served

Open yoursite.com/favicon.ico directly in a browser. You should see the icon, not an error page. From a terminal, this command prints the response headers:

curl -I https://example.com/favicon.ico

Look for a 200 status and a content type that names an icon, usually image/x-icon or image/vnd.microsoft.icon. A 404 means the file is not at the root; an HTML content type means the server is returning a page instead of the file. For the Android and web-app icons, many designers also export a separate 512 pixel maskable version, with the artwork kept inside the central area (roughly the middle 80 percent) because launchers may crop the edges into a circle or rounded square.

Do you need an ICO at all

Current browsers accept a PNG named in a link tag, so a 32 x 32 PNG referenced with rel="icon" and type="image/png" works without any ICO file. The ICO still has a role: some tools and older software request /favicon.ico directly and ignore your tags, so having one at the root avoids a missing-file error and a blank icon. If you maintain a site and do not need to support those cases, a PNG plus the apple-touch-icon is a valid minimum. If you are unsure, make both; they take a minute.

Details that make a small icon look right

• Source is square and the logo is centered, with some padding at the edges.
• Simplified artwork for the small sizes: one shape or letter, high contrast with both light and dark tabs.
• Transparent background kept in the PNG you feed in, or a solid color if you want a tile.
• File named exactly favicon.ico at the site root, reachable at yoursite.com/favicon.ico.
• Hard refresh when testing; browsers cache favicons aggressively, so an old icon may stay until the cache clears or you open the page in a private window.

If you are starting from a drawing in vector form, produce the PNG first with SVG to PNG, choosing 640 pixels as the smallest menu size, then feed it here. For why PNG and ICO behave as they do, see image file formats explained, and to prepare other site images, best image format for websites.