Favicon Generator

Turn one logo into the whole favicon set: every PNG size, a multi-size ICO, a manifest and the HTML tags to paste into your head.

Drop your files here

.png, .jpg, .jpeg, .webp, .svg · up to 20 MB

Choose files

How to generate a favicon

1
Add your logo
PNG, JPG, WebP or SVG, up to 20 MB. A square source works best, but any shape is handled.
2
Choose how it fits a square
Crop to a square from the centre, or fit the whole picture and pad the sides with a colour you pick.
3
Download the icon set as ZIP
Eight files, or nine with the maskable Android icon: the ICO, four PNG sizes, the manifest and a ready-made head snippet.

What is in the archive, and why each file exists

favicon.ico holds three images in one container, at 16, 32 and 48 pixels, and is what browsers still ask for at the root of a site. icon-16.png and icon-32.png are the modern equivalents, referenced explicitly so browsers that prefer PNG never have to open the ICO. apple-touch-icon.png at 180 pixels is what iOS uses when someone adds your site to their home screen. icon-192.png and icon-512.png are the two sizes a progressive web app manifest is required to list. manifest.json ties the last two together with your app name and theme colour, and head-snippet.html is the exact block of link and meta tags to paste into your page, with no guessing at attribute names or file paths.

Why apple-touch-icon never keeps transparency

iOS does not composite a transparent home screen icon over anything sensible. It fills the gaps with black, which turns a tidy logo into a dark tile. So that one file always has its alpha channel flattened, onto the background colour you chose or onto white if you left the background transparent. Every other size keeps transparency when your source has it and you asked for it, because on a browser tab or a desktop shortcut transparency is exactly what you want. If you set a background colour instead, it is applied uniformly to all sizes so the set stays consistent.

Vector in, sharp out

When the source is an SVG, each size is rendered from the vector directly rather than shrunk down from one large bitmap. That matters most at 16 pixels, where a downsampled logo turns to mush and a freshly rendered one keeps its strokes. SVG sources are sanitised before rendering: scripts, event handlers and any reference to an external server are stripped out, the same way our SVG to PNG converter does it. A raster source is squared first, then resampled with a Lanczos filter, which is the sharpest of the practical choices for shrinking artwork.

Your logo stays on your device

Decoding, resizing, PNG encoding, the ICO container and the ZIP are all built inside this browser tab. Nothing is uploaded, which is worth something for an unreleased brand mark. Most online favicon generators take a copy of your logo onto their servers before they give you anything back.

Frequently asked questions

Which sizes are in the set?

16, 32, 180, 192 and 512 pixels as PNG files, plus a favicon.ico containing 16, 32 and 48 in one file. The 48-pixel version exists only inside the ICO, where Windows uses it for larger shortcut views; it is not shipped as a separate PNG because nothing on the web asks for it.

Why does apple-touch-icon have no transparency?

Because iOS renders transparent areas of a home screen icon as black. Flattening it here, onto your background colour or onto white if you kept transparency, means the icon looks the way you designed it instead of sitting in a dark square. This is the one file where the choice is made for you.

What is a maskable icon?

Android crops app icons to a shape chosen by the device: a circle, a squircle, a rounded square. A maskable icon keeps all its content inside the middle 80% so nothing important is cut off whichever shape is applied. Turn the option on and you get icon-512-maskable.png plus a third entry in the manifest marked with purpose "maskable".

Do I need the manifest.json?

Only if you want your site to be installable as a progressive web app, or to control the colour of the browser chrome on Android. It costs one file and one link tag, and it is harmless if you never use those features, so it is included by default with your app name and theme colour filled in.

Can I start from an SVG?

Yes, and it gives the best result. Each size is rendered from the vector at its own resolution rather than resampled from one bitmap, so the small sizes stay legible. The SVG is sanitised first: scripts, event handlers and any external references are removed before it is rendered.

Where do the generated tags go?

Inside the head element of your pages, and the PNG, ICO and manifest files go at the root of your site so the paths in the snippet resolve. If you serve them from a subfolder, edit the href values in head-snippet.html to match.

Why does my icon look blurry?

Almost always because the source is small. Everything is built from a 512-pixel master, so a source under about 260 pixels has to be stretched to get there and the largest sizes look soft. Start from at least 512×512, or from an SVG, and the whole set comes out sharp. A source under 32 pixels is refused outright, because there is nothing to work with.

Does the logo get uploaded to a server?

No. The image never leaves your browser: it is decoded, resized, encoded, packed into the ICO and zipped locally, and the archive is handed to you from memory.