Favicon Generator - Convert PNG to multi-size .ico
Convert PNG or JPEG images to standard multi-size Windows .ico files locally in the browser.
Favicon Generator
Convert PNG or JPEG images to a standard multi-size .ico favicon locally in the browser.
Drag & drop an image here, or click to select
PNG, JPEG
How it works
An .ico file is a container format that can store multiple images of different sizes (such as 16x16, 32x32, and 48x48) in a single file. This allows web browsers and operating systems to select the most appropriate resolution automatically.
This tool runs 100% locally in your browser. Your image is scaled down to the chosen resolutions using hidden HTML5 canvases, exported as PNG array buffers, and assembled into a binary ICO structure with appropriate headers and offset directory entries.
Why use .ico for favicons?
Although modern browsers support PNG and SVG favicons, a standard "favicon.ico" in your site's root folder is still the most compatible solution for older browsers, bookmarking systems and some crawlers.
About this tool
The favicon generator creates a standard multi-size .ico file from a PNG or JPEG image, one hundred per cent locally in the browser. An .ico is a container that can hold multiple images at different resolutions (16x16, 32x32, 48x48, 64x64, 128x128, 256x256) in the same file, so browsers and operating systems can automatically pick the right size for each place the icon appears (tab, bookmark, shortcut, taskbar). The source image is scaled to each chosen size on hidden HTML5 canvases and packed into the correct binary ICO structure with header and directory offsets.
How to use it
- Drop a square PNG or JPEG image on the drop zone (256x256 or larger is best).
- Tick which sizes to include (16, 32 and 48 are the standard for favicons).
- See the preview of the largest icon in the preview box.
- Press "Download" and save `favicon.ico` in the root folder of your website.
Examples
Logo PNG 512x512 with a transparent background. Tick 16, 32 and 48.favicon.ico approx. 15 KB. All three sizes in one file, served from `/favicon.ico`.Common use cases
- A new website that needs a favicon in all standard sizes.
- Rebranding an existing site with a new logo.
- Internal tools and admin panels that should stand out among browser tabs.
- Progressive Web Apps (PWAs) shown on the home screen on mobile.
- Windows desktop apps or Electron apps that need .ico for the taskbar icon.
Frequently asked questions
- Which sizes do I actually need?
- 16x16 is the absolute minimum and used in browser tabs. 32x32 is used for bookmarks and high-DPI tabs. 48x48 is the Windows network-folder and shortcut size. 256x256 is the Windows shell view (file explorer, taskbar at large icons). A solid default is 16, 32, 48. For maximum compatibility add 64, 128 and 256 too; the file only grows a few KB.
- Isn’t a PNG favicon more modern than ICO?
- Yes, technically PNG is a better image format, and you can reference multiple PNG files with `<link rel="icon" type="image/png" sizes="32x32" href="...">`. But an ICO file at `/favicon.ico` is still the default browsers look for automatically without any `<link>` tag. Best practice is actually both: `favicon.ico` with 16/32/48 for backward compatibility, plus a `favicon.svg` or `favicon-192.png` for modern devices.
- What if my image isn’t square?
- The tool warns and stretches the image to square, which looks bad. Best is to crop or pad the source to square before uploading. For logos with lots of whitespace, trim unnecessary margins so the design fills the icon. 512x512 with a small margin works well.
- Why doesn’t my browser show the new favicon?
- Browsers cache favicons aggressively, often for days, regardless of HTTP headers. Try hard-refresh (Ctrl+F5 / Cmd+Shift+R), open the page in incognito, or visit `/favicon.ico?v=2` directly to force update. After the cache expires, all users get the new icon automatically. For deployment, make sure `Cache-Control: public, max-age=86400` is set (no longer than a day).
Technical background
Process: PNG/JPEG is decoded by the browser into an `HTMLImageElement`. For each chosen size, a `<canvas>` is created with `width = height = size`, and the image is drawn with `ctx.drawImage(img, 0, 0, size, size)` for high-quality bicubic scaling. The canvas is converted to a PNG blob via `canvas.toBlob(cb, "image/png")`. Then the ICO header structure is built manually: 6-byte ICONDIR header (`00 00 01 00 count`), followed by 16-byte ICONDIRENTRY per image (width, height, color count, planes, bpp, size in bytes, offset), finally the PNG data itself concatenated with correct offsets. Result is a `Blob` with MIME `image/x-icon` downloaded via `<a download="favicon.ico">`.