Icon Converter
Convert an image into multi-size PNG, ICO-compatible PNG, or WebP.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this icon converter
- Click "Choose file" and pick a PNG, JPG, WebP, or SVG image — the file stays in your browser.
- Choose an output format: PNG, ICO-compatible PNG (for favicon.ico), or WebP.
- Toggle the sizes you want — 16, 32, 48, 64, 128, 256 are available; pick all of them for a full favicon set.
- Press Convert to generate each size at once; the result panel lists every output as a downloadable thumbnail.
- Click any thumbnail to download that size, or press "Copy <link> tags" to grab the matching `<link rel="icon">` HTML.
About this icon converter
The icon converter resizes any image to multiple standard icon sizes entirely in the browser using `<canvas>`. The source is loaded with `URL.createObjectURL`, drawn into a canvas at each target size while preserving aspect ratio (letterboxed inside the square), and exported with `canvas.toBlob(mime, 0.92)`. Aspect-ratio preservation means a non-square source — like a 200×120 logo — fits centred inside each square output instead of being squashed. Outputs are exposed as object URLs and revoked when you reset, so memory is cleaned up properly.
Worked example: upload `logo.png` (200×120, transparent background), pick PNG format, tick sizes 16/32/48/64/128/256. The tool emits six PNG files — `icon-16.png` through `icon-256.png` — each centred inside a square with transparency preserved. The "Copy <link> tags" button produces a block like: ``` <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png"> <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png"> <link rel="icon" type="image/png" sizes="128x128" href="/favicon-128.png"> <link rel="icon" type="image/png" sizes="256x256" href="/favicon-256.png"> ``` Paste those into your `<head>` and upload the corresponding files to your site root.
FAQ
- Does my image leave my browser?
- No. The file is loaded with `URL.createObjectURL` and drawn into an in-page canvas. Everything happens locally — nothing is uploaded to a server.
- Can it produce a real .ico file?
- Browsers cannot natively assemble multi-image ICO files; this tool outputs PNG (or WebP), which modern browsers accept anywhere they accept favicons. Pick the "ICO-compatible PNG" option to save with the `.png` extension that you would reference from your `<link rel="icon">` tag. For legacy ICO files use a dedicated converter.
- How does it handle non-square images?
- Aspect ratio is preserved by letterboxing — the image is scaled to fit inside the square and centred with the source aspect intact. A 200×120 input becomes a square output with transparent margins (PNG/WebP) above and below.
- What sizes should I generate for a favicon?
- A practical modern set is 16, 32, 48 (Windows taskbar), 64, 128, and 256. Apple touch icons usually want 180×180 — generate that separately at 256 and resize as needed in your tooling.
- Why WebP?
- WebP is supported in every evergreen browser since 2020 and produces noticeably smaller files than PNG for the same quality. If you need maximum compatibility with old browsers, stick with PNG.