Web アプリマニフェストガイド
Web アプリ マニフェスト (site.webmanifest) は、インストール可能なブラウザーにアプリの名前、色、表示モード、ホーム画面で使用するアイコン サイズを伝える JSON ファイルです。 `<link rel='manifest' href='/site.webmanifest'>` とリンクすると、デスクトップおよび Android で Chrome および Edge PWA のインストール プロンプトが有効になります。これを 192×192 および 512×512 の PNG アイコン (両方とも favicon generator によってエクスポート) と組み合わせて、完全な PWA ファビコン セットアップを実現します。
Web アプリのマニフェストは、`application/manifest+json` MIME タイプで提供される JSON テキスト ファイルです。これは選択した任意の URL に存在しますが、規則としてドメイン ルートでは /site.webmanifest になります。 `<head>` 要素内の `<link rel='manifest' href='/site.webmanifest'>` を使用して、HTML からリンクします。ブラウザーは、インストール プロンプトを表示するかどうか、またはインストール後にアプリをレンダリングする方法を評価するときにマニフェストを読み取ります。
icons 配列は、マニフェストの中で最もファビコンに関連する部分です。各エントリは、src (画像への URL)、サイズ (ピクセル寸法)、タイプ (MIME タイプ)、およびオプションで目的 (「任意」、「マスク可能」、「任意のマスク可能」のいずれか) を指定します。少なくとも、ランチャー アイコンには 192×192 PNG、スプラッシュ スクリーンには 512×512 PNG を指定してください。これらがないと、Chrome はインストール プロンプトを表示しません。
192×192 アイコンは、アプリ ランチャー、最近のアプリ スイッチャー、および PWA が Web プッシュ通知を送信するときの通知シェードで Android Chrome によって使用されます。これは PNG である必要があり、宣言された URL でリダイレクトなしでアクセスでき、マニフェストとは異なるドメインにある場合は適切な CORS ヘッダーとともに提供されます。 favicon generator は、直接使用できるように android-chrome-192x192.png をエクスポートします。
512×512 のアイコンは、ホーム画面起動後のアプリのロード中に表示される PWA スプラッシュ画面、デスクトップ上の Chrome および Edge のインストール ダイアログ プレビュー、および Chrome OS アプリ ランチャーに使用されます。マニフェストに 512×512 のエントリが存在しない場合でもインストールはブロックされませんが、スプラッシュ スクリーンに一般的なブラウザ アイコンが表示されます。洗練されたインストール体験を得るために、常にこれを含めてください。
マスク可能なアイコンは、Android 固有の拡張機能です。 Android アダプティブ アイコン システムは、アプリ アイコンに幾何学的なマスク (円、スクイクル、ティアドロップ、角丸長方形) を適用します。その形状はデバイス メーカーによって異なります。標準の「任意の」アイコンは、これらのマスクによってエッジが切り取られる場合があります。 「マスカブル」アイコンにはセーフ ゾーン パディングが含まれており、重要なアートワークを画像の中心 80% (セーフ ゾーンの円) 内に収めます。これにより、ロゴをクリッピングせずに任意のマスクを適用できます。
マニフェストでマスク可能なアイコンを宣言するには、同じサイズの 2 番目のエントリ (`'purpose': 'maskable'`: `{ "src": "/android-chrome-512x512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }`) を追加します。 1 つのエントリに `'purpose': 'any maskable'` を組み合わせることもできます。ジェネレーターのマスカブル エクスポート オプションを使用して、追加のパディングを含むマスカブル アイコンを生成します。
name フィールドと short_name フィールドは、ホーム画面とアプリドロワーでアプリにどのようにラベルを付けるかを制御します。 `name` は、インストール プロンプト中に表示されるアプリの完全名です。 `short_name` は、ホーム画面のアイコンの下にあるラベルです。小さい画面で切り捨てられないように、12 文字以内にしてください。インストール プロンプトを表示するには、両方のフィールドが必要です。
theme_color フィールドは、(PWA がインストールされているときだけでなく) ユーザーがサイトに移動したときの Android Chrome のブラウザ アドレス バーの色を設定します。また、スタンドアロン PWA モードでのツールバーの色も設定します。プライマリ ブランド カラーを 16 進値として使用します。マニフェストのテーマカラーを読み取らないブラウザの場合は、一致する `<meta name='theme-color' content='#YOUR_COLOR'>` を HTML に追加します。
background_color フィールドは、PWA の起動とアプリのコンテンツの最初のペイントの間に表示されるスプラッシュ スクリーンの背景色を制御します。不快なフラッシュを防ぐために、アプリの背景 (通常は白またはブランドの主な色) に一致するように設定します。 background_color が実際のアプリの背景と一致しない場合、ユーザーには起動時に色の変化が表示されます。
表示フィールドによって、インストール後に PWA がどのように表示されるかが決まります。 `standalone` はブラウザのアドレス バーとナビゲーション ボタンを非表示にし、アプリをネイティブ アプリのように見せます。 `minimal-ui` は最小限のナビゲーション バーを保持します。 `fullscreen` はステータス バーを含むすべてを削除します。 `browser` は完全なブラウザ UI を示します。ほとんどの PWA では、`standalone` が正しい選択です。ディスプレイが `browser` に設定されている場合、インストール プロンプトは表示されません。
start_url フィールドは、ユーザーがインストールされた PWA をホーム画面から起動したときに開く URL を指定します。これを常に含めてください。これを含めないと、Android はマニフェストが検出された URL を開きます。これは、ホームページではなくディープリンク ページである可能性があります。ほとんどのサイトには `'start_url': '/'` を使用し、アプリが特定のルートで開始する必要がある場合は特定の URL を使用します。
Chrome DevTools では、マニフェストの問題を簡単にデバッグできます。 DevTools (F12) を開き、「アプリケーション」タブに移動し、左側のパネルで「マニフェスト」をクリックします。 Chrome には、マニフェストの解析されたビュー、解析エラー、アイコンの取得失敗、およびインストール プロンプトが表示されない理由を説明する「インストール可能性」チェックリストが表示されます。一般的な問題には、アイコンが見つからない (404)、間違った MIME タイプ、または 192×192 のアイコンが見つからないなどがあります。
マニフェストを正しく提供するには、2 つのサーバー側構成が必要です。まず、ファイルは `Content-Type: application/manifest+json` で提供される必要があります。次に、アイコンが CDN 上にある場合、またはマニフェストとは異なるオリジンにある場合、アイコンの応答には適切な CORS ヘッダー (`Access-Control-Allow-Origin: *` またはドメイン) が含まれている必要があります。アイコン ファイルに CORS ヘッダーがない場合、ブラウザーはマニフェストを無効なものとして扱います。
マニフェストを自動生成するフレームワークの場合は、生成されたファイルに実際のアイコンのサイズと色が含まれていることを確認してください。 Next.js は、/app/manifest.ts エクスポートからマニフェストを生成します。 React アプリを作成すると、/public/manifest.json が生成されます。 Vite はデフォルトではマニフェストを生成しません。手動で作成します。いずれの場合も、デフォルトのプレースホルダー アイコンではなく、実際のブランド アイコン ファイルを参照するようにアイコン配列を更新します。
使い方
- 1
192×192 および 512×512 PNG アイコンを生成
512×512 のロゴ PNG または SVG を [favicon generator](tool:favicon-generator) にアップロードします。ダウンロード パッケージには、直接使用できる android-chrome-192x192.png および android-chrome-512x512.png が含まれています。
- 2
site.webmanifestを作成する
少なくとも `name`、`short_name`、`icons` (192 および 512 エントリ)、`theme_color`、`background_color`、および `display: 'standalone'` を含む JSON ファイルを作成します。ジェネレーター パッケージには、事前に入力されたマニフェスト テンプレートが含まれています。
- 3
正しい MIME タイプでマニフェストを提供する
`Content-Type: application/manifest+json` を使用して .webmanifest ファイルを提供するようにサーバーを構成します。 Apache では、`AddType application/manifest+json .webmanifest` を .htaccess に追加します。 Nginx では、MIME タイプを mime.types に追加します。
- 4
HTML のマニフェストをリンクします
`<head>` 内に `<link rel='manifest' href='/site.webmanifest'>` を追加します。マニフェストのtheme_colorを読み取らないブラウザ用に「<meta name='theme-color' content='#YOUR_COLOR'>」も追加します。
- 5
Chrome DevTools で検証する
Chrome [開発ツール] > [アプリケーション] > [マニフェスト] を開きます。エラーが表示されず、すべてのアイコンが解決されることを確認します。 PWA インストール プロンプトで満たされているか満たされていない正確な基準については、「インストール可能性」セクションを確認してください。
- 6
インストールプロンプトをテストする
Android Chrome に、サイトに移動します。すべての条件が満たされると、Chrome はブラウザ メニューにインストール バナーまたは「ホーム画面に追加」オプションを表示します。インストール後、スプラッシュ画面の背景色とホーム画面アイコンが正しくレンダリングされることを確認します。
今すぐ試す
PWA アイコン パッケージを生成する
ファビコンジェネレーターよくある質問
基本的な Web サイトに Web アプリのマニフェストは必要ですか?+
いいえ - Android およびデスクトップ Chrome/Edge で PWA のホーム画面へのインストール プロンプトが必要な場合のみ。 favicon.ico のみがブラウザのタブを処理します。より充実したモバイルおよびデスクトップのインストール エクスペリエンスを有効にする場合は、マニフェストを追加します。
Web アプリのマニフェストにはどのようなアイコン サイズが含まれますか?+
最小: 192×192 (Android ランチャー) および 512×512 (スプラッシュ画面およびインストール プレビュー)。アダプティブ Android アイコンをサポートするには両方のサイズのマスカブル バリアントを追加し、追加の密度範囲が必要な場合は 384×384 を追加します。
マニフェストのtheme_colorとbackground_colorの違いは何ですか?+
theme_color はブラウザのアドレス バーとツールバーの色を設定します。 Background_color は、アプリの最初のペイント前に表示されるスプラッシュ スクリーンの背景色を設定します。シームレスなインストールと起動エクスペリエンスを実現するために、ブランドに合わせて両方を設定します。
Chrome に PWA のインストール プロンプトが表示されないのはなぜですか?+
最も一般的な理由は、マニフェストが見つからないか無効である、192×192 アイコンが見つからない、アイコンが 404 を返す、マニフェストが正しい MIME タイプで提供されていない、サイトが HTTPS 経由で提供されていない、などです。 Chrome DevTools > Application > Manifest を使用して、インストール失敗の正確な理由を確認します。
マスカブルアイコンとは何ですか? 必要ですか?+
マスカブル アイコンにはセーフ ゾーン パディングが含まれているため、Android はロゴを切り取ることなく円形または角マスクを適用できます。非正方形のアダプティブ アイコン形状を使用する Android デバイスでホーム画面アイコンを正しく表示するには、これが必要です。マニフェスト アイコン配列で `'purpose': 'maskable'` を使用して宣言します。
Web アプリのマニフェストで SVG アイコンを使用できますか?+
Chromium は一部のマニフェスト アイコン コンテキストで SVG をサポートしていますが、クロスブラウザー インストール UI では PNG が普遍的に安全なデフォルトです。必ず PNG 192 および 512 エントリを含めてください。これらの横に SVG エントリを追加しても問題はありません。
Web マニフェストが有効かどうかを確認するにはどうすればよいですか?+
Chrome DevTools (F12) > アプリケーション > マニフェストを開きます。 Chrome は、解析エラー、アイコン取得の失敗、および完全なインストール可能性チェックリストを示します。報告された問題を修正し、Chrome のアドレス バーの [ホーム画面に追加] オプションを使用してインストール プロンプトを再テストします。