Convert Image to ICO

Why an ICO holds several sizes

An .ico is not a single image; it is a container holding the same icon rendered at different sizes, and whatever is displaying it picks the one it needs. That is the whole reason the format still exists.

16×16 is the browser tab and the address bar — the size almost everyone actually sees. 32×32 is the Windows taskbar, a desktop shortcut and some bookmark views. 48×48 is a desktop icon at normal scaling. 64×64 covers larger scaling and high-density displays.

Including them separately matters because shrinking one large image down at display time looks soft and muddy, especially at 16 pixels. Each size here is rendered from your source with high-quality scaling, so the small ones are as sharp as they can be rather than being squeezed on the fly.

Design for 16×16 — this is the part that decides it

Sixteen pixels is tiny. That is about the width of one letter of body text, and it is where most favicons fail.

A logo with a wordmark, fine lines, a gradient or several colours turns into a grey smudge at that size. What survives is simple, high-contrast and bold: a single initial, one strong shape, a mark stripped back to its silhouette. Look at the tabs open in your browser right now — almost all of them are one letter or one simple symbol, and that is not a coincidence.

So the practical advice is to prepare a simplified version of your logo for this rather than feeding in the full one. Then check the result at real size: put the favicon on a page, open it in a tab, and look at the tab — not at a zoomed preview, which flatters everything.

Give it a square image

Icons are square, so a non-square source has to be made square somehow. This centre-crops it — taking the largest square from the middle — which avoids the stretched, squashed look you get from tools that simply scale to fit.

The consequence is that the sides of a wide image are cut off. A horizontal logo with the name next to a symbol will lose the name entirely, keeping only the middle. If that is your source, crop or pad it to a square yourself first, centred on whatever part you actually want as the icon.

Transparency is kept, and it matters

The transparency in your PNG survives into the .ico, which is not a detail you can skip for a favicon. Browser tab bars are light in light mode and dark in dark mode, and an icon with a baked-in white square looks broken in one of them. A transparent background adapts to both.

If your logo only works on a specific colour, put that colour into the icon itself as a shape — a filled circle or rounded square behind the mark — rather than leaving an opaque rectangle.

Where the file goes

Name it favicon.ico and put it at the root of your site. Browsers request that path automatically even when nothing in your HTML mentions it, which is why the .ico is still worth producing in 2026 despite modern sites also declaring PNG icons in a <link> tag. Some feed readers, link previewers and older tools look only at that root path.

A practical note: favicons are cached aggressively. If you replace one and still see the old icon, that is your browser, not your upload — a hard refresh or a private window will show you the truth.

Related tools

Crop Image squares up a wide logo before conversion, which is the fix for the cropping issue above. Resize Image is useful if your source is enormous, and Convert Image to PNG converts a JPG logo to PNG first so it can carry transparency.