Generate a complete favicon set from one image
Drop in a logo as PNG, JPG, WebP or SVG and get every icon a website needs: a favicon.ico holding 16, 32 and 48 pixels in a single file, the PNG set for browsers, iOS and Android, a ready site.webmanifest and the lines for your <head> — bundled as one ZIP. Everything runs in your browser: no upload, works offline.
What ends up in the archive?
| File | Size | What it is for |
|---|---|---|
favicon.ico | 16, 32, 48 px | Tab, bookmark, Windows shortcut — all in one file |
favicon-16x16.png | 16 px | Address bar and tab |
favicon-32x32.png | 32 px | Bookmarks bar, retina tabs |
favicon-48x48.png | 48 px | Tile view, Windows shortcuts |
apple-touch-icon.png | 180 px | Home screen on iPhone and iPad |
android-chrome-192x192.png | 192 px | Android home screen |
android-chrome-512x512.png | 512 px | Install dialog for installable web apps |
site.webmanifest | – | Name, colours and icon references for Android |
favicon-snippet.html | – | The finished lines for your <head> |
Why is an .ico file still in there in 2026?
Because it is the only file browsers look for without being told: when the document mentions no icon at all, they simply request /favicon.ico at the root of the domain. Microsoft introduced the format in March 1999 with Internet Explorer 5, and every browser has honoured it since. Its second advantage is still unbeaten: one .ico carries several resolutions. The browser takes 16 pixels for the tab and 48 for a desktop shortcut without downloading anything twice.
Since Windows Vista, the images inside an .ico may be complete PNG files. That is exactly the route this tool takes: it writes the directory header, one 16-byte entry per image carrying side length, byte length and the position of the image data, and then the PNGs back to back. If a length or a position is off by even one byte, Windows simply shows nothing — with no error message. That is why the tool's test reads every generated file back out instead of settling for the fact that some bytes came out at all.
How large does the source image need to be?
512 pixels per side or more, ideally an SVG. The largest file in the set is 512 x 512 pixels, so a smaller source has to be scaled up and looks soft. The tool says so explicitly in that case rather than handing you a blurry result without comment.
Rectangular sources are centred on a square canvas, not cropped — a wide wordmark keeps all of its letters but ends up correspondingly small. For favicons, the mark without the lettering is almost always the better choice anyway.
Why bother with a dedicated downscaling filter?
The jump from your source down to 16 pixels decides the quality of the whole set. A plain browser rescale averages so coarsely that edges smear — and at 16 pixels a favicon is made of almost nothing but edges. This tool therefore resamples with Lanczos3, a filter that weighs neighbouring pixels instead of lumping them together. If the WebAssembly module behind it is unavailable, a fallback halves the image step by step; that is still better than a single jump, just softer.
Think about the area at 16 x 16: that is 256 pixels in total, roughly as much as a single letter in this paragraph. Fine lines, thin type and gradients do not survive it. If you want your logo recognisable there, reduce it to the bare shape or one initial.
What goes into the <head>?
The tool ships the lines with the archive and shows them for copying. They look like this:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">
The Android icons are deliberately absent here: they live in the manifest, and that is where the browser picks them up. If your files will not sit at the root, enter the folder in the Folder on your server field — the paths in both the lines and the manifest follow along.
Transparency, background and padding
Transparency is preserved unless you switch it off. For the iOS home screen a solid colour is often worth it anyway: Apple places the icon on a rounded tile, and a cut-out logo then floats there without a visible surface. The padding slider adds breathing room so those rounded corners do not clip anything.
The theme colour has nothing to do with the image: it tints the browser bar on Android and the status bar of an installed web app. The background colour fills the icon canvas and doubles as the manifest's splash colour.
Your source image stays on your device
Decoding, scaling, PNG encoding and the ICO container are all built inside the browser. There is no server call anyone could intercept and no copy left on someone else's disk. That is not only convenient — for a logo that is not public yet, it is the whole point.