Favicon generator

One image in, a complete set out — every size, the maskable Android icon, the manifest, and the tags to paste into your head.

Your file never leaves this device. There is no upload step — the work happens in this browser tab.

Drop a square image inA logo, a monogram, a simple mark. Detail disappears entirely at the smallest size, so simpler is genuinely better here.
Build the setTen PNG sizes, a padded maskable icon for Android, a web manifest and a file of HTML to paste — all in one ZIP.
Drop the files at your site rootAdd the tags to your head, adjust the paths if your icons live somewhere else, and you are finished.

Design for sixteen pixels, not for the preview

The favicon size that matters is 16×16. That is what sits in a browser tab, next to a bookmark, in a history list — the places people actually see it. Sixteen pixels is smaller than a typical letter of body text, and almost nothing survives at that scale except a single bold shape in high contrast.

The common failure is designing at 512 pixels, admiring it, and shipping something that becomes a grey smudge in the tab. Test at the real size. A monogram, a simple geometric mark, or one strong silhouette will read; a detailed logo with a wordmark will not.

High contrast against both light and dark browser chrome matters too. A dark mark on a transparent background disappears in a dark-themed browser. A solid background colour behind the mark solves it.

What the set contains, and why each part exists

Ten PNG sizes from 16 to 512 pixels cover browsers, bookmarks, Apple touch icons and Android home screens. Modern browsers pick the closest and scale, but supplying the exact sizes avoids them scaling badly.

The maskable icon is the one people forget. Android crops home-screen icons into its own shape — a circle, a squircle, whatever the device uses — and an icon designed edge to edge loses its outer ring. The maskable version pads the artwork inside a safe area so nothing important is cut.

The manifest tells a browser what to use when someone installs your site as an app: which icons, what name, what colours. The HTML file is the handful of link tags that connect it all, ready to paste.

No .ico file, on purpose

The classic favicon.ico exists for versions of Internet Explorer that no longer ship. Every browser in current use accepts PNG icons, which are smaller, simpler and support transparency properly. Including an .ico would add a container format nobody needs.

If you specifically require one — some old build tooling still expects it at the site root — any converter will wrap the 32 pixel PNG. It is not required for the icons to work.

Everything here happens in this browser tab. The image is decoded, redrawn and re-encoded by the Canvas API on your own device, and the result is assembled in memory and handed to you as a download. Nothing is uploaded, which you can confirm in about fifteen seconds with the network panel open.

Questions

What people ask about favicons

What size should a favicon be?

All of them, which is why the set includes ten. The one to design for is 16×16, because that is what appears in the browser tab. If it does not read at 16 pixels, nothing else in the set matters.

What is a maskable icon?

Android crops home-screen icons to its own shape, so an icon drawn edge to edge loses its outer ring. The maskable version pads your artwork inside a safe circle. It is included automatically.

Why is there no favicon.ico?

Because every browser still in use supports PNG icons. The .ico format exists for versions of Internet Explorer that no longer ship.

Where do I put the files?

At the root of your site, then paste the tags from paste-into-head.html into your head. If your icons live in a subfolder, adjust the paths in those tags to match.

Can I use a photograph?

You can, but it will not read at small sizes. Favicons need a single bold shape in high contrast — photographs turn to mush by 32 pixels.