Make a favicon from your logo

Most favicon generators hand back a folder of twenty icons and a block of fifteen link tags. That was genuinely necessary once, when every iPhone generation and every Windows tile wanted a size of its own.

Browsers consolidated years ago. What they read now is an ICO for the tab, one Apple touch icon, and a manifest pointing at a couple of PNGs. Everything else in those folders is ignored, and the long list of tags is the thing people paste in wrong.

So this generates five files and three lines. Fewer things to install is fewer things to install incorrectly, and the result covers the same browsers.

This is the part worth being honest about. A tab icon is 16 pixels square. That is roughly the size of a full stop in this paragraph, and most logos simply do not survive it.

A wordmark becomes a gray smear. A mark with fine lines fills in. Anything with more than one color of similar lightness turns to mud. The tab preview above shows you the real size rather than a flattering one, because the alternative is finding out after it is live.

The fix is not a better export. It is a different mark. Take the single strongest element, usually one letter or one shape, and let that be the icon. Almost every brand you can name does exactly this, and the icon is drawn separately from the logo rather than shrunk down from it.

Android does not show your launcher icon as you drew it. It crops it to whatever shape the phone's theme uses, which might be a circle, a squircle or a rounded square depending on the manufacturer.

A mark that fills its square loses its corners to that crop. The spec answers this with a safe zone, which is to keep everything important inside the middle 80% and it survives any shape. The maskable file is padded to respect that, which is why it looks smaller than the others in the preview. It is meant to.

An ICO is not an image format so much as a box that holds several images. The one generated here carries 16, 32 and 48 pixel versions, and the browser picks whichever suits the place it is drawing.

That matters because a 32px icon scaled down to 16 by the browser looks worse than a 16px icon drawn properly. Carrying both means the small one was rendered at its real size with the right smoothing rather than squashed at display time.

No browser can write this format, which is why a generator has to assemble the container by hand. This one does it on your device rather than on a server.

Every icon here is produced by scaling your file down. Scaling down from a large source is fine; scaling up from a small one is not, and no tool can add detail that was never recorded.

If your only copy is a 200px PNG someone emailed you, the 512 pixel icons will be soft and there is nothing to be done about it in a browser. An SVG, or any artwork comfortably larger than 512 pixels, gives every size room to be sharp.

This is the same reason a proper logo package ships vector files. The favicon is one of maybe a dozen places where having the original pays for itself.