BrowserDevTools

Favicon & app icon generator

One image in, a complete icon set out — including the parts most generators skip: an opaque apple-touch-icon, a maskable icon with a real 20% safe zone, live previews at 16/32 px, and snippets for HTML and Nuxt.

Drop a PNG, JPEG, WebP or SVG here

App details
Names, colours and the image are only used to build the files in your browser — nothing is sent anywhere.

Icon set

Drop an image or paste SVG source above, then generate the set.

Why another favicon generator

The first page of results for “favicon generator” is mostly small independent sites — which is good news, because it means the ranking is not locked up by a big brand. What those sites get wrong is not the conversion, it is the finishing: you get a favicon.ico and maybe three PNGs, then you are on your own for the manifest, the maskable variant and the tags that actually go in your document head.

So this one is built to finish the job in one pass:

Everything is produced by canvas in your tab: the file you drop is never uploaded, no share link is created, and the ZIP is assembled locally. The .ico container is built byte by byte with PNG payloads, so the file works in every browser that matters today — including the 16 px tab icon, which is the size people actually see.

FAQ

Is my image uploaded?
No. Rasterising, resizing, the ICO container and the ZIP all happen inside your browser tab. There is no backend endpoint that accepts files, and you can confirm it in the Network panel.
Why is apple-touch-icon.png generated on a background colour?
Because iOS ignores transparency there and composites the icon on black, which looks broken for most logos. The tool draws your background colour first so the home-screen icon looks the way you designed it.
What is a maskable icon, and why the padding?
Android can crop your icon into a circle, squircle or rounded square. A “maskable” icon therefore has to keep its content inside a central safe zone — about 80% of the canvas — with an opaque background filling the rest. The maskable file here does exactly that.
Can I start from an SVG?
Yes. Paste SVG source or drop an .svg file and it is rasterised at 512×512 for the PNG and ICO outputs, which is what you want for a crisp favicon. Loading an SVG as an image also means any script inside it never runs.
Where do the files go?
Usually the web root, referenced as /favicon.ico and so on. If you keep icons in a subfolder, set the icon path field and both the manifest links and the snippets are rewritten to match.