🖼️ Image to ICO Converter: Turn Any Image into a Favicon

What is the Image to ICO Converter?

A favicon is the tiny icon a browser shows in the tab, the bookmark list and the history. For years the only accepted format was .ico, a Windows icon container that can hold one or more images at different sizes inside a single file. The .ico file starts with a small header (the ICONDIR) that records how many images are inside, followed by one directory entry per image giving its width, height, colour depth and where the pixel data sits. Originally that pixel data was an uncompressed bitmap, which is why true multi-size icon packing is fiddly to build by hand.

The modern shortcut is that the ICO format also allows each image to be stored as a PNG. Windows Vista and later, and every current browser, read a PNG embedded inside an .ico without complaint. That is exactly how this tool builds your .ico: it renders your image to a 32 by 32 canvas, exports that as a PNG, then wraps the PNG bytes in the small ICO header so the result is a genuine, valid .ico file rather than a renamed PNG.

There is also a simpler route that many sites now take. Because browsers accept PNG favicons directly through a link tag, you often do not need an .ico file at all. That is why this tool also gives you plain PNG icons at 16, 32 and 48 pixels. You can reference those with a link rel icon tag, or keep the .ico for the classic favicon.ico path that browsers still request automatically. Both approaches are valid, and which you choose comes down to how much legacy support you want.

A full 2026 favicon strategy for a real website usually layers three things on top of what this tool produces. First, favicon.ico at the site root, since every browser still fetches that path automatically even if you never link to it, so an old or missing icon there can undercut a perfectly good link tag elsewhere in the page. Second, an SVG favicon for modern browsers, which scales to any size and adapts sharply on high-DPI screens, something a fixed 32 by 32 PNG cannot do. Third, an apple-touch-icon at 180 by 180 pixels for iOS home screen bookmarks, plus 192 and 512 pixel PNGs referenced from a web app manifest for Android and progressive web apps. This tool covers the browser-tab tier of that stack; the larger touch-icon and manifest sizes are the same idea scaled up from a bigger source image.

Size also matters for how your icon actually looks in the wild. Google Search shows site favicons next to results at roughly 32 by 32 pixels minimum, so a favicon built from a 16 pixel source gets stretched and looks soft in search listings even though it was fine in a browser tab. Windows desktop and application icons go further still, often bundling 16, 32, 48 and 256 pixel versions inside one .ico so the icon stays crisp everywhere from a taskbar to a large-icon file browser view, which is why professional icon editors expose that multi-resolution packing as a core feature rather than an afterthought.

Colour also behaves differently depending on your source format. A PNG or WebP with an alpha channel carries real per-pixel transparency straight through the conversion, so the icon can sit on a light or dark tab background without a visible box around it. A JPG has no alpha channel at all, so any area outside the image content has to be filled with a solid colour during conversion. Picking white, black or a brand colour that matches your site header usually reads better than leaving a default fill that clashes with the page it sits on.

When to use it

• Creating a favicon.ico for a website, blog or web app from a logo or square image.
• Producing PNG icons at 16, 32 and 48 px to reference with a link rel icon tag.
• Converting a high-resolution logo down to crisp small icons without opening a design app.
• Generating an icon for a browser extension, desktop shortcut or internal tool quickly and privately.
• Building the source PNGs for an apple-touch-icon or Android home-screen icon from the same logo.
• Replacing a blurry or outdated favicon.ico that was upscaled from a low-resolution image.

How to use the Image to ICO Converter

1. Choose a source image (a square logo of at least 48 by 48 px gives the cleanest result).
2. Decide whether to crop to a centred square and pick a background fill for any transparent areas.
3. Click Generate ICO and PNGs to render the icon at each size.
4. Download the 32 by 32 .ico file and the 16, 32 and 48 px PNGs you need.
5. Upload favicon.ico to your site root and add a link rel icon tag for the PNGs, then hard-refresh to confirm it shows in the tab.

Formula & method

Worked examples

Common favicon sizes and where each one is used

Structure of the single-image .ico file this tool builds

Icon files and the HTML tag each one needs in the page head

Common mistakes to avoid

• Uploading a wide rectangular image and expecting a clean icon. Icons are square. If your image is not square, leave Crop to a centred square on so the tool takes the middle square. Turning cropping off instead letterboxes the image, leaving empty bands at the sides.
• Starting from a tiny image and scaling up. Enlarging a 16 px image to 48 px only makes it blurry, because there is no extra detail to recover. Always start from the largest clean version of your logo and let the tool scale it down.
• Flattening transparency by accident. If you pick White or Black as the background, transparent areas are filled with that colour. Keep transparent if you want the icon to blend into any tab or theme colour.
• Assuming you must have an .ico file. Every current browser accepts PNG favicons through a link rel icon tag. The .ico here is for the legacy favicon.ico path and older clients, but PNG icons alone are fine for most modern sites.
• Uploading the icon files but never adding the HTML link tags. A favicon.ico dropped at the site root usually still gets picked up automatically, but PNG icons, the apple-touch-icon and manifest icons only work if you add the matching link tags in the page head. Missing tags is the most common reason a new favicon never appears.
• Expecting the browser to show a favicon change instantly. Browsers cache favicons aggressively, sometimes for days. After replacing favicon.ico, do a hard refresh or clear the site data, and check in a private or incognito window before assuming the update failed.

Glossary

Favicon

The small icon a browser shows in the tab, bookmarks and history for a website.

ICO

A Windows icon container format that can hold one or more images at different sizes inside a single file.

ICONDIR

The 6-byte header at the start of an .ico file recording the file type and how many images it contains.

ICONDIRENTRY

A 16-byte record describing one image inside an .ico: its size, colour depth and where its data is stored.

PNG-in-ICO

The accepted practice of storing a PNG-compressed image inside an .ico entry instead of a raw bitmap.

canvas.toBlob

A browser method that encodes the current canvas pixels into an image file such as a PNG, returned as a Blob.

Apple touch icon

A 180 by 180 px PNG referenced with a dedicated link tag that iOS uses when a page is added to the home screen.

Web app manifest

A JSON file (often site.webmanifest) that lists an app name, colours and icon sizes such as 192 and 512 px for Android and PWA install prompts.

Frequently asked questions