maskableアイコンとは
Webアプリをインストールすると、ランチャーはそのアイコンをランチャー独自の形で表示します。ある端末では円、別の端末では角丸の正方形やしずく形です。透明な背景の通常のアイコンをその形にどう収めるかは、プラットフォーム次第です。maskableアイコンは切り抜かれることを前提に作られています。正方形全体を自分の背景で埋めるので、ランチャーがどんな形に切り抜いても、色の付いた完全なアイコンになります。
Webアプリマニフェストでは、各アイコンのpurposeメンバーでこの違いを示します。W3Cの仕様にはany、maskable、monochromeの3つのpurposeがあり、purposeのないアイコンはanyとして扱われます。
セーフゾーン：半径40%の円
仕様では、どんなマスクからもアートワークが安全な範囲を次のように定めています。「アイコンの中心を中心とし、半径がアイコンのサイズの2/5（40%）の円」。512pxのアイコンなら、中央にある直径410pxの円です。MDNは同じ範囲を直径がアイコンの80%の円と説明し、web.devは外側の縁（各辺およそ10%）が切り取られる可能性があると注意しています。
この画像は、下の実例パッケージのmaskableアイコンです。最初のものにはセーフゾーンが描かれていて、残りの3つは同じファイルを円形、角丸の正方形、しずく形のマスクで切り抜いたものです。ロゴが円の中に収まっているので、どのマスクでもロゴは欠けず、形が変わるのは背景だけです。
favicon作成は、アートワークの外接矩形ではなくアートワークそのものを、選んだ余白を差し引いた円の中に収めます。そのため丸いロゴはセーフゾーンのほぼ全体を使えますが、四角い写真は角まで円に収める必要があるので小さくなります。
purposeはanyかmaskableか：2つのファイルにする理由
アイコンに"purpose": "any maskable"と宣言することもでき、web.devのマニフェストの記事はこの書き方を使っています。一方、web.dev自身のmaskableアイコンの記事は、これを勧めていません。マスク用に余白を取ったアイコンは、マスクなしで表示される場所では小さすぎるからです。情報源の意見が分かれているので、2つのファイルにすればこのトレードオフを避けられます。anyのアイコンは透過を保ち、アートワークが正方形いっぱいに広がります。maskableのアイコンは端まで背景があり、アートワークはセーフゾーンの中に収まります。
| purpose | 背景 | アートワーク | 表示される場所 |
|---|---|---|---|
any |
透明 | 余白を除いて正方形いっぱい | アイコンが切り抜かれずに表示される場所 |
maskable |
選んだ背景色を端まで | 40%の円の中 | アイコンを形に切り抜くランチャー |
両方の種類を含むマニフェスト
実例パッケージのsite.webmanifestです。アイコンのパスは相対パスです。仕様ではsrcはstart_urlと同じく、マニフェスト自身のURLを基準に解決されます。そのため、アイコンがマニフェストの隣にあれば、どのフォルダーでも動作します。
{
"name": "png2svg.art",
"short_name": "png2svg",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0a2d8f",
"background_color": "#e8efff",
"display": "standalone",
"start_url": "/"
}
すべてのページから<link rel="manifest" href="/site.webmanifest">でリンクします。仕様では、登録されたファイル拡張子として.webmanifestが挙げられ、application/manifest+jsonとして配信することが推奨されていますが、JSONのタイプであれば受け付けられます。
サイズには理由があります。2026年9月に更新されたMDNのインストール可能性のガイドによると、Chromium系のブラウザがWebアプリをインストールできるのは、ほかの条件に加えて、マニフェストに名前か短い名前、start_url、displayモード、192pxと512pxのアイコンがあり、サイトがHTTPSで配信されている場合だけです。Safariは仕組みが異なり、WebKitチームはSafari 26について、インストールの条件はなく、サイトがマニフェストのアイコンを定義していればそれを使うと書いています。MDNはまた、少なくとも1,024px四方のアートワークから始めることを勧めています。小さなビットマップを512pxに拡大しても、細部は増えません。
maskableアイコンのテスト方法
ChromeでDevToolsを開き、アプリケーション → マニフェスト（Application → Manifest）を表示して、マスク可能なアイコンの最小限の安全領域のみを表示（Show only the minimum safe area for maskable icons）にチェックを入れます。アイコンのセクションに、各maskableアイコンをセーフゾーンで切り抜いたものが表示されます。そこで重要なものが欠けていれば、ランチャーでも欠ける可能性があります。このオプションはChromeのドキュメントに説明があります。web.devは、複数のマスクでアイコンをプレビューできるサードパーティのサイト、Maskable.appも紹介しています。最終確認は、実際のスマートフォンにインストールしたアプリで行いましょう。
ダウンロードできる実例
上のアイコンは、このサイト自身のロゴ（誰かのアップロードではなく、リポジトリにあるSVG）を、余白8%、背景#e8efffでfavicon作成に1回かけたものです。ツールが作るファイルそのままです。実例パッケージをダウンロード（ZIP）すると、すべてのファイルとREADMEを確認できます。同じパッケージのブラウザタブ側については、faviconの形式の違い：SVG・PNG・ICOの使い分けをご覧ください。