Favicon Generator with Previews and a Ready-to-Upload ZIP

The small job that is easy to leave undone

A site owner who has just launched often finds the tab shows a blank page icon, or the old icon from a previous theme. The fix is a small square picture, but it has to exist in several sizes and be linked from the head of every page. This tool does the sizing and the wiring for you, so the only decision left is what the little picture should look like.

Pick a starting point at the top. Letters takes up to three characters and a font from the list. Emoji draws a character using the emoji set of the computer you are on. Picture takes a logo file, which you can also drop onto the page or paste. Then choose a square, rounded or circle shape, set the padding, and pick the background and letter colours. A transparent background switch is there for icons that should sit on any tab colour.

Check it where people will actually see it

The preview column shows the icon in the places it appears, which is the quickest way to learn whether a design holds up.

• A browser tab with your site name next to it.
• A 16 pixel version, enlarged, because that is the size that usually fails first.
• An iPhone home screen tile and an Android tile.
• An installed-app look with a mask applied.
• A search result line with your site name and address.

If a three letter mark turns to mush at 16 pixels, cut it to one or two letters or raise the contrast between the two colours. Thin strokes and fine detail in a logo are the usual cause, so a single bold letter often works better than a full logo.

What is inside the ZIP

That is 11 files. Upload them to the top folder of your site, next to the home page, then copy the lines from the code box under the preview into the head. There is also a button for favicon.ico alone if that is all you need.

Putting the files on a real site

On a hand-coded or static site, the ZIP files go in the root folder. Website builders usually have their own favicon upload field instead, and they often ask for a single square PNG, so use the 512 pixel file there. WordPress themes and Shopify settings work the same way. If a builder lets you paste head code too, paste the lines only when the files are really served from your domain, otherwise the links will point to nothing.

If you are moving a site between platforms, the icon is one of the small things that gets lost. We list it in our migration checks, and the Webflow migration page explains how we move a site without dropping the details visitors notice.

Common favicon mistakes

• Using a wide logo. A wordmark squeezed into a square becomes unreadable. Use the first letter or a symbol.
• Low contrast. Grey on white disappears in a tab. Pick colours that differ strongly in lightness.
• Forgetting the cache. Browsers keep icons for a long time, so a changed icon can look unchanged. Open the site in a private window or rename the file when checking.
• Padding that is too small. With a circle shape, letters near the edge get clipped. Add a few percent of padding.
• Relying on emoji for a brand. An emoji looks different on each system, and the tool draws the one from your computer, so the saved picture is fixed but is not your own artwork.

A picture upload is placed fully inside the square with the padding you set. Your original is not cropped, so a non-square logo will leave empty space at the sides.

Frequently asked questions

What size should a favicon be?

There is no single size. This tool makes the 16, 32, 48, 96, 180, 192 and 512 pixel versions together, so each place that asks for an icon gets a matching file.

Do I still need favicon.ico?

Many older tools and some crawlers request that file name directly, so it is worth having. The ZIP includes one with 16, 32 and 48 pixel pictures inside.

Can I use an emoji as my favicon?

Yes, and it is quick for a personal project. The emoji is drawn using the set on your own computer, then saved as an ordinary picture.

What is the maskable icon for?

Some Android launchers cut icons into circles or rounded shapes. The maskable file fills the whole square and keeps your mark in the centre, so the cut does not remove any of it.

Why does my old favicon still show?

Browsers store icons aggressively. Try a private window, clear the site data, or save the new files under new names and update the links.

Is my logo uploaded anywhere?

No. The picture is read and drawn in your browser. Only your text, colours and shape settings are remembered on your device.

More free tools

• App icon generator: Make iOS, Android, macOS and web app icon sets with Contents.json files from one square picture.
• PNG to ICO converter: Turn a PNG into an ICO with the sizes you choose, or download a favicon set for a site.
• image resizer: Resize pictures by pixels or percent with fit, crop or stretch, presets and file type choices.
• Color contrast checker: Test colours against WCAG 2.2, fix them, check a palette and share a link.
• SVG to PNG converter: Export SVG files as PNG at a width from 16 to 8000 pixels, one or many at a time.