適切なファビコンの寸法を選ぶことは、あらゆるデバイスで鮮明でプロフェッショナルなアイコンを表示するために不可欠です。この完全な ファビコンサイズガイド では、定番の16×16のブラウザタブアイコンから512×512のマスカブルPWAアイコンまで、2026年に必要なすべての寸法を網羅し、さらにプラットフォーム全体でブランドをシャープに保つフォーマットとベストプラクティスも解説します。.
ファビコンのサイズが重要な理由
ファビコンは、ブラウザ、オペレーティングシステム、ホーム画面など、さまざまなサイズで表示されます。各プラットフォームが特定の寸法を要求するため、単一のソースファイルですべての状況に対応することはできません。1つのサイズしか用意しないと、ブラウザがそれを拡大または縮小し、ぼやけたり切り取られたりした結果になり、ブランドを損なうことがよくあります。.
各プラットフォームに正しいファビコンの寸法を提供することで、画像がネイティブ解像度でレンダリングされ、鮮明な輪郭、正確な色、信頼できる透明性が実現します。このガイドでは、生成する価値のあるすべてのサイズを一覧にし、それぞれがどこで使われるかを説明しているので、完全なバンドルを自信を持って提供できます。.
完全なファビコンサイズ早見表
以下の表は、2026年にモダンなウェブサイトが提供すべきファビコンのサイズ、それぞれが使用するフォーマット、そしてそれを利用するプラットフォームを一覧にしています。バンドルを準備する際の唯一の参考資料として活用してください。.
| サイズ | 書式 | 用途 |
|---|---|---|
| 16×16 | ICO / PNG | 定番のブラウザタブ、レガシーサポート |
| 32×32 | ICO / PNG | Retinaディスプレイでの標準的なブラウザタブ |
| 48×48 | ICO | Windowsタスクバー、一部のブックマーク表示 |
| 64×64 | PNG | 高DPIディスプレイでのブラウザアドレスバー |
| 96×96 | PNG | デスクトップのブックマークとショートカット |
| 120×120 | PNG | 古いAndroidのホーム画面 |
| 152×152 | PNG | iPadタッチアイコン（レガシー） |
| 167×167 | PNG | iPad Proタッチアイコン |
| 180×180 | PNG | iPhoneのapple-touch-icon（現行） |
| 192×192 | PNG | Android Chromeのホーム画面、PWA |
| 512×512 | PNG | PWAスプラッシュ画面、マスカブルアイコン |
生成すべき必須サイズ
上記の完全なリストは網羅的ですが、厳選したセットで大多数のユーザーをカバーできます。当社の ファビコンジェネレーター は、1回のアップロードからこの必須バンドルを生成します：
- 16×16と32×32—標準およびRetinaディスプレイのデスクトップブラウザタブ向けの主力サイズです。.
- 48×48—Windowsタスクバー表示とレガシーブックマーク用にICOファイル内に含まれます。.
- 180×180—iOSがホーム画面ショートカット用に要求するapple-touch-iconです。.
- 192×192と512×512—ウェブマニフェストで宣言するAndroidおよびPWAのサイズです。.
モダンブラウザ向けのSVG版と合わせて、このセットは2026年に訪問者が使用する可能性のあるほぼすべてのデバイスをカバーします。各レガシーサイズを手動で管理する必要はありません—ジェネレーターがそれらをまとめてくれます。.
ファビコンフォーマットの比較
サイズは方程式の半分にすぎません。フォーマットが互換性とファイル容量を決定します。以下の比較は、一緒に提供すべき3つのフォーマットをまとめたものです：
| 書式 | 解像度 | ファイルサイズ | 最適な用途 |
|---|---|---|---|
| ICO | 固定（マルチサイズコンテナ） | 小〜中 | レガシーブラウザ、/favicon.ico フォールバック |
| PNG | 固定（ファイルごとに1サイズ） | 小さい | モダンブラウザ、apple-touch-icon、Android |
| エスブイジー | ベクター（解像度非依存） | 極小 | Safari、Chrome、ダークモード対応アイコン |
SVGは2026年に特に価値があります。あらゆるピクセル密度に完璧にスケールし、ダークモードに自動適応するメディアクエリを含めることができるからです。私たちのジェネレーターは、ベクターソースをアップロードすると自動的にSVGを出力し、バンドルの中で最も将来性の高いフォーマットになります。.
プラットフォーム別のサイズ要件
デスクトップブラウザ
Chrome、Firefox、Safari、Edgeなどのデスクトップブラウザは、16×16および32×32ピクセルのファビコンを要求します。Retinaディスプレイでは、タブに32×32のバリアントが使用されます。ICOフォーマットは両方のサイズを1つのファイルにバンドルできるため、今日でも/favicon.icoを配置することは良い習慣であり続けています—自動フォールバックとして機能します。.
Apple iOSおよびiPadOS
Appleデバイスは、サイトをホーム画面に追加する際に標準のファビコンリンクを無視します。代わりに、rel=”apple-touch-icon”で宣言された180×180のPNGを探します。このファイルがないと、iOSはページのスクリーンショットや汎用アイコンを使用し、プロフェッショナルに見えず、最も人気のあるモバイルプラットフォームでブランドの一貫性が損なわれます。.
Androidおよびプログレッシブウェブアプリ
Android ChromeおよびPWAインストーラーは、ウェブアプリマニフェストからアイコンを読み取ります。必要な2つのサイズは192×192と512×512です。512×512のバリアントはPWAスプラッシュスクリーンにも使用されます。マスカブルアイコン—異なるAndroidアイコン形状に適応するもの—については、マニフェストで512×512のPNGを「purpose」:「maskable」としてマークする必要があります。.
ファビコンサイズのベストプラクティス
以下のベストプラクティスに従って、あらゆるサイズとプラットフォームでファビコンをシャープに保ちましょう:
- 大きく始める。. 512×512以上のソースから生成して、すべてのダウンスケールがシャープに保たれるようにします。.
- すべてのサイズを提供する。. 完全なカバレッジのために16、32、48、180、192、512およびSVGを提供します。.
- /favicon.icoをルートに配置する。. リンクタグが存在しない場合、ブラウザはこのURLをデフォルトとします。.
- 16×16でテストする。. 最小サイズでデザインが保てれば、どこでも見栄えが良くなります。.
- 可能な場合はベクターを使用する。. SVGはあらゆる解像度に適応し、ダークモードをサポートします。.
すべてのサイズを一度に生成する方法
これらすべてのサイズを手動で作成するのは面倒です。私たちの無料の ファビコンジェネレーター が4つの簡単なステップで作業を処理します:
- 512×512以上の正方形のソース画像をアップロードします。.
- 16×16、32×32、180×180のライブプレビューを確認します。.
- 作成をクリックして、上記のすべてのサイズとフォーマットを含むZIPをダウンロードします。.
- 含まれているHTMLリンクタグとマニフェストをサイトにコピーします。.
プロセス全体は1分以内に完了し、このガイドで扱ったすべてのプラットフォームを満たすバンドルを生成します。どのサイズがどこに必要かを覚えておく必要はありません—ジェネレーターが各ファイルを正しく命名し、一致するリンクタグを提供します。.
よくある質問
ウェブサイトの標準的なファビコンサイズは何ですか？
最も一般的な標準ファビコンサイズはブラウザタブ用の32×32ピクセルで、ICOファイル内に16×16のフォールバックがあります。モダンなサイトはiOS用に180×180、AndroidおよびPWA用に192×192と512×512も提供すべきです。.
ソース画像のサイズはどのくらいにすべきですか？
少なくとも512×512ピクセルの正方形のソース画像を使用してください。より大きなソースを使用すると、ジェネレーターが必要なすべてのサイズにクリーンにダウンスケールでき、Retinaディスプレイや高密度モバイル画面でファビコンをシャープに保つことができます。.
apple-touch-iconのサイズは何ですか？
現在のapple-touch-iconのサイズは180×180ピクセルです。iOSはホーム画面ショートカットにこのPNGを使用し、標準のファビコンリンクを無視するため、HTMLでrel=”apple-touch-icon”で宣言する必要があります。.
Androidがファビコンに要求するサイズは何ですか？
Android Chromeおよびプログレッシブウェブアプリは、ウェブアプリマニフェストで宣言された192×192と512×512のPNGアイコンを要求します。512×512のアイコンはマスカブルとしてマークし、Androidが異なるホーム画面形状に適応できるようにする必要があります。.
ファビコンにはSVGとPNGのどちらを使用すべきですか？
両方を使用してください。SVGは完璧にスケールし、モダンブラウザでダークモードをサポートし、PNGはiOS、Android、古いブラウザとの互換性を保証します。ICO、PNG、SVGの3つのフォーマットすべてを提供することで、ファビコンがどこでもシャープに見えるようになります。.
サイズがパフォーマンスと読み込みに与える影響
適切なファビコンサイズを提供することは視覚的な問題だけでなく、サイトの読み込み速度にも影響します。ブラウザが32×32のタブアイコンを要求し、代わりに512×512のPNGを提供すると、訪問者は画面上の小さな要素に対して必要以上のバイト数をダウンロードすることになります。多くの訪問者による多くのページ読み込みで、その無駄な帯域幅は積み重なります。各サイズを個別のファイルとして提供し、リンクタグで正しいsizes属性で宣言することで、ブラウザが自動的に最小の適切なファイルを選択できるようになります。その結果、より速いファーストペイントとよりスリムなページプロファイルが実現し、2026年にはユーザーエクスペリエンスとCore Web Vitalsの両方にとって重要です。ジェネレーターは各ファイルを正確に命名およびサイズ設定することで、この最適化を処理します。.
今すぐすべてのファビコンサイズを生成
各プラットフォームがどのサイズを求めているかを覚えておく必要はもうありません。1つの正方形画像を私たちのジェネレーターにアップロードし、このガイドで説明したすべての寸法とフォーマットをカバーする完全なバンドルを、すぐに貼り付けられるHTMLとマニフェストとともにダウンロードしてください。2026年のすべてのブラウザとデバイスを満たす最も簡単な方法です。Retinaタブでのシャープさ、iOSでのクリーンなホーム画面ショートカット、完璧なPWAスプラッシュスクリーンのいずれを重視しても、1回のダウンロードですべてをカバーします。.
