Favicon and app icon generator

Design for 16 pixels, not for 512

The size a favicon is actually seen at is 16 pixels wide, in a row of other tabs, out of the corner of someone's eye. A logo that reads beautifully at 512 is frequently an unidentifiable smudge at that size: thin strokes disappear, text becomes texture and anything with more than two or three shapes turns to mush.

The fix isn’t technical. It is to draw a simplified mark for the small sizes, usually a single letter or one bold shape with high contrast and to judge it at actual size rather than zoomed in. The previews above are rendered at the real pixel dimensions for that reason.

What each file is for

favicon.ico

A container holding 16, 32 and 48 pixel versions at once, so the browser picks the one it needs. Browsers request this path by default, which is why it is still the most reliable single file despite being the oldest format here.

favicon.svg

Sharp at any size and usually smaller than the PNGs. Only produced when you supply an SVG, because there is no honest way to make one from a bitmap.

apple-touch-icon.png

180 pixels, opaque, used when someone adds your site to an iOS home screen. iOS applies its own rounded corners, so don’t round them yourself.

web-app-manifest-192 and -512

Android home screens, install prompts and splash screens, referenced from the manifest rather than from the HTML.

site.webmanifest

A small JSON file naming the icons, the theme colour and the display mode. Marking the icons as maskable tells Android it may crop them to whatever shape the launcher uses, which is why the padding control matters.

Padding and why it is only on the large icons

Android may crop an icon to a circle, a squircle or a rounded square depending on the launcher and it only guarantees the middle 80% survives. Padding protects against that. The favicon has the opposite problem: at 16 pixels, margin is the difference between a legible mark and a smaller illegible one, so it never gets any.