One file in, the whole icon set out.
Drop an SVG or PNG and IconBatcher renders favicon.ico, the PNG ladder up to 512, apple-touch-icon, maskable PWA icons, a Windows tile, site.webmanifest and the link tags. Every size is shown on a real tab, phone and dock before you download the ZIP.
- Rendered on your device
- Real multi-size .ico
- SVG, PNG, JPEG, WebP
Live preview — it follows whatever you load below.
Build the icon pack
Set the shape and background once; every file in the pack follows it.
Rendered in this tab — nothing is uploaded
Source
Drop your logo here
SVG, PNG, JPEG, WebP or GIF. 1024 px or larger keeps every size sharp. You can paste from the clipboard too.
Your icon, on seven real surfaces
Load a file on the left and every mockup below fills in — so you can judge the small sizes before you ship them.
- Browser tab at 16 px, light and dark
- iOS home screen with its own squircle mask
- Android maskable with the 80% safe zone
- macOS dock, Windows tile, install prompt
- Safari pinned tab, from an SVG source
Why IconBatcher
Every size drawn from your file
Each PNG is rendered through a box-filtered scale chain built from the original artwork, not stretched from one master image. That is the difference between a readable 16 px favicon and a grey smudge.
A real multi-size .ico
favicon.ico is assembled byte by byte — an ICO directory with 16, 32 and 48 px PNG entries — so old browsers, Windows shortcuts and RSS readers all find the size they want.
Previews that behave like the real thing
iOS applies its own squircle and drops transparency, Android crops to the launcher mask, Safari wants a flat one-colour SVG. The mockups here do the same, so the surprises happen now instead of after deployment.
Manifest and link tags included
site.webmanifest and the head snippet are generated from the files you actually ticked, with your app name, theme colour and paths already filled in. Copy them from the page or take them in the ZIP.
About IconBatcher
A favicon stopped being one 16 px file a long time ago. A site that behaves properly today ships favicon.ico for legacy browsers and Windows shortcuts, an SVG favicon for crisp rendering at any zoom, a 180 px apple-touch-icon for the iOS home screen, 192 and 512 px PNGs for the web app manifest, a pair of maskable versions so Android launchers can crop without eating the logo, and a 150 px tile for pinned sites in Windows. IconBatcher generates all of them from one source file, applies the same padding, background and corner treatment to every size, and writes the site.webmanifest and the head snippet that tie them together.
The work happens in the page you are reading. Your file is decoded with the browser's own image pipeline, drawn into canvases, encoded as PNG and zipped with JSZip — there is no upload step, no queue and no server that could keep a copy. That also means an unreleased logo stays unreleased: nothing is transmitted, so nothing can leak, and the tool keeps working with the network switched off after the page has loaded. What you get back is a folder you can drop into a project root, plus a README that says where each file belongs.
Guides & articles
Plain-language writing about favicons, app icons and the files each platform insists on.
Favicon sizes every site needs in 2026 (and the ones you can skip)
The old favicon checklist had eighteen files on it. Six will do now — here is what each one is for, which link tags to write, and what you can safely leave out.
PWA manifest icons and maskable safe zones explained
Why an installed web app shows your logo shrunk inside a white circle, what purpose maskable really changes, and how much of the canvas you are allowed to use.
SVG vs PNG for icons: sharpness, size and where each breaks
Vector icons scale forever and PNGs guarantee pixels. Here is what each format does to your logo at 16 px, and which one every platform still insists on.
Frequently asked questions
Is my logo uploaded anywhere?
No. The file is read by your browser, drawn into canvas elements, encoded as PNG and zipped in the same tab. IconBatcher has no upload endpoint and no storage, so there is nowhere for a copy to go. Once the page has loaded you can disconnect from the network and it still works.
What source size should I use?
An SVG is best: every size is rasterised from the vector, so nothing is ever upscaled. If you only have a raster file, use at least 1024×1024 — that covers the 512 px manifest icon with room to spare. Below 512 px the tool warns you, because anything larger than the source is an enlargement and will look soft.
Can favicon.ico keep a transparent background?
Yes. The .ico produced here stores PNG images with a full 32-bit alpha channel, which every browser released since Internet Explorer 11 reads correctly. Transparency is what you want for a tab icon, because tab strips are light in one theme and dark in the other.
Why does my icon look different on an iPhone?
iOS ignores the corner radius baked into your file and applies its own squircle mask to the 180 px apple-touch-icon, and it does not support transparency — transparent pixels are composited onto black. That is why IconBatcher renders the Apple icon square and opaque, and shows it under the system mask in the iOS mockup.
Do I need maskable icons?
If your site can be installed as a PWA, yes. Android launchers crop the icon to their own shape — a circle, a squircle or a rounded square depending on the device — and an icon without purpose "maskable" gets shrunk into a white blob instead. The maskable files here are full bleed with the artwork kept inside the 80% safe circle, and the preview lets you check it.
Where do the files go on my site?
Put favicon.ico and site.webmanifest in the web root, and the icons/ folder next to them, then paste head-snippet.html into the <head> of every page. If your project serves static files from a different folder, edit the paths in the snippet and in the manifest — they are plain text. The README in the ZIP repeats all of this.
Can I edit the manifest name and colours?
Yes — app name, short name, theme colour and background colour are fields in the tool, and site.webmanifest is regenerated as you type. The theme colour is also used for the Windows tile background and for the Safari pinned-tab colour in the snippet, so one change updates all three.
I changed my favicon but browsers still show the old one.
Icons are cached aggressively, sometimes for weeks, and a hard reload of the page does not always refresh them. The reliable fix is a new filename — favicon-v2.ico, or /favicon.ico?v=2 in the link tag — which browsers treat as a different resource. Clearing the site data for your domain also works locally, but your visitors will not do that.
Does it work on a phone?
Yes. The controls, the preview scroller and the ZIP download all work on mobile Safari and Chrome, and the file picker accepts images from the camera roll or from Files. Very large source images take a moment longer to decode on a phone, but the rendering itself is the same code.