マスカブルアイコン：セーフゾーンと purpose フィールド

Android のランチャーは、ホーム画面が統一して見えるよう、すべてのアプリアイコンに形状マスクを適用します。その形はデバイスやランチャーによって異なり、あるものは円、別のものはスクワークル、また別のものは角丸正方形です。通常のウェブアイコンをそのシステムに渡すと、白い角丸ボックスの中に縮められるか、最悪の場合ロゴを貫いて切り抜かれてしまいます。

マスカブルアイコンは、その切り抜きを前提に作られています。アートワークは四辺すべてに伸び、意味のある内容は十分内側に置かれるため、どのマスクも背景の上に落ち、マークの上には落ちません。これは Android のアダプティブアイコンと同じ考え方を、一枚の画像と一つの宣言で表したものです。

"icons": [
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
  {
    "src": "/icon-maskable-512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable"
  }
]

両方を出荷しましょう。既定 purpose のアイコンは切り抜かれない場所で使われ、マスカブルなものは切り抜かれる場所で使われます。