最近の Android スマートフォンにプログレッシブ ウェブアプリ（PWA）をインストールした場合、アプリのアイコンの背景が白になることがあります。Android 8.0 ではアダプティブ アイコンが導入され、デバイスモデルに応じてさまざまな形状のアプリアイコンを表示できます。この形式を使用していないアイコンの背景は白になります。
マスク可能アイコンは Chrome と Firefox の新しいアイコン形式です。プログレッシブ ウェブアプリでアダプティブ アイコンを使用し、アイコンの外観をより詳細に制御できます。
現在のアイコンは準備できましたか？
マスク可能なアイコンはさまざまな形状をサポートする必要があるため、ブラウザやプラットフォームに必要な形状とサイズにブラウザで切り抜き可能なパディング付きの不透明な画像を指定する必要があります。
マスク可能アイコンの仕様には、すべてのプラットフォームで考慮される標準化された「最小セーフゾーン」が含まれています。アイコンの重要な部分（ロゴなど）は、アイコンの中央の円形領域（アイコンの幅の 40% を半径とする）内に収める必要があります。プラットフォームによっては、外側の 10% の端がトリミングされる場合があります。
アイコンのどの部分がセーフゾーン内にあるかは、Chrome DevTools で確認できます。プログレッシブ ウェブアプリを開いた状態で、DevTools を起動して [アプリケーション] パネルに移動します。[アイコン] セクションで、[マスク可能なアイコンの最小セーフエリアのみを表示する] を選択できます。これにより、アイコンがカットされ、セーフエリアのみが表示されるようになります。このセーフエリア内にロゴが表示されている場合は、アイコンの準備ができています。
![エッジが切り抜かれて PWA アイコンが表示されている DevTools の [Applications] パネル](https://web.developers.google.cn/static/articles/maskable-icon/image/applications-panel-devto-a75aad0ea167e.png?authuser=0&hl=ja){kind=icon}
さまざまな Android シェイプでマスク可能なアイコンをテストするには、Tiger Oakes の Maskable.app を使用します。アイコンを開くと、Maskable.app を使用してさまざまなシェイプとサイズを試して、プレビューをチームと共有できます。
マスク可能なアイコンを導入するにはどうすればよいですか？
既存のアイコンに基づいてマスク可能なアイコンを作成するには、Maskable.app エディタを使用します。アイコンをアップロードし、色とサイズを調整してから画像をエクスポートします。
マスク可能なアイコンを作成して DevTools でテストしたら、新しいアセットを指すようにウェブアプリ マニフェストを更新する必要があります。ウェブアプリ マニフェストでは、ウェブアプリに関する情報を JSON ファイルで記述し、icons 配列を組み込みます。
purpose フィールドは、アイコンの使用方法をブラウザに伝えます。デフォルトでは、アイコンの目的が "any" です。Android では、これらのアイコンは白い背景にサイズ変更されます。
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
アイコンをマスク可能にするには、purpose 値を "maskable" に設定して、アイコンマスクと併用する必要があることを示します。これにより、白い背景が取り除かれ、アイコンの外観をより細かく制御できます。他のデバイスでマスク可能なアイコンをマスクなしで使用したい場合は、スペースで区切った複数の目的（"any maskable" など）を指定することもできます。
謝辞
このページのレビューは Joe Medley によって行われました。