ファビコンのサイズの説明

16×16 ピクセルのファビコンは、元の Web 標準です。これは、標準 (96dpi) ディスプレイのブラウザ タブ、すべてのデスクトップ ブラウザのブックマーク ツールバー、および一部のブラウザ履歴リストで使用されます。 16×16 は非常にタイトなキャンバスであるため、ファビコンのデザインは、単一の図形、文字、または抽象的なマークという最も単純な形に取り除かれる必要があります。それ以上複雑なものは判読できなくなります。

32×32 ピクセル サイズは 16×16 の 2 倍で、網膜/HiDPI ブラウザ タブを 2 倍の密度で提供し、ブックマーク アイコンを高 DPI で提供し、アドレス バーの提案アイコンを Chrome で提供します。高密度ディスプレイがデバイスの大多数になっているため、最新のブラウザーは 16×16 よりも 32×32 を要求することがはるかに多くなります。 1 つのサイズのみを発送できる場合は、32×32 が最も影響力のある選択になります。

48×48 ピクセル サイズは、Windows Explorer の「中アイコン」表示サイズであり、Google 検索で検索結果スニペットのファビコンの資格を得るために必要な最小サイズです。ファビコンが 48×48 の最小値を満たしていないサイトは、Google の検索結果で URL の横にブランド マークの代わりに一般的な地球アイコンが表示されます。 .ico バンドルには常に 48×48 を含めてください。

64×64 ピクセル サイズは、Windows Explorer の大きなアイコン ビューおよび一部の Linux デスクトップ環境で使用されます。これをマルチサイズの .ico ファイルに含めると、追加されるオーバーヘッドは無視できますが、ファイル マネージャーやシェル環境でのクリーンなレンダリングが保証されます。多くのファビコン生成ツールには、標準の .ico バンドルの一部としてデフォルトで 64 個が含まれています。

128×128 ピクセル サイズは、Windows ストア アプリ タイルと高密度タスク バー サムネイルに対応します。純粋な Web ファビコンの場合はあまり必要ありませんが、サイトが PWA としてパッケージ化されている場合、またはユーザーがサイトを Windows アプリとして固定している場合は重要です。 PNG 圧縮を使用して .ico 内にバンドルすると、ファイル サイズが適切に保たれます。

256×256 ピクセル サイズは、標準の .ico フレームの最大サイズです。これは、Windows デスクトップ ショートカット、Windows スタート メニューの検索結果、および一部のアプリにインストールされたコンテキストに使用されます。この解像度では、.ico コンテナ内で BMP ではなく PNG 圧縮を使用する必要があります。非圧縮の BMP 256×256 画像により、.ico ファイルに不必要に 256 KB が追加されます。

180×180ピクセルサイズはiOS apple-touch-icon専用です。 iPhone または iPad ユーザーが「ホーム画面に追加」をタップすると、Safari は `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` で宣言された画像を取得します。このサイズは、現在のすべての iPhone モデルをカバーします (iPhone 6 Plus 以降は 3 倍の密度で 180×180 を使用します。古いモデルは 120×120 と 152×152 を使用します。単一の 180 ファイルですべてのモデルを適切にカバーできます)。

192 × 192 ピクセル サイズは、Android Chrome の PWA インストール プロンプトの Web アプリ マニフェスト (site.webmanifest) で最低限必要なアイコンです。ユーザーが PWA を Android ホーム画面に追加すると、Chrome はランチャーに 192×192 のアイコンを表示し、最近使用したアプリ スイッチャーにアプリ アイコンを表示します。マニフェストにこのサイズがないと、PWA インストール プロンプトに汎用アイコンが表示されるか、まったくトリガーされません。

512×512 ピクセル サイズは、2 番目に必要なマニフェスト アイコンです。 Chrome は、ホーム画面起動後のアプリの読み込み中に表示される PWA スプラッシュ画面と、デスクトップ Chrome OS のインストール ダイアログ プレビューにこれを使用します。これは、すべての小さなバリアントを生成するのに理想的なソース サイズでもあります。512 × 512 から始まるため、すべてのダウンサンプリングされた出力でシャープなエッジと正確な色が維持されます。

512×512 から非常に大きな 1024×1024 までのサイズは、Web ファビコンではなく、主に macOS のネイティブ アプリ アイコンと iOS App Store の送信に使用されます。ただし、ラッパー (Electron、Capacitor、Tauri) を使用して Web プレゼンスをネイティブ アプリに変換する場合は、App Store のレビュー プロセスに 1024×1024 が必要になります。このマスター ファイルを favicon パッケージと一緒に保存します。

SVG ファビコンは解像度に依存せず、単一のファイルであらゆる密度をカバーします。 SVG ファビコン (Chrome 80+、Edge 80+、Firefox 41+、Safari 15+) をサポートするブラウザーは、1x、2x、3x、または任意のカスタム DPI で完全にレンダリングされるため、どのラスター サイズよりも SVG を優先します。トレードオフは、すべてのコンテキストが SVG をサポートしているわけではないことです。Windows ショートカット、RSS リーダー、および古いツールには依然として .ico フォールバックが必要です。

サイズと .ico コンテナーの関係を理解することが重要です。 .ico ファイルは単一の画像ではなく、複数の画像のアーカイブです。内部の各フレームは、異なるサイズの個別のラスター イメージです。ブラウザは ICO ディレクトリを読み取り、必要なサイズに最もよく一致するフレームを特定し、そのフレームのみをデコードします。これが、1 つの .ico ファイルで 16、32、48、および 64 ピクセルのタブを同様に適切に提供できる理由です。

2026 年の実稼働 Web サイトに推奨される最小セットは、16、32、48、および 64 ピクセルのフレームをバンドルする favicon.ico です。 apple-touch-icon.png (180×180);アンドロイドクローム-192x192.png;アンドロイドクローム-512x512.png;最新のブラウザの場合は favicon.svg。そして、192 および 512 PNG を参照する site.webmanifest。 favicon generator は、単一ソースのアップロードからワンクリックでこの完全なセットを生成します。

favicon tester を使用すると、すべてのファビコン サイズが正しく提供されているかどうかを簡単に確認できます。サイトの URL を入力すると、テスターは favicon.ico の取得を試み、HTML ヘッド内のリンク タグをチェックし、各サイズのプレビューを表示します。不足しているサイズには、実用的な推奨事項が示されます。