PNG to ICO / Favicon

// One logo in, the whole icon set out

A favicon stopped being one file a long time ago. A browser tab wants 16 and 32 pixels. Windows pins a 48. An iPhone saving your site to its home screen looks for a 180 pixel Apple Touch icon. An Android install prompt reads a web manifest and wants 192 and 512. Miss one and nothing breaks loudly: you just get a blurry square, or the grey globe, in the one place someone was about to bookmark you.

Drop a logo here and you get all of it at once. Every size is rendered from your image, the small ones are packed into a single multi-size favicon.ico, and the HTML and manifest snippets below name the exact filenames the download contains. Take the .ico on its own if that is all you came for, or the zip if you want the set.

The files are named the way the rest of the web already expects: favicon.ico, favicon-32x32.png, apple-touch-icon.png, android-chrome-512x512.png. That matters more than it sounds, because iOS fetches /apple-touch-icon.png whether or not you ever write a link tag for it, and most starter templates already reference these names.

// Crop or pad, because square is not optional

Every icon slot on every platform is square, and most logos are not. Something has to give, and the two honest answers are opposite. Cropping takes the biggest centered square out of your image, which is right for a photo, an avatar, or a round mark, and wrong for a wide wordmark whose ends simply leave the frame. Padding scales the whole image to fit and fills the rest, which keeps the shape intact and makes the drawing smaller inside its square.

This tool offers both, plus the choice of leaving the padding transparent or filling it with a color you pick. Transparent is usually the safer default: a favicon sits on a tab strip that is near-white in a light theme and near-black in a dark one, and a white plate behind a logo that looked fine on paper is exactly how you end up with a bright rectangle floating in a dark browser.

// Sixteen pixels is where favicons die

Almost every icon looks good at 512. The size that decides whether anyone recognizes your site is 16 pixels wide, which leaves 256 pixels in total to say who you are. Fine lines vanish, a five letter wordmark becomes a grey smear, and a logo with a thin outline loses the outline first. That is not a rendering flaw, it is arithmetic.

Two things here take that seriously. The preview shows your finished 16 pixel icon sitting in a simulated tab strip in both a light and a dark browser theme, at true size, so you can see the thing you are actually shipping rather than a flattering enlargement. And once your image has been squared off, at 512 pixels or at its own size if it is smaller than that, the rest of the way down to 16 is taken in halves rather than in one jump. The square is halved, rounded down to a whole pixel, until one more halving would overshoot the size being made, and only then drawn to the exact number. Every one of those steps averages the whole image into the next instead of sampling a scattering of pixels and calling it a thumbnail.

If the 16 pixel result is unreadable, the fix is upstream: a simpler mark, a single letter, or a bolder weight. No converter can add detail that small square has no room for, and one that claims otherwise is guessing.

// It all happens on your machine

Your image is decoded, cropped, resized, encoded and packed into the .ico inside this page. Nothing is uploaded, so there is no queue, no expiring download link, and nothing on a server to delete afterwards. That is worth caring about here specifically, because a logo is often the first asset that exists for a company that has not launched yet.

The .ico is assembled byte by byte in your browser: a small directory of entries, then the PNG for each size, which is the modern form of the format that Windows has read since Vista and every current browser accepts. SVG works as an input too. It is rendered by your browser at high resolution first, so a vector logo gives sharper small sizes than a screenshot of the same thing ever could.

// fair questions

What size should a favicon be?

There is no single answer, which is why this tool makes eight. 16x16 and 32x32 are the browser tab and bookmark sizes and the ones that matter most. 48x48 is what Windows uses for a pinned site, and 64x64 is that same slot on a 200% display. 180x180 is the Apple Touch icon iOS puts on a home screen. 192x192 and 512x512 are the pair a web manifest lists for Android and desktop install prompts. 128x128 is the Chrome Web Store.

How do I convert a PNG to ICO?

Drop the PNG on this page and click download favicon.ico. The file you get is a real multi-size icon: it holds 16, 32, 48 and 64 pixel versions in one container, so Windows and browsers each pick the size they want instead of scaling one image badly. You do not need a desktop icon editor, and nothing is uploaded to convert it.

How do I add a favicon to my website?

Put the downloaded files in the root folder of your site, next to your homepage, then paste the HTML block from this page inside the <head> of every page. The block points at /favicon.ico for the classic fallback, at the 16 and 32 pixel PNGs for tabs, at apple-touch-icon.png for iOS, and at site.webmanifest for install prompts. If your files sit in a subfolder instead, change the leading slash in each href to match.

Can a favicon be transparent?

Yes. PNG and the PNG-based .ico this tool writes both carry a full alpha channel, so transparency in your source image survives all the way through. Choose crop, or choose pad with transparent padding, and the areas your logo does not cover stay clear. That is normally what you want, since it lets the tab strip color show through in both light and dark browser themes.

Do I still need a .ico file in 2026?

Honestly, yes, and it costs you almost nothing to keep. Browsers request /favicon.ico from the root with no markup at all, and plenty of feed readers, link unfurlers, and older tools only ever look there. Modern browsers will happily use the PNG links instead when they see them, so the .ico is a fallback rather than the main event, but it is the fallback that catches everything else.

Does my logo get uploaded anywhere?

No. Decoding, resizing, PNG encoding, the .ico assembly and the zip all run in your browser on your own device. There is no upload step and no server involved, so the only copies of your logo are the ones already on your machine.

What is site.webmanifest for?

It is the small JSON file Android and desktop Chrome read when someone installs your site as an app. It names the icons to use for the home screen and splash screen, which is what the 192 and 512 pixel files are for, plus the name shown underneath. This page fills in that name from the Site name field and escapes it properly, so a name with an apostrophe or a quote in it still produces a file that parses.