ファビコンは、ブラウザのタブ、ブックマークリスト、アドレスバーの候補に表示される小さなアイコンです。正しく行うには、画像を小さくするだけでは不十分です。シャープに見えるファビコンには、正しいピクセル寸法、クリーンなセンタリングデザイン、使用されるコンテキストに適した正しい形式が必要です。標準のファビコンサイズは、ブラウザタブ表示用の 16x16 ピクセルで、高密度ディスプレイには 32x32、完全なファビコンパッケージには 48x48 が含まれます。適切に準備されていないファビコンはタブでぼやけて見えたり不明瞭になったりしますが、これはウェブサイトの全体的な品質に影響を与える細かい詳細です。

ファビコン用に画像をリサイズする方法

ベースファビコンの場合は、幅フィールドと高さフィールドの両方に 16 を入力し、強制的な正方形出力のためにアスペクト比を維持チェックボックスをオフにします。高解像度バージョンの場合は、両方のフィールドに 32 を入力してプロセスを繰り返します。完全なファビコンパッケージの場合は、同じ画像を 16x16、32x32、48x48 で個別に処理します。

ソース画像の品質は、ファビコンサイズでは他のほとんどすべての寸法よりも重要です。複雑なロゴや詳細なイラストは、16x16 では認識可能な形状をすべて失います。クリーンなエッジと最小限の詳細を持つシンプルで太字のアイコンは、はるかに持ちこたえます。アイコンの利用可能な最大バージョンから開始し、各サイズで最もシャープな結果を得るために縮小します。複数のサイズを一度にアップロードし、完了したら ZIP としてダウンロードします。

標準ファビコンサイズ

16x16 ピクセル：標準解像度画面のブラウザタブに表示されるベースサイズ。32x32 ピクセル：高密度ディスプレイおよび Windows デスクトップショートカットで使用。48x48 ピクセル：幅広い互換性のために完全なファビコンパッケージに含まれます。180x180 ピクセル：ウェブサイトが iOS ホーム画面に保存されるときに使用される Apple Touch Icon サイズ。192x192 ピクセル：Android デバイスがホーム画面のウェブアプリアイコンに使用。完全なファビコンパッケージには、通常、同じソースアイコンから生成されたこれらのサイズすべてが含まれます。

ファビコンの出力形式

PNG は、最新のファビコン実装で最も広くサポートされている形式です。ほとんどのブラウザは、HTML ヘッドの link タグを介して PNG ファビコンファイルを直接受け入れます。透明な背景は PNG でサポートされており、ファビコンがブラウザタブの色の上にクリーンに配置されることを可能にします。従来の ICO 形式は、複数のサイズを単一のファイルにバンドルし、ブラウザがデフォルトで検索するルート favicon.ico ファイルにまだ使用されています。正しいサイズの PNG は、ほとんどの最新のウェブプロジェクトにとって最も簡単なアプローチです。