iPhoneで「共有」から「ホーム画面に追加」をタップしたとき、洗練されたアプリアイコンを期待していたのに、ウェブページの縮小された読めないスクリーンショットが表示されてガッカリしたことはありませんか？私は実際のプロダクションサイトでこの現象を頻繁に目にします。デスクトップのタブでは綺麗に見えていても、モバイルのホーム画面追加アイコン（add to home screen icon favicon）の設定が不完全なケースが非常に多いのです。

GitHubやMercariを見てください。彼らのウェブアプリをスマホに保存すると、App Storeからダウンロードしたネイティブアプリと全く同じようにホーム画面にアイコンが鎮座します。彼らはブラウザのデフォルト挙動に任せたりはしません。OSに何を表示すべきかを明示的に定義しているのです。

モバイルブラウザは基本的に怠け者です。iOS SafariやAndroid Chromeに対して、ホーム画面のショートカットにどの画像を使うべきか明示的に指示しないと、彼らはパニックを起こします。Safariはサイトのスクリーンショットをそのまま使い、Chromeは32x32の小さなデスクトップ用faviconを192x192の巨大な正方形に無理やり引き伸ばそうとします。どちらの結果も悲惨で、ブランドの信頼性を損ないます。

完璧なホーム画面アイコンのための3ステップ

これを修正するために、レガシーなHTMLタグを大量に記述する必要はありません。2026年現在、Apple（iOS）とGoogle（Android）の2大巨頭を満足させるだけで十分です。具体的な手順は以下の通りです。

ステップ1: Apple Touch Iconの作成（iOS）

Appleはホーム画面アイコンに関する標準のWeb Manifestを頑なに無視します。Safariには専用のlinkタグを与える必要があります。画像は180x180ピクセルのPNGでなければなりません。

（ここで透過背景を使用しないでください。iOSは透過部分を真っ黒に塗りつぶすため、ロゴが不気味に見えてしまいます。必ずベタ塗りの背景色を使用してください）。

<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>

このタグを<head>内に配置します。iOS特有の癖についてさらに詳しく知りたい場合は、Apple Touch Icon設定ガイドをご覧ください。

ステップ2: Web Manifestの設定（Android）

Androidデバイスはsite.webmanifestファイルを探します。このJSONファイルは、サイトがホーム画面に保存されたときの動作（どのアイコンを使用するか、ブラウザのUIを隠すかどうかなど）をChromeに正確に伝えます。

ルートディレクトリにsite.webmanifestという名前のファイルを作成し、以下のコードを追加します：

{
  "name": "あなたのアプリ名",
  "short_name": "アプリ",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

display: standaloneプロパティに注目してください。これは、ユーザーがホーム画面からサイトを開いたときにURLバーを消し、ネイティブアプリのような感覚を与える魔法のコードです。

ステップ3: HTMLでManifestをリンクする

HTMLドキュメントからそのmanifestファイルを参照する必要があります。Apple touch iconタグのすぐ下にこれを追加します：

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

避けるべきよくある落とし穴

シニアエンジニアでさえ、ここでミスをすることがあります。私が毎週のように目にする罠をいくつか紹介します：

実装のテスト

デスクトップブラウザの開発者ツールを信用しないでください。ホーム画面追加アイコンをテストする唯一の確実な方法は、実機を使用することです。

iPhoneでサイトを開き、共有ボタンをタップして「ホーム画面に追加」を選択します。プレビューアイコンを確認してください。それが鮮明な180x180のPNGであれば成功です。AndroidデバイスでもChromeのメニューを使って同じことを行います。アイコンがピクセル化して見える場合は、manifestのパスを再確認してください。

このプロセスを複雑にしすぎないでください。2026年に必要なのは、標準のデスクトップアイコン、180pxのApple Touch Icon、そしてAndroidアイコンを含むmanifestの3つのファイルだけです。1つの高解像度ロゴからこれらの正確なファイルを生成する必要がある場合は、Mzu favicondlに放り込んで、出力されたファイルをルートディレクトリに配置するだけです。