GitHubやStripeのようなサイトをAndroidのホーム画面に保存したとき、アイコンが完璧に表示されるのに、自分のプロジェクトでは白い円の中に小さなアイコンが寂しく表示されてしまうことに気づいたことはありませんか？その差は、favicon site.webmanifest ファイルが正しく設定されていないことが原因です。これはウェブサイトとモバイルOSをつなぐ目に見えない架け橋です。

2026年において、ルートディレクトリに favicon.ico を置くだけで済ませるのは、タキシード指定のパーティーにビーチサンダルで行くようなものです。動くには動きますが、マナーを知らないと思われてしまいます。ウェブマニフェストは、ユーザーのデバイス上で「アプリ」がどのように見えるかをブラウザに伝えるシンプルなJSONファイルです。以前 Web App Manifest Favicon ガイド でPWA全般について触れましたが、今回は特にfavicon最適化のための site.webmanifest 実装に焦点を当てます。

完璧な site.webmanifest の構造

コードを書く前に、アセットを準備する必要があります。16x16のアイコン一つで済ませようとしてはいけません。現代のデバイスは高解像度であり、より大きく鮮明な画像を求めています。192x192と512x512のPNG画像を用意しましょう。

ルートフォルダに site.webmanifest という名前でファイルを作成します。2026年におすすめの標準的な構造は以下の通りです：

{
  'name': 'マイプロジェクト',
  'short_name': 'プロジェクト',
  'icons': [
    {
      'src': '/android-chrome-192x192.png',
      'sizes': '192x192',
      'type': 'image/png'
    },
    {
      'src': '/android-chrome-512x512.png',
      'sizes': '512x512',
      'type': 'image/png'
    },
    {
      'src': '/maskable-icon-512x512.png',
      'sizes': '512x512',
      'type': 'image/png',
      'purpose': 'maskable'
    }
  ],
  'theme_color': '#ffffff',
  'background_color': '#ffffff',
  'display': 'standalone'
}

ステップ1：アイコンを正しく定義する

icons 配列が最も重要な部分です。purpose: 'maskable' という記述に注目してください。2026年ではこれは必須です。Androidはアイコンを丸や四角など様々な形で表示します。マスカブルアイコンを提供しないと、ロゴの周りに不格好な余白が強制的に追加されてしまいます。マスカブルアイコンは、切り抜かれてもロゴが欠けないように周囲に十分な余白を持たせる必要があります。

ステップ2：HTMLでマニフェストをリンクする

ブラウザに設定ファイルの場所を教える必要があります。HTMLの <head> 内に以下の行を追加してください：

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

このタグは、文字コードやビューポートの設定のすぐ後に置くのがベストです。ブラウザができるだけ早くマニフェストを読み込めるようにするためです。他のタグとの兼ね合いについては、2026年のFaviconベストプラクティス を参照してください。

よくある落とし穴

favicon site.webmanifest の設定は細かい作業に見えるかもしれませんが、プロフェッショナルな製品とそうでないものを分けるのは、まさにこうしたディテールです。Mzu favicondl のようなツールを使えば、面倒なリサイズ作業を自動化し、本来のコーディングに集中できます。