ICO is one of the most common formats for website favicons, Windows shortcuts, and desktop icons. But renaming image.png to image.ico does not create a real ICO file.
A real ICO file is a container. It can hold several icon images at different sizes, such as 16x16, 32x32, 48x48, 128x128, and 256x256. The browser or operating system can then choose the best size for each display context.
Which images work well as ICO sources?
| Source format | Good fit? | Notes |
|---|---|---|
| PNG | Excellent | Supports transparency and works well for logos, icons, and UI marks |
| SVG | Good | Vector artwork scales cleanly, as long as the browser decodes it correctly |
| JPG/JPEG | Usable | No alpha channel, better for photo-like icons than transparent logos |
| WebP | Usable | Can support transparency, depending on browser decoding support |
| BMP/AVIF | Browser-dependent | If the browser can decode it, it can be rendered to Canvas first |
Recommended PNG/JPG/WebP to ICO workflow
- Start with a clear source image, ideally at least 512x512 pixels.
- For logos, prefer transparent PNG or SVG.
- Place the subject in the center of a square canvas with enough padding.
- Generate a multi-size ICO instead of a single 32x32 icon.
- Check the result in browser tabs, bookmarks, and Windows shortcut views.
Technical implementation: how ICO files are generated
An image-to-ICO converter usually follows four stages: decode, redraw, export, and package. This can run fully inside the browser without uploading the image to a server.
- Image decoding: the uploaded PNG, JPG, WebP, SVG, or other image is loaded through the browser and its real dimensions are read.
- Canvas rendering: a square Canvas is created for each target size, such as 16, 24, 32, 48, 64, 128, and 256px.
- High-quality scaling: drawImage renders the source proportionally, with smoothing enabled to reduce jagged edges after downscaling.
- Transparency handling: PNG, SVG, and transparent WebP can preserve alpha; JPG has no alpha channel and remains opaque.
- ICO directory: the file starts with an ICONDIR header, followed by ICONDIRENTRY records that store size, bit depth, data length, and offset.
- Pixel data: smaller entries can use 32-bit BGRA DIB data, while 256px entries are often stored as PNG bytes for better size and compatibility.
Why a multi-size ICO matters
If an ICO contains only one size, the browser or operating system must scale it for every other use case. A 32px-only icon may look fine in one tab but soft in Windows shortcuts or high-density displays.
- 16x16: browser tabs, address bars, and classic small icon surfaces.
- 32x32: high-density browser tabs, bookmarks, and common favicon usage.
- 48x48: Windows Explorer and shortcut views.
- 128x128 / 256x256: large icons, high-density screens, and desktop surfaces.
Convert images to ICO with toolgarden.xyz
ToolGarden Image to Icon supports common input formats including PNG, SVG, JPG, WebP, BMP, and AVIF. Image loading, scaling, corner clipping, preview, and packaging happen locally in the browser, so the image is not uploaded to a server.
How to reference an ICO favicon
After generating the ICO file, the simplest setup is to name it favicon.ico and place it at the website root. Modern frameworks can also reference it through metadata or head tags.
<link rel="icon" href="/favicon.ico" sizes="any">Common questions
Can ICO preserve transparency?
Yes. If the source image has alpha and the output uses 32-bit color data or PNG icon data, the ICO can preserve transparent backgrounds.
Why does a JPG-to-ICO file have no transparent background?
JPG does not have an alpha channel. For transparent icons, use PNG, SVG, or transparent WebP as the source, or remove the background before converting.
Summary
The key to converting PNG, JPG, or WebP to ICO is not the file extension. It is generating a real ICO container with several icon sizes so browsers, Windows, and shortcut surfaces can choose the right resource.
For a quick favicon or desktop icon, a browser-local tool like toolgarden.xyz is convenient: upload, preview, generate a multi-size ICO, and download.