Web AppマニフェストIcons — PWA Favicon用JSON設定

PWAサポートのためのWeb Appマニフェスト(site.webmanifest)でのFaviconアイコン設定。アイコンエントリ、マスカブルアイコン、purposeフィールド、テーマカラーをカバーします。

Design

詳細な説明

Web AppマニフェストIcons

Web Appマニフェスト(site.webmanifestまたはmanifest.json)は、Webアプリケーションがデバイスにインストールされた際の表示を定義するJSONファイルです。icons配列はその最も重要なプロパティの1つです。

purposeフィールド

purposeフィールドはアイコンの使用方法を定義します:

  • "any"(デフォルト) — 標準アイコン、マスキングなし
  • "maskable" — 任意の形状でマスクしても安全
  • "monochrome" — 塗りつぶし色を適用したモノクロームグリフとして使用可能

マスカブルアイコン

マスカブルアイコンには追加のパディングが必要(セーフゾーン = 内側80%)。

推奨アイコンセット

マニフェストには最低限以下のサイズを含めます:

  • 192x192 — ホーム画面に追加に必要
  • 512x512 — PWAスプラッシュスクリーンに必要

マニフェストのリンク

<link rel="manifest" href="/site.webmanifest">

マニフェストファイルをpublic/ルートディレクトリに配置します。マニフェスト内のパスはマニフェストファイルの場所からの相対パスです。

ユースケース

すべてのプログレッシブWebアプリには適切に構成されたWeb Appマニフェストとアイコンが必要です。PWA開発者、インストール可能なWeb体験を構築するチーム、Androidデバイスでの「ホーム画面に追加」機能をサポートしたいWebサイトにとって不可欠です。

試してみる — Favicon Checker

フルツールを開く