When creating a website icon, you may encounter favicon.ico, SVG favicon, and PNG favicon. They are not interchangeable extensions. Each format has a different structure, scaling model, and compatibility role.
What is an ICO file?
ICO is an icon container format commonly used for website favicons, Windows applications, desktop shortcuts, and file icons. It is not one bitmap. The file contains a header, an icon directory, and several independent image entries.
One ICO can store 16x16, 32x32, 48x48, 128x128, and 256x256 images together. A browser or operating system reads the directory and chooses the closest entry instead of rescaling one image for every interface.
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 packaging: the file receives an ICONDIR header and an ICONDIRENTRY for every size; smaller entries can use 32-bit BGRA DIB data, while 256px entries often store PNG bytes.
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.
favicon.ico vs SVG favicon vs PNG favicon
No format wins every case. Choose based on browser compatibility, whether the artwork is vector, whether exact pixel rendering matters, and whether the icon will also be used for home screens or a PWA.
| Format | Best for | Main characteristic |
|---|---|---|
| favicon.ico | General fallback, older environments, Windows shortcuts | Broad compatibility and several bitmap sizes in one file |
| SVG favicon | Modern browsers, vector logos, high-density displays | Stays sharp at every scale and usually needs one file |
| PNG favicon | Pixel-specific artwork, Apple Touch Icon, PWA | Predictable alpha and raster rendering, but sizes are separate files |
For a typical website, the most resilient setup is a combination: keep favicon.ico as the compatibility entry, add SVG for modern browsers, and provide explicit PNG sizes for Apple Touch Icon and PWA installation.
- favicon.ico: place it at the site root as the browser and legacy fallback.
- icon.svg: use it for modern browsers when the brand mark is vector-friendly.
- favicon-32x32.png: use it when SVG is unsuitable or pixel-level control matters.
- apple-touch-icon.png: commonly use a 180x180 PNG for iOS home-screen shortcuts.
- PWA icons: declare 192x192 and 512x512 PNG files in the web app manifest.
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">Convert an image to ICO with ToolGarden
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 check the generated favicon
Favicons are cached aggressively. If a replacement does not appear immediately, the ICO may be correct while the browser is still showing the previous asset.
- Open the icon URL directly and confirm that it returns the expected MIME type.
- Check tabs, high-density displays, bookmarks, and desktop shortcuts separately.
- Clear the favicon cache or temporarily change the filename and href during testing.
- Preview both light and dark browser chrome for weak contrast or transparent-edge artifacts.
Transparency considerations
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
ICO is a multi-image container suited to compatibility-focused favicons and Windows. SVG is a strong choice for vector brand marks in modern browsers, while PNG fits fixed-pixel artwork, Apple Touch Icon, and PWA assets.
When converting a picture to ICO, do not rename the extension. Use ToolGarden Image to Icon to upload the source, adjust the composition, and generate a real multi-size ICO, then pair it with SVG and PNG assets for broader website coverage.