Favicon generator
Drop in one image — ideally square, at least 512×512 — and get every size a modern site needs: PNGs from 16px up to 512px, plus a real multi-size favicon.ico assembled byte-for-byte in this tab. Nothing is uploaded; the file never leaves your device.
Choose a source image
Drop an image here, or click to choose a file
PNG, JPG, SVG, WebP or GIF. Square and 512×512 or larger works best.
How it works
Pick or drop an image and this tool decodes it with the browser's own image decoder (createImageBitmap, with an <img>/object-URL fallback for anything that method rejects), then draws it onto six separate square <canvas> elements — one per output size. A non-square source is centre-cropped to fill each square rather than stretched, so a wide logo keeps its proportions and simply loses its outer edges.
Each canvas is turned into a real PNG file with canvas.toBlob('image/png') — the same PNG encoder the browser uses for "Save image as…" anywhere else. Those bytes become the six individual downloads.
Building favicon.ico by hand
The .ico file is a small binary container, not a special image format of its own. It starts with a 6-byte ICONDIR header (reserved, type = 1 for icon, and an image count), followed by one 16-byte ICONDIRENTRY per image — width, height, colour count, planes, bit depth, the byte size of that image's data, and its byte offset from the start of the file. The actual image bytes are written after the directory, one after another, in the same order as the entries.
This tool writes that structure directly: it takes the 16, 32 and 48px PNGs it already generated, computes the header and three directory entries by hand, and concatenates the PNG bytes after them. Every current browser and every Windows version since Vista accepts PNG-compressed image data inside an .ico entry, which is what makes this possible without a BMP encoder or any external library — it is thirty-odd lines of arithmetic over a byte array.
The modern icon set, size by size
A single favicon has not been enough for years. Here is what each size this tool generates is actually for, and whether it goes inside favicon.ico.
| Size | Suggested filename | Used for | In favicon.ico? |
|---|---|---|---|
| 16×16 | favicon-16x16.png | Browser tab (the classic favicon) | Yes |
| 32×32 | favicon-32x32.png | Browser tab on HiDPI screens, taskbar | Yes |
| 48×48 | favicon-48x48.png | Windows site icon | Yes |
| 180×180 | apple-touch-icon.png | iOS / iPadOS home-screen icon | No |
| 192×192 | android-chrome-192x192.png | Android home screen, Web App Manifest | No |
| 512×512 | android-chrome-512x512.png | PWA splash screen, large manifest icon | No |
The generated favicon.ico deliberately holds only the three smallest sizes. Nothing on the modern web asks an .ico file for 180px or larger — those roles are filled by the standalone PNGs and, if you use one, a manifest — so bundling them in would only add dead weight.
Installing the icons on your site
- Save
favicon.icoat the root of your site (e.g.https://example.com/favicon.ico). Browsers request this path automatically, so it is worth having there even if every page also links to a PNG explicitly. - Save the PNGs anywhere convenient — the root is simplest — and paste the snippet the tool generates into every page's
<head>, adjusting the paths if you put them in a subfolder. - If you want the site to be installable (an "Add to Home Screen" / PWA experience), add a
site.webmanifestreferencing the 192 and 512px PNGs in itsiconsarray, and link it with<link rel="manifest" href="/site.webmanifest">. - Reload with a hard refresh (or an incognito window) to check — browsers cache favicons aggressively, so a stale icon after an update is almost always a caching artifact, not a broken file.
Getting a good source image
- Start square. A non-square source gets centre-cropped to fill each square canvas, which is rarely what you want for a wordmark or a wide banner.
- 512×512 or larger. Every output size is drawn down from your original, never up — an undersized source produces soft, blurry large icons.
- Simplify for 16px. A full logo with fine detail, a drop shadow or small text will smear into an illegible blob at tab-icon size. A single bold letterform or a simplified glyph almost always reads better than a shrunk full logo.
- Transparent background, if the surface calls for it. Browser tabs and Android icon "shapes" both sample right up to the image edge, so a transparent PNG usually looks cleaner than one with a coloured background baked in.
Frequently asked questions
What exactly is a favicon, and where does the browser look for it?
A favicon is the small icon a browser shows next to a page's title — in a tab, a bookmark, a history entry, and (via an apple-touch-icon variant) a phone's home screen. Browsers request /favicon.ico from a site's root automatically, even if no page links to it, which is why every site benefits from having one there regardless of what a specific page's <link> tags say.
Why do I need more than one image size?
Different surfaces render a favicon at very different physical sizes: a 16px tab icon, a 32px HiDPI tab icon, a 180px iOS home-screen tile, a 192 or 512px Android/PWA icon. A single image scaled up looks soft and scaled down loses detail, so this tool draws each size onto its own canvas from your original source rather than stretching one output to fit every use.
What is favicon.ico for if PNG favicons already work in modern browsers?
Current versions of Chrome, Firefox, Safari and Edge all accept a plain PNG <link rel="icon">, but /favicon.ico is still requested automatically by the browser — and by some crawlers, RSS readers and older clients — whenever no icon is otherwise specified, so shipping one avoids a silent 404 in server logs and a blank generic icon for anyone who does not get the PNG. Windows also still reads favicon.ico specifically for Start-menu and taskbar pins.
Is 512×512 too big for a favicon?
Not for what it's for. 512×512 is not a favicon in the tab-icon sense — it's the large icon the Web App Manifest spec (used for installable/PWA icons) and Android's home-screen shortcut expect, so a phone can show a crisp icon at whatever size its launcher needs without upscaling. It is included alongside the browser-tab sizes, not instead of them.
What's the difference between the apple-touch-icon and the other sizes?
apple-touch-icon at 180×180 is what iOS and iPadOS use specifically when someone adds your page to their home screen — Apple's own guidance is to provide it explicitly rather than rely on scaling a regular favicon, because Safari does not reliably fall back to link rel="icon" for that purpose.
Do I need a web app manifest too?
Only if you want the page to be installable as a standalone app — an "Add to Home Screen" / PWA experience — with its own icon set outside the browser chrome. The 192 and 512px PNGs this tool generates are exactly the sizes a manifest's icons array expects; without a manifest they simply act as extra favicon sizes for whichever surface picks them up.
Does my source image need to be square?
It doesn't have to be, but it should be for a predictable result. Every generated size is a square canvas, and a non-square source is centre-cropped to fill it, so a wide logo loses its left and right edges rather than being squashed. A square source, at least 512×512, with the important part of the mark centred, gives the most control over what appears in a 16px tab icon.
Is my image uploaded anywhere when I generate these icons?
No. The file you choose is decoded and drawn entirely inside this browser tab — there is no upload step, and the tool has no server component to upload to in the first place. Every PNG and the .ico file are produced on your device and handed straight to your browser's own download mechanism.
Why does my logo look blurry or cropped at 16×16?
At 16 pixels there is almost no room for detail — thin strokes, small text and fine gradients collapse into a smear or vanish outright. The fix is usually a simpler mark for the smallest size: a single bold letterform or a simplified glyph reads far better at 16px than a full multi-colour logo. Check the 16 and 32px previews specifically before downloading; they are the sizes most people actually see day to day.
Use cases & limitations
Where this is genuinely useful
- Launching a new site. Get a full, correctly-named icon set from one logo file in a few seconds instead of running a design tool through six separate export sizes.
- Replacing a stale favicon. Regenerate the whole set when a brand mark changes, rather than editing individual PNGs by hand and risking size drift.
- Converting one PNG or SVG logo into a working favicon.ico for a project that only ever had a raster or vector logo and never had an actual icon file.
- Indie and hobby projects without access to a full design toolchain — this needs nothing beyond a browser and one source image.
What this tool cannot do
- It cannot simplify a complex logo for you. If a mark is illegible at 16px, that is a design problem this tool cannot fix — it can only crop and scale the source you give it. Simplify the source first.
- It cannot remove a background or make an image transparent. Whatever your source file's background is — solid colour or transparent — is what every generated size will have.
- It does not write a
site.webmanifestfor you. It produces PNGs at the sizes a manifest expects, but assembling and linking the manifest file itself is a separate step. - The generated
.icoonly bundles 16, 32 and 48px. That matches what every current use offavicon.icoactually asks for; it is not a limitation of the format, just a deliberate choice not to bloat the file with sizes nothing reads from it. - One source image only. There is no batch mode for generating icon sets for multiple logos at once.