Favicon & PWA アセット チェックリスト 2025 — マニフェスト/アイコン/SEO シグナル

公開: 2025年9月18日 · 読了目安: 1 分 · 著者: Unified Image Tools 編集部

いまも多くのサイトでマニフェストやアイコンの抜け漏れが見られます。特に多いのは「サイズ不足」「ロケール別 manifest の参照ミス」「テーマカラー不一致」「PWA と favicon の経路が混在」の 4 点です。ここでは“見落としが起きにくい順序”でチェックします。

1) 最低限のアイコンセット

• 16px / 32px: ブラウザタブ/ブックマーク用（.ico でも可）
• 192 / 512: PWA install 用（PNG 推奨）
• マスク対応（Safari pinned tab）を使う場合は SVG の単色ロゴも用意
• 透過/余白の見え方を暗色/明色テーマで実機確認

2) ロケール別 manifest のローカライズ

• 各言語配下（例: /ja/manifest.webmanifest）に name/short_name/description を翻訳
• start_url と scope がロケールルートに向いているか確認（/ja で /en を指していないか）
• HTML の <link rel="manifest" href="/ja/manifest.webmanifest"> を各ロケールのレイアウトで確実に参照

3) テーマカラーと表示一貫性

• manifest の theme_color と HTML の <meta name="theme-color"> を一致させる
• ダーク/ライトでの見え方を確認（アイコンが背景に沈まないか）
• iOS の apple-touch-icon も 180 を最低限として用意し、角丸の切れを確認

4) SEO シグナルと HTTP 配線

• 404 になっているアイコンパスがないか（dev と本番でパスがズレやすい）
• robots.txt でアイコン/manifest をブロックしていないか
• Content-Type が application/manifest+json で返っているか

ツールで自動化

• アイコン一括生成: ファビコン生成
  • 元ロゴから 16/32/192/512 を一括生成。余白の当たり方をプレビュー
• ロケール別 manifest の組み立て: ファビコン＋Manifestパック
  • 各ロケールの name/short_name を埋め、start_url/scope を自動検証

運用の落とし穴

• ルートの manifest.webmanifest しか参照されず、ローカライズが無効化
• SPA ルーティングで start_url が 200 でも、Service Worker のスコープ外でインストール不可
• ステージング/本番のオリジン違いで、OGP 画像が相対解決→ 404（sitemap も合わせて確認）

チェックは一度で終わりではありません。配信のたびに差分を見て破綻が出ないかを確認し、テンプレート化してチームで運用しましょう。

5) 検証フロー（本番直前チェック）

1. 生成物の一覧確認（/icons/ 配下と各ローカルの manifest.webmanifest）
2. Lighthouse で PWA/Best Practices を計測（manifest の不足・参照ミスを早期検知）
3. iOS/Safari でのホーム追加を実機確認（apple-touch-icon の角丸・余白）
4. Android/Chrome でのインストール挙動（スプラッシュ背景色・名称の合致）
5. 404/Content-Type のヘッダ検証（DevTools Network タブで確認）

6) Service Worker とキャッシュの注意

• 本番で導入する SW は、開発中は無効化/未登録が安全（開発中の古いチャンクを掴まない）
• SW 更新時は skipWaiting の扱いをチームで統一（手動更新 or 自動更新プロンプト）
• 旧キャッシュの掃除ルール（命名規則・バージョン付け）を明文化

ツール/参考: 本サイトは開発環境で既存 SW を自動解除する仕組みを採用しています。運用では「更新プロンプト→ユーザー同意で更新」が事故リスクの低い定石です。

7) 監視と回帰テスト

• 生成ファイルの存在/ハッシュを CI で検査（欠落・古い参照の検出）
• manifest のフィールド差分をロケールごとに比較（name/short_name/description/start_url/scope）
• robots/sitemap によるブロックや掲載漏れの監視（Search Console/Lighthouse）

8) よくある質問（FAQ）

• Q. 16/32/192/512 以外のサイズも必要？
  • A. 必須ではありませんが、Windows/旧 Android などで 48/96/144 等が使われる場合があります。まずは最小セットで安定化→プロダクトに合わせて拡張が現実的です。
• Q. SVG の favicon は？
  • A. 一部のブラウザでサポートが進みましたが、後方互換のために PNG/ICO を併置するのが無難です。Safari pinned tab 用の単色 SVG は別系統で用意します。
• Q. manifest のローカライズは UI 文言と同じ運用で良い？
  • A. はい。ただし name/short_name の長さ制約がプラットフォームで異なるため、翻訳時に略称ポリシーも合わせて定義しておきます。

9) 実務ワークフロー（E2E）

1. 元ロゴのガイドライン確定（余白・最小サイズ・暗/明配色）
2. ファビコン生成 で 16/32/192/512 を生成
3. ファビコン＋Manifestパック で各ロケール manifest を作成
4. レイアウトで <link rel="icon"> / <link rel="manifest"> をロケールごとに参照
5. ダーク/ライトで視認性を UI レビュー → 必要ならアイコンに縁取り
6. CI でファイル存在/Content-Type/リンク切れを検査、Lighthouse で PWA スコア計測
7. リリース後も Search Console とエラーログで回帰監視

この順序をテンプレート化し、チェックリストとして PR に添付すれば、属人化せずに品質を維持できます。