App IconとFavicon：何が違うのか？
見た目は似ていますが、目的は異なります。それぞれをいつ使い、どう連携させるかを解説します。
並べて比較
| 観点 | Favicon | App icon |
|---|---|---|
| 主な用途 | ブラウザのタブ、ブックマーク、検索結果 | ホーム画面、アプリスイッチャー、アプリストア |
| ユーザーが目にする場所 | デスクトップブラウザ、モバイルブラウザ | iOSのホーム画面、Androidのランチャー |
| 一般的なサイズ | 16x16、32x32、96x96px | 180x180、192x192、512x512px |
| ファイル形式 | ICO、PNG、SVG | PNG（多くはmaskable） |
| 定義される場所 | HTMLの<link>タグ | manifest.json |
| 必要とされる対象 | すべてのWebサイト | PWA、インストール可能なWebアプリ |
それぞれの正体
favicon（「favorite icon」の略）は、ブラウザのタブ、ブックマーク、閲覧履歴、検索エンジンの結果に表示される小さなアイコンです。ブラウザの中でのサイトの視覚的な目印です。
app iconは、ユーザーがWebアプリをプログレッシブウェブアプリ（PWA）としてインストールしたときに、ホーム画面に表示されるより大きなアイコンです。あなたのアプリを、独立したアプリケーションとして表します。
それぞれが現れる場所
Favicon
Start herePWAかどうかにかかわらず、すべてのサイトに必要
- ブラウザのタブでの識別
- ブックマークでの視覚的な認識
- 検索結果でのブランディング
- 閲覧履歴のアイコン
- デスクトップのショートカット（Windows）
- HTMLで宣言：<link rel="icon" href="/favicon.ico">
App icon
誰かがアプリをインストールして初めて現れる
- ホーム画面のランチャー
- アプリスイッチャー／マルチタスク
- 通知バッジ
- アプリストアの掲載
- スプラッシュ画面のブランディング
- manifest.jsonで宣言："icons": [{"sizes": "192x192"}]
faviconのサイズとapp iconのサイズを並べて
1. サイズの要件
faviconは、ブラウザのタブのような狭い場所に表示されるため、通常は小さめ（16x16〜96x96px）です。ごく小さなサイズでも認識できる必要があります。
app iconは、ホーム画面で目立って表示されるため、はるかに大きめ（180x180〜512x512px）です。より多くの細部を含められ、デバイスごとの形状に合わせたmaskableバリアントを用意してデザインされることも多いです。
2. 使われる場面
faviconは、ブラウジング中は常に見えています。ブラウザのインターフェースの一部だからです。ユーザーはタブやサイトを行き来しながら、絶えず目にします。
app iconは、インストール後にのみ現れます。ブラウザとは切り離された、独立した存在としてアプリを表します。ユーザーはそれをタップして、アプリを全画面モードで起動します。
3. 技術的な実装
faviconは、ドキュメントのhead内の<link>タグを使ってHTMLで宣言します。さまざまな場面向けに複数のサイズを指定できます。
app iconは、HTMLから参照されるmanifest.jsonで定義します。manifestには、アプリ名、テーマカラー、表示モードといった他のPWAメタデータも含まれます。
両方とも必要ですか？
はい、両方を用意すべきです。その理由を説明します。
faviconはすべてのサイトに欠かせません。ブラウザのタブや検索結果でのブランド認識を高めます。
app iconは、ユーザーにサイトをPWAとしてインストールしてほしい場合に必要です。これがないと、インストールの案内は表示されず、ホーム画面での体験も貧弱になります。
両者は同じデザインを共有できますが、それぞれのサイズと場面に合わせて最適化すべきです。
faviconのデザインのヒント
デザインはシンプルに保ちましょう。細部は16pxでは失われます。
視認性のために高コントラストを使いましょう。
複数のサイズ（16x16、32x32、96x96）でテストしましょう。
くっきりした拡大縮小のために、SVGの利用を検討しましょう。
明るい背景でも暗い背景でも機能することを確認しましょう。
app iconのデザインのヒント
最低192x192px（512x512px推奨）でデザインしましょう。
Android向けにmaskableバリアントを作りましょう。
セーフゾーン（内側80%）に重要な要素が収まるようにしましょう。
faviconと一貫したブランディングを使いましょう。
最良の結果を得るために、実機でテストしましょう。