Install
- 1Export the .zip (top right) and unzip it.
- 2Copy everything in public/ to your site root (Next.js, Vite, Astro: the public/ folder).
- 3Paste the HTML into the <head> of every page.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="My App" />
<link rel="manifest" href="/site.webmanifest" />
Maskable icon generator
Maskable icons fill the whole square and keep the important part inside a central circle. The generator handles the inset for you.
What you get · Web / PWA
- favicon.ico: 16, 32, 48px PNGs in one ICO
- apple-touch-icon.png: 180×180, opaque — iOS applies the mask
- Manifest icons: 192×192 · 512×512 PNG
- Maskable: 512×512, logo inside the 80% safe circle
- site.webmanifest + HTML <head> snippet included
FAQ
What is a maskable icon?
An icon with purpose "maskable" in the web manifest. It is full-bleed, so the platform can crop it to its own shape without leaving white borders.