Favicon pack

Favicon pack turns one square image into the ten files a website needs for its icons: favicon.ico holding 16, 32 and 48 pixel versions, PNGs at 16, 32, 48, 180, 192 and 512, a maskable 512 for Android launchers, site.webmanifest and an HTML snippet to paste into your head. Every icon is rendered in your own tab and handed back as favicon-pack.zip, so the artwork is never uploaded. The contact sheet shows each icon at its actual pixel size, because a 16 pixel favicon is only honest at 16 pixels.

How it works

  1. Drop a square image A PNG or SVG at 512 pixels or larger works best. An SVG is re-rendered larger before the icons are cut, so the 512 pixel files are drawn rather than enlarged.
  2. Set the background and corners The background colour fills the Apple and maskable icons, which cannot be transparent. Turn on rounded corners to round the tab and web icons over that colour — Apple and Android apply their own mask, so those two are left square.
  3. Name the app The name is written to site.webmanifest as name and short_name, with short_name trimmed to twelve characters on a word boundary. The theme colour becomes the browser UI colour on Android and the meta tag in the snippet.
  4. Check the sheet, then download Every icon appears at actual size with its filename underneath. Press Download ZIP for favicon-pack.zip, or copy site.webmanifest and the HTML snippet straight to the clipboard.

Questions

What is actually in the ZIP?
Ten files: favicon.ico containing 16, 32 and 48 pixel images, favicon-16.png, favicon-32.png, favicon-48.png, apple-touch-icon.png at 180, icon-192.png, icon-512.png, icon-maskable-512.png, site.webmanifest and snippet.html. The snippet is the link and meta tags to paste into your head, and it assumes the files sit at the root of the site.
How small can the source image be?
It will accept anything, but the 512 pixel icons are enlarged from whatever you give it. If the shortest side is under 512 pixels the tool warns you those icons will look soft. Small sizes are produced by halving repeatedly towards the target instead of in one jump, which is what stops a 16 pixel favicon looking like static.
Why is the maskable icon drawn smaller than the others?
Android launchers crop a maskable icon, sometimes to a circle, so the artwork sits inside the middle 80 per cent of the 512 pixel square and the background colour fills the rest. Anything outside that safe zone can be cut away by the launcher, which is why that one icon cannot be transparent either.

Every tool