Web app manifest icons and maskable icons

When someone installs your site as an app, the manifest decides which icon the phone shows.

The icons member

A manifest is a JSON file linked with <link rel="manifest" href="/site.webmanifest">. Its icons member is a list. Each icon has a src (relative addresses are resolved against the manifest's address), optional sizes such as 192x192, a type and optionally a purpose. The example in web.dev's guide uses a 192 × 192 and a 512 × 512 PNG, and the icon maker follows the same pair.

{
  "name": "My site",
  "short_name": "My site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

Maskable icons

Some platforms crop an icon to a shape of their own (a circle, a rounded square). A maskable icon is made for that: its background fills the whole square and the important part sits in the middle. The web.dev guide gives the rule: the important parts, such as the logo, must be inside a circle in the centre with a radius of 40 percent of the icon width, and the outer 10 percent may be cropped on some platforms. That circle is called the safe zone.

How the icon maker keeps to the safe zone

For the maskable icon the tool fills the whole square with your background colour and scales your picture or letter so that its square box sits inside the circle: the box has a side of 0.8 × width / √2, which is about 56.6 percent of the width, so that its corners touch the circle of radius 40 percent. We checked this on a generated file: no pixel of the letter lies outside that circle.

A mistake to avoid

Do not mark one image as both any and maskable in one entry unless it works for both. A maskable image looks small and padded when it is shown uncropped. Give maskable its own entry.

This is an independent guide. It is not connected with Google, Apple, Mozilla, Blogger or any company named here. Facts were read on 14 November 2026 from the pages named on each page. The icon maker runs in your browser: your picture is not uploaded anywhere.