モバイルホーム画面用ファビコンサイズ：2026年完全ガイド

モバイルホーム画面の Favicon サイズ完全ガイド【2026年版】

よく使う Web アプリを iPhone のホーム画面に保存しても、洗練されたロゴの代わりにページ全体のスクリーンショットが表示されて、潰れて読めなかった経験はないでしょうか。原因はそのデザインではなく、モバイルホーム画面の要件に合っていない favicon サイズを出荷している点にあります。

モバイルのホーム画面は、サイトをインストール済みアプリと同じように扱います。つまり、小さなサムネイルから大型のランチャーまで崩れないよう、高解像度の正方形画像が必要なのです。

「モバイルホーム画面アイコン」の本当の意味

16x16 や 32x32 ピクセルの favicon(ブラウザタブ用)は、モバイルホーム画面のアイコンとは別物です。ブラウザタブのアイコンは小さな長方形に収まり、他の 7 つのタブと競い合います。一方、ホーム画面のアイコンはアプリのグリッド上にある 60〜120 ピクセル程度の枠に配置され、角丸やドロップシャドウ、OS レベルのマスク処理が加えられることが一般的です。

Safari の「ホーム画面に追加」や Chrome の「アプリをインストール」をユーザーがタップしたとき、OS は特定の HTML 宣言を探します。適切なサイズが見つからない場合、iOS ではページのスクリーンショット、Android では通常の favicon にフォールバックします。どちらもプロの現場で見栄えが悪いと感じるはずです。

標準の Favicon サイズでは不十分な理由

多くの開発者は 32x32 の ICO ファイルさえあれば favicon としては十分だと学んでいます。確かにこのファイルはブラウザタブ、ブックマーク、アドレスバーでは問題なく機能します。しかし、iOS がホーム画面アイコンを必要とする場面では、はるかに大きな Apple Touch Icon を期待します。

32x32 の ICO ファイルは確かに正方形ですが、Retina ディスプレイのホーム画面ランチャーに必要なピクセル密度を備えていません。iOS がそれを拡大表示するため、「作り込みが甘い」Web アプリにユーザーが抱く典型的なボヤけた仕上がりになります。

モバイル 2 つのエコシステム、それぞれのサイズルール

モバイルホーム画面の要件は 2 つの陣営に分かれ、それぞれ独自の仕様を持っています。

iOS: Apple Touch Icon

Apple のドキュメント化された挙動としては、正方形 PNG を指す <link rel='apple-touch-icon'> タグを探します。最新の iOS(iOS 8 以降)では 180x180 が iPhone ホーム画面のデファクトスタンダードとして扱われています。これより小さいサイズだと、拒否されるか拡大表示され、避けられない品質低下を招きます。

iPad 向けには歴史的に複数のサイズが必要でしたが、現在では 180x180 の PNG を 1 枚だけ用意すれば、現行のほとんどのデバイスをカバーできます。apple touch icon 180x180 を採用する戦略が有効なのは、iOS が大きな画像をスムーズに縮小してくれるためです。

Android: Web App Manifest

Android は W3C が定義する Web App Manifest を経由します。Web App Manifest 仕様によれば、icons メンバーは sizes、type、purpose 属性を明示した画像オブジェクトの配列を受け付けます。

Android が常に必要とする 2 つのサイズは次のとおりです。

192x192 — ホーム画面ランチャーとほとんどのアプリドロワー向け
512x512 — スプラッシュ画面と Play Store 掲載用(PWA を公開する場合)

Android のアダプティブシェイプ(円形、スクワークル、角丸正方形)に対応する 'purpose': 'maskable' アイコンを用意したい場合は、セーフゾーンを確保した 512x512 PNG が必要です。

最小限のモバイルホーム画面セット

180x180 PNG — Apple Touch Icon(iPhone、iPad を兼用)
192x192 PNG — Android ホーム画面ランチャー
512x512 PNG — Android スプラッシュ、Play Store、maskable バリアント
SVG favicon — オプション。ブラウザタブやダークモード対応向け
32x32 ICO — 古いデスクトップブラウザ向けのレガシーフォールバック

HTML への組み込み

最小限で動作する構成は次のとおりです。<head> 内に配置してください。

&lt;link rel='apple-touch-icon' href='/icons/apple-touch-icon-180.png' sizes='180x180'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/icons/favicon.svg'&gt;
&lt;link rel='icon' type='image/png' href='/icons/favicon-96.png' sizes='96x96'&gt;
&lt;link rel='manifest' href='/site.webmanifest'&gt;

site.webmanifest では Android 用の両サイズを宣言します。

{
  'icons': [
    { 'src': '/icons/icon-192.png', 'sizes': '192x192', 'type': 'image/png' },
    { 'src': '/icons/icon-512.png', 'sizes': '512x512', 'type': 'image/png' },
    { 'src': '/icons/icon-maskable.png', 'sizes': '512x512', 'type': 'image/png', 'purpose': 'maskable' }
  ]
}

rel='icon' の記述は HTML Living Standard に準拠しているため、レガシー形式ではなく type と sizes 属性を使用します。

ベストプラクティス

まず 512x512 でデザインする。最大サイズから書き起こせば、180、192、96 への縮小が滑らかになります。
JPEG ではなく PNG を使う。ホーム画面アイコンは OS レベルのマスク処理のため透過が必要です。JPEG だと背景がベタ塗りになります。
precomposed タグは使わない。apple-touch-icon-precomposed はすでに廃止されており、iOS は長年にわたって光沢付きレンダリングを廃止しています。
マニフェストを検証する。sizes の入力ミスは Android のホーム画面インストールを静かに壊します。Chrome DevTools の Application タブで確認しましょう。
積極的にキャッシュバスターを付ける。モバイル OS はホーム画面のアイコンを数週間キャッシュします。バージョン付きの URL(例:?v=2)を使えば、リデザイン後の更新が強制されます。

あるサイトが現在配信している favicon を確認したい場合は、全ブラウザ向け favicon テスターの解説記事が DevTools を使った検証手順を紹介しています。パッケージそのものを生成したい場合は、Mzu favicondl を使うと 5 つのファイルを 1 クリックで書き出せます。

モバイルホーム画面向けの favicon サイズ攻略の要点は、何十枚も画像を用意することではなく、適切な 3〜4 枚の PNG を用意し、HTML とマニフェストで正しく宣言し、OS がそれを本当に見つけられるかを検証することにあります。