ウェブサイトに最適なファビコン サイズ
古いチートシートには何十ものサイズが記載されています。このガイドでは、2026 年にブラウザーと OS が実際に要求するものをリストし、例を含むサイズ マトリックスを示し、すべてのサーフェスをカバーする最小のセットを推奨します。
サイズが依然として重要な理由
favicon は多くの物理ピクセルにスケールされます。タブでは 16×16、Retina ブックマーク バーでは 32×32、iPhone ホーム画面では 180×180、PWA スプラッシュ画面では 512×512 です。 1 つの画像がすべての機能に適切に対応することはできません。
小さなソースをアップスケールするとブラーが発生します。テストせずに詳細な 1024×1024 をダウンスケーリングすると、細い線が失われます。この修正は、専用のエクスポートの小さなセット、または一般的なデスクトップ フレームを埋め込む 1 つのマルチサイズ .ico です。
古いブログ投稿に記載されているすべてのサイズを発送するのは無駄です。出荷が少なすぎると、1 つのプラットフォームに目に見えるギャップが残ります。以下のマトリックスは、2026 年のブラウザーで測定された実際のリクエストを反映しています。
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
ブラウザが要求するもの
通常、デスクトップ タブは 16×16 CSS ピクセルのアイコンをレンダリングし、表示密度に応じて 16×16 または 32×32 のデバイス ピクセルにマッピングされます。
ブックマーク バーと固定タブでは、32×32 または 48×48 がよく使用されます。 Chromium は、favicon.ico から最も近い埋め込みフレームを自動的に選択する場合があります。
3 つの一般的なタブ サイズ (16、32、48) はすべて、単一のマルチサイズ .ico 内に快適に収まります。このため、.ico コンテナーが最も効率的なデスクトップ配信形式であり続けます。
オペレーティング システムが要求するもの
Windows スタート メニュー、タスク バー ピン、ファイル エクスプローラーのショートカットは、コンテキストと表示スケーリングに応じて、24×24、32×32、48×48、64×64、128×128、または 256×256 を要求する場合があります。
Microsoft は、Windows アプリの実用的なセットとして 16、24、32、48、64、128、および 256 を文書化しています。 Web favicon は、少なくとも 16 ～ 256 を favicon.ico にバンドルすることで恩恵を受けます。
macOS はネイティブ アプリには .icns を好みますが、Web ショートカットには .ico と PNG を喜んで消費します。 iOS は、ホーム画面アイコンの .ico を無視し、apple-touch-icon 経由で専用の 180×180 PNG を必要とします。
PWA とモバイル リクエスト
Web アプリのマニフェストには、目的が任意で、オプションでマスク可能なアイコンが必要です。一般的なサイズは 192×192 および 512×512 PNG です。
Android Chrome は、インストール UI とスプラッシュ画面にマニフェスト アイコンを使用します。 512×512 のソースはきれいにダウンスケールされます。 192×192 のみのマニフェストは、ハイエンドの携帯電話では柔らかく見えます。
iOS は、ホーム画面配置用のマニフェスト アイコンを読み取りません。 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">を宣言する必要があります。
サイズマトリクスの概要
16×16 — ブラウザー タブ (密度 1 倍)。 32×32 — Retina ディスプレイ上のタブとブックマーク。 48×48 — 一部の Windows UI コンテキストと従来のブックマークの使用。
64×64 および 128×128 — 高スケーリングでの Windows ショートカット。 256×256 — Windows 固定タイルと高 DPI プレビュー。
180×180 — アップルタッチアイコン (iOS / iPadOS)。 192×192 および 512×512 — Android の PWA マニフェスト アイコンとインストール プロンプト。
サイトタイプ別の例
個人ブログ: favicon.ico 16/32/48 のみ。 iOSのホーム画面の磨きを気にしないなら許容範囲です。
会社のマーケティング サイト: .ico バンドル、180×180 の Apple-touch-icon、および明示的な Retina タブ用の 32×32 PNG <リンク>。
インストール可能な PWA: フル .ico、apple-touch-icon、マニフェスト 192 + 512、スケーラブル UI クロム用のオプションの SVG。
Electron デスクトップ アプリ: Windows .ico (16 ～ 256)。ブラウザ外で配信する場合は別途 macOS .icns となります。
実行可能な最小限のセット
マルチサイズ favicon.ico (16、32、48、64、128、256)、/favicon.ico。
iOS ホーム画面の場合は 180×180 の apple-touch-icon.png。
Android 設置面用の site.webmanifest に 512×512 PNG 1 つ。
このトリオは、現実世界のアイコン リクエストの約 95% をカバーします。最新のタブで無限のスケーリングとダークモードのスタイルが必要な場合は、SVG を追加します。
よくある質問
.ico 内にある場合、16×16 PNG が必要ですか?いいえ、デバッグ用に明示的な <link rel="icon" sizes="16x16"> が必要な場合を除きます。
やはり120×120は必要なのでしょうか？昔のiOSサイズでした。最新の Safari は 180×180 を想定しています。
64×64 favicon はどうでしょうか? Windows の .ico 内で役立ちます。スタンドアロン PNG として必要になることはほとんどありません。
256×256をスキップできますか? Windows 高 DPI ショートカット プレビューをまったく気にしない場合に限ります。ほとんどのチームにはそれが含まれています。
トラブルシューティング
iOS アイコンは角が丸く、切り取られたように見えます。これは iOS マスキングです。ファイルのバグではなく、安全なパディングを使用して設計されています。
PWA をインストールすると、汎用アイコンが表示されます。マニフェスト アイコンが見つからないか、最小 192×192 未満です。 Chrome DevTools → Application で JSON を検証します。
Retina Mac のタブ アイコン ソフト: favicon.ico に 16×16 だけでなく 32×32 フレームが含まれていることを確認します。
巨大な .ico ダウンロード: 非圧縮の 256×256 BMP が埋め込まれています。コンテナ内で PNG 圧縮を使用して再構築します。
デバイスのピクセル比と知覚されるサイズ
CSS ピクセルは物理ピクセルではありません。 2 倍ディスプレイ上の 16×16 タブ スロットは、鮮明さを高めるために 32×32 ビットマップをロードすることがよくあります。
Retina MacBook や高 DPI Windows ラップトップでは、16 フレームと 32 フレームの両方を含む favicon.ico が単一の 16×16 PNG よりも優れたパフォーマンスを発揮するのはこのためです。
Android PWA は、デバイスのフル解像度でスプラッシュ スクリーンにマニフェスト アイコンを表示します。1440p の電話機に拡張された 192×192 のソースは柔らかく見えます。 512×512はきれいにダウンスケールされます。
iOS は、独自のマスクと角の半径を apple-touch-icon アセットに適用します。重要なエッジがスクイクルによってクリップされないように、安全なパッドを備えたデザイン。
テストするときは、ブラウザーのズームを 100%、OS のスケーリングを 200% にしてタブのスクリーンショットを撮ります。どちらも鮮明に見える場合は、サイズ マトリックスが正しいと考えられます。
現在のサイズ カバレッジを監査する方法
favicon.ico をダウンロードし、埋め込みフレームをリストするツールで開きます。 16、32、48、および少なくとも 1 つの高サイズのフレームが存在することを確認します。
apple-touch-icon.png を取得し、任意の画像インスペクターで寸法を確認します。古いテンプレートの 120×120 ではなく、180×180 を期待してください。
site.webmanifest を開き、アイコン [] に 192×192 および 512×512 が含まれており、パスと画像/png タイプが正しいことを確認します。
Chrome DevTools → Application → Manifest にサイトをロードします。エントリが欠落しているか無効である場合は、壊れたインストール ダイアログがユーザーに表示される前に警告が表示されます。
各ファイルをそのコンシューマ (タブ、iOS、PWA、Windows) にマッピングするスプレッドシートを保持します。将来的には、ブランド変更中にアセット フォルダーをリバース エンジニアリングする必要がなくなります。
将来も安心のサイズセット
新しいデバイス クラスが favicon ランドにゆっくりと現れます。現在、512×512 のマニフェスト アイコンは、192 単独よりも折りたたみ式およびタブレットのインストール UI をカバーします。
特定のプラットフォームのドキュメントで依然として義務付けられている場合を除き、特殊なサイズ (96×96、120×120) は避けてください。広範なメリットはなく、オーサリングの負担が増大します。
マスター ベクターまたは 1024 × 1024 ラスターは、出荷しない場合でもデザイン リポジトリに保存します。将来のプラットフォームでは、より大きなマニフェスト アイコンが要求される可能性があります。
マスターからの再生成を自動化することで、新しい推奨サイズが表示されたときに、Photoshop で手動でエクスポートする代わりにスクリプトを再実行します。