PNG converts to ICO by packaging the image at multiple resolutions in one container.Generates 16, 32, 48, 64, 128, 256 px embedded sizes — the browser/OS picks the right size at runtime. Use ICO as the canonical favicon.ico at site root; modern browsers also accept PNG favicons.
PNG vs ICO comparison
| Property | PNG | ICO |
|---|---|---|
| Format type | Single raster image | Multi-image container |
| Embedded sizes | One per file | Multiple (16, 32, 48, 64, 128, 256 px) |
| Compression | DEFLATE (lossless) | Per entry: BMP or PNG inside |
| Alpha channel | Yes (RGBA) | Yes (since Windows XP) |
| Year introduced | 1996 (RFC 2083) | 1985 (Microsoft Windows 1.0) |
| Browser support (favicon) | Universal (~100%, all browsers ≥ IE11) | Universal (~100%) |
| Best for | General-purpose raster image | Windows favicons + app icons |
| Max embedded size | 2³¹−1 px each side | 256 × 256 px (modern) |
| File extension | .png | .ico |
| MIME type | image/png | image/vnd.microsoft.icon |
| Required for legacy IE | No (PNG favicon works IE11+) | Yes (IE ≤10 only reads ICO) |
| Multi-resolution packaging | No (one size per file) | Yes (browser picks best) |
PNG to Multi-Resolution Favicon ICO Converter — Real ICO Container Output
Pack a square PNG into a real multi-resolution favicon.ico containing all six standard icon sizes (16, 32, 48, 64, 128, 256 pixels) in a single Microsoft ICO container per the ICONDIR + ICONDIRENTRY format spec (learn.microsoft.com/en-us/previous-versions/ms997538). Each embedded resolution is stored as a PNG-encoded image data block in 32bpp ARGB — the format introduced with Windows Vista (RTM 8 November 2006; general consumer availability 30 January 2007) which preserves alpha cleanly and keeps file size small. The conversion runs locally: each target size is generated via Lanczos3 high-quality downscale from the source PNG, encoded as a PNG blob, then packed into the ICO container by writing the 6-byte ICONDIR header + 16-byte ICONDIRENTRY array + concatenated PNG data blocks (per the encoder at src/lib/ico-encoder.ts). Output is a real .ico file ready to drop in as `/favicon.ico` — browsers from Internet Explorer 5 (Bharat Shyam at Microsoft introduced the favicon convention shipped with IE 5, released 18 March 1999) through every modern browser auto-fetch /favicon.ico as a fallback when no `<link rel='icon'>` declaration matches. Files never leave the device.
How to produce a multi-resolution favicon.ico
- Drop a square PNG onto the tool (512x512 with a transparent background is ideal). The browser's built-in PNG decoder reads the source and the tool centre-crops the largest square automatically if dimensions are non-square.
- The tool generates all six target sizes from the source: 16, 32, 48, 64, 128, 256 pixels. Each size is produced via Lanczos3 high-quality downscale (sharper than Canvas default smoothing for icon-grade content).
- Pick a preview size from the size grid — this only affects the on-screen preview; all six sizes are always packed into the output ICO regardless of which preview size you select.
- The tool encodes each downscaled bitmap as PNG-in-ICO 32bpp ARGB and packs the six PNG blobs into a single ICO container by writing the 6-byte ICONDIR header + six 16-byte ICONDIRENTRY structures + concatenated PNG data blocks per Microsoft's spec.
- Download the resulting `<original-name>.ico` file and drop it at your site root as `/favicon.ico`. Optionally also declare the modern stack: `<link rel='icon' href='/icon.svg' type='image/svg+xml'>` for crisp scaling + `<link rel='icon' href='/favicon.ico' sizes='any'>` as the legacy fallback.
Common use cases
- Building a real /favicon.ico for a new website launch — drop-in compatible with every browser since IE 5 (1999) and still auto-fetched by modern browsers as the legacy favicon fallback.
- Producing a multi-resolution Windows desktop-shortcut icon from a PNG logo — Windows Explorer picks the right embedded size from the ICO container automatically (16 for small icons, 48 for large icons, 256 for jumbo).
- Generating the legacy ICO fallback to pair with a modern declared SVG favicon stack (`<link rel='icon' href='/icon.svg' type='image/svg+xml'>` + `/favicon.ico` fallback for legacy + Windows Explorer contexts).
- Regenerating a brand's favicon.ico after a logo refresh to replace pixelated 16x16 frames with crisp Lanczos3-downscaled bitmaps at every standard size.
- Producing a single-file ICO drop-in for environments that don't support `<link rel='icon'>` declarations (some CMS templates, static-site frameworks with limited head control).
Frequently asked questions
Does the output really pack all six sizes, or just the preview-selected size?
All six sizes (16, 32, 48, 64, 128, 256) are always packed into the output ICO regardless of which preview-size button you select. The preview-size grid only affects the on-screen pixel preview to help you visualise how the favicon will appear at different surface sizes; the downloaded .ico file is always a complete multi-resolution container with all six embedded resolutions per the ICONDIR + ICONDIRENTRY spec. You can verify by opening the .ico in a tool like IcoFX, Greenfish Icon Editor, or running `identify -format '%w %h %z\n' favicon.ico` via ImageMagick — all six embedded sizes will be listed.
Do I still need favicon.ico if I declare PNG favicons via <link>?
Modern browsers (Chrome 4+, Firefox 3+, Safari 4+, Edge 12+) prefer declared PNG favicons via `<link rel='icon' sizes='WxH' type='image/png'>` over /favicon.ico when both are present. However, browsers still auto-fetch /favicon.ico as a fallback when no `<link rel='icon'>` declaration matches the requested context, so shipping a /favicon.ico (built by this tool) maximises coverage. Internet Explorer 8 and earlier only support the /favicon.ico fallback and the legacy `<link rel='shortcut icon' href='...ico'>` declaration; declared PNG favicons via WHATWG HTML are post-IE-8. Windows Explorer + desktop-shortcut icons also pick from /favicon.ico when present.
Why Lanczos3 downscaling instead of Canvas default?
Canvas's default imageSmoothingQuality (browser-default; settable to 'low' / 'medium' / 'high') uses a bilinear or bicubic filter — adequate for general image downscaling but produces softer edges at icon-grade sizes (16x16, 32x32) where every pixel matters. Lanczos3 (Duchon 1979 reformulation of the windowed sinc filter) preserves sharpness at small sizes by using a wider 6-tap kernel that better approximates the ideal sinc response. The in-tree src/lib/lanczos.ts helper is what ImageGridSplitter and this tool both use for icon-precision downscales. The downside is roughly 2-3× the CPU cost of bilinear, which is irrelevant for 6 small icon sizes (sub-50ms total).
What sizes does the output ICO contain and why these specific sizes?
The output packs 16, 32, 48, 64, 128, and 256 pixel sizes — the standard ICO_SIZES set per the in-tree encoder. 16x16 was the original IE 5 (1999) favicon size and is still used in Windows Explorer file-type icons and some bookmark bars. 32x32 covers the typical browser-tab favicon use case across modern browsers on standard-DPI displays. 48x48 is the original Windows Explorer large-icon size. 64/128/256 cover desktop-shortcut icons and high-DPI taskbar slots; 256x256 is the maximum size the ICO format supports (encoded as 0/0 in the ICONDIRENTRY width/height fields per Microsoft's spec quirk). The Apple touch icon convention is 180x180 — that's NOT in the standard ICO_SIZES grid; for touch icons declare a separate PNG via `<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>`.
Is my file uploaded?
No. The decode + Lanczos3 downscale per size + PNG encoding + ICO container packing all run client-side via WHATWG Canvas drawImage + the in-tree Lanczos and ICO-encoder helpers. DevTools Network tab shows zero upload requests during conversion.
What this tool actually outputs — real multi-resolution favicon.ico via the in-tree ICONDIR encoder
This tool produces a real multi-resolution Microsoft ICO container, NOT just a favicon-sized PNG. The implementation pipeline: (1) load the source PNG via WHATWG HTMLImageElement and centre-crop the largest square; (2) for each of the six target sizes (16, 32, 48, 64, 128, 256), Lanczos3-downscale the source to that exact pixel grid via the in-tree lanczosResizeCanvas helper (src/lib/lanczos.ts) — Lanczos3 is the Duchon 1979 reformulation of the windowed sinc filter and produces sharper downscales than Canvas drawImage's default smoothing for icon-grade pixel-precise content; (3) encode each downscaled bitmap as a PNG blob via Canvas toBlob('image/png'); (4) pack all six PNG blobs into a single ICO file by writing the 6-byte ICONDIR header (idReserved=0, idType=1, idCount=6) + an array of six 16-byte ICONDIRENTRY structures (each carrying width, height, colour count, planes=1, bitcount=32, bytesInRes, imageOffset) + the concatenated PNG data blocks (src/lib/ico-encoder.ts). The PNG-in-ICO storage format was introduced with Windows Vista (RTM 8 November 2006; general consumer availability 30 January 2007) and is supported by every browser that decodes ICO favicons (Chrome, Firefox, Safari, Edge — all since their early versions). Why multi-resolution still matters in 2026 even with WHATWG HTML's `<link rel='icon' sizes='WxH'>` declared-PNG mechanism: the /favicon.ico fallback is still auto-fetched by every browser when no matching `<link>` declaration is present, and Windows Explorer / desktop-shortcut icons / legacy Windows tooling still pick the right embedded size from a multi-resolution ICO. SVG favicons (declared via `<link rel='icon' href='/icon.svg' type='image/svg+xml'>` with `sizes='any'`) work in Chrome 80+ (released 4 February 2020), Firefox 41+ (released 22 September 2015), and macOS Safari 15.6+ (released 20 July 2022) — the modern best-practice favicon stack pairs an SVG declared via `<link>` for crisp scaling with a multi-resolution favicon.ico fallback (which this tool produces) for legacy contexts.
- Output is a real multi-resolution ICO container — single .ico file packing all six sizes (16, 32, 48, 64, 128, 256)
- PNG-in-ICO storage in 32bpp ARGB per Microsoft's Vista format (RTM 8 November 2006; general availability 30 January 2007) — preserves alpha cleanly, keeps file size small
- Real ICONDIR + ICONDIRENTRY encoder per Microsoft spec (learn.microsoft.com/en-us/previous-versions/ms997538) via the in-tree src/lib/ico-encoder.ts helper
- Lanczos3 downscale per size for sharper icon-grade output than Canvas drawImage default smoothing (src/lib/lanczos.ts)
- Output filename: `<original-name>.ico` — drop-in ready as `/favicon.ico` at site root
- Auto-fetched by every browser as the legacy favicon fallback (since Bharat Shyam at Microsoft introduced the favicon convention shipped with Internet Explorer 5, released 18 March 1999); also picked by Windows Explorer + desktop-shortcut icons
- Browser-side via WHATWG Canvas drawImage + Lanczos3 + custom ICO encoder — no upload
- Operates in sRGB (IEC 61966-2-1:1999); PNG sources without an embedded ICC profile are interpreted as sRGB
Free. No signup. No file uploads. Ads via AdSense (consent required).
Sources (6)
- W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — source format; PNG with 24-bit RGB + 8-bit alpha is the modern favicon master per WHATWG <link rel='icon'> spec.
- WHATWG (live). HTML Living Standard — link rel='icon' + sizes attribute. html.spec.whatwg.org/multipage/links.html#rel-icon + html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes — modern favicon mechanism: <link rel='icon' href='/favicon-32x32.png' sizes='32x32' type='image/png'> declares a single-resolution PNG favicon; the sizes attribute uses 'WxH' format or 'any' for SVG. Browsers since Chrome 4+ / Firefox 3+ / Safari 4+ / Edge 12+ accept PNG favicons via this mechanism, ranking them ahead of /favicon.ico when both are present.
- WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() with destination dimensions + toBlob('image/png'). html.spec.whatwg.org/#dom-context-2d-drawimage + canvas section 4.12.5 — browser-side downscaling: drawImage(source, dx, dy, dWidth, dHeight) draws the source bitmap into the destination size with the canvas's imageSmoothingEnabled + imageSmoothingQuality controlling filter selection; toBlob('image/png') re-encodes losslessly.
- Shyam, B. (Microsoft Corporation) (1999). favicon.ico convention introduced in Internet Explorer 5. thehistoryoftheweb.com/how-we-got-the-favicon — favicon convention origin: Bharat Shyam at Microsoft introduced /favicon.ico at site root, shipped with Internet Explorer 5 (released 18 March 1999), auto-fetched by browsers since. Modern browsers still request /favicon.ico as a fallback even when no <link rel='icon'> is declared, but rank declared <link> resources higher when present.
- Microsoft Corporation (1985). ICO Icon File Format — ICONDIR + ICONDIRENTRY container structure. learn.microsoft.com/en-us/previous-versions/ms997538(v=msdn.10) — true ICO container format requires the ICONDIR header + ICONDIRENTRY array + image-data block (BMP or PNG-encoded). This tool produces a single-size PNG file (suitable for <link rel='icon' sizes='NxN'> declaration), NOT a multi-resolution ICO container; building a true multi-resolution ICO file requires a custom JS encoder that writes the ICONDIR header + ICONDIRENTRY entries + concatenates the image data blocks.
- International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; PNG source files without an embedded ICC profile are interpreted as sRGB by the browser decoder.
These are the W3C, ISO/IEC, ITU-T, and IETF specifications the tool implements or builds on. Locate them on w3.org, iso.org, itu.int, or datatracker.ietf.org.
By Marco B. ·