Generate a complete favicon set from one image

Frequently asked questions

What files do I get?

A zip containing favicon.ico (16, 32 and 48 px bundled), favicon-16x16/32x32/48x48.png, apple-touch-icon.png (180 px), android-chrome-192x192/512x512.png, an optional maskable icon, favicon.svg when you start from an SVG, an optional Windows tile with browserconfig.xml, site.webmanifest, and a head-tags.html snippet. Every file can also be downloaded on its own, and the <head> tags, a Next.js metadata block and the manifest can be copied.

Are my images uploaded anywhere?

No. The icons are rendered entirely in your browser with the canvas API and bundled into a zip locally. Your source image never leaves your device — you can turn off your internet after the page loads and it still works.

What source image should I use?

An SVG is ideal: it is drawn sharply at every size and is also kept as favicon.svg, with an optional dark-mode version. Otherwise use a square image of 512×512 or larger — the tool warns you when an image is smaller and would be enlarged. If the logo has fine detail, you can add a simpler version just for the 16–48px sizes. Non-square images are centred rather than stretched. No logo? Type a letter or an emoji instead.

How do I install the favicon?

Unzip the files into your website's root directory, then paste the contents of head-tags.html into the <head> of your pages. That references favicon.ico, the PNG icons, the Apple touch icon and the web manifest.

What is the maskable icon for?

Android's adaptive icons crop your icon into different shapes (circle, squircle). The maskable icon is filled edge to edge with your background colour and the artwork is fitted inside the central safe circle (80% of the icon), so nothing is clipped whatever shape the phone uses. It's marked with purpose "maskable" in the web manifest, and left out of the manifest when you untick it.