faviconサイズの説明(16-256):favicon.icoに含めるもの
どのアイコンサイズがfavicon.icoに属し、それぞれが重要な理由を正確に知ります
今すぐ変換faviconが実際に表示される場所
ほとんどの人はfaviconをブラウザタブの小さなアイコンと考えていますが、それよりもはるかに多くの場所に表示されます。すべてのコンテキストを理解すると、アイコンが常にシャープに見えるようにどのサイズを含めるかを選択するのに役立ちます。
ブラウザタブは最も目に見える場所です。開いているすべてのタブは、faviconを約16ピクセルで表示し、多くのタブが開いているときにユーザーがサイトを識別する主な方法になります。ブックマークバーとメニューも、ほとんどのブラウザで16ピクセルでアイコンをレンダリングするため、このサイズでの鮮明なバージョンは譲れません。
アドレスバーと検索候補では、一部のブラウザがURLの横にfaviconを表示し、通常、ディスプレイ密度に応じて16または32ピクセルです。履歴パネルも同様に動作し、faviconを取得してユーザーが以前に訪問したサイトをスキャンするのを助けます。
ブラウザを超えて、faviconはオペレーティングシステムのコンテキストにも表示されます。ユーザーがサイトをWindowsタスクバーに固定するか、デスクトップショートカットを作成すると、OSはICOファイルから取得し、48、64、さらには256ピクセルでアイコンをレンダリングする場合があります。高DPI(Retinaクラス)ディスプレイでは、32ピクセルアイコンがより詳細を要求するスペースを埋めるために引き伸ばされ、より大きなバリアントがICO内に存在しない限り、ぼやけた結果を生成する可能性があります。
プログレッシブウェブアプリ(PWA)は、favicon.icoではなく独自のマニフェストアイコンを使用しますが、faviconは標準のブラウザクロームとPWAをインストールせずにサイトをブックマークするユーザーのフォールバックとして重要です。
各faviconサイズの用途
各ピクセル寸法は明確な目的を果たします。以下の表は、すべての標準faviconサイズを一般的な用途にマップし、含めるべきかどうかを示しています。
| サイズ(px) | 一般的な用途 | 含める? |
|---|---|---|
| 16 × 16 | ブラウザタブ、ブックマークバー、アドレスバー、履歴 | はい - 必須 |
| 32 × 32 | 高DPIブラウザタブ、Windowsタスクバー、macOS Safari | はい - 必須 |
| 48 × 48 | Windowsサイト固定ショートカット、Windowsエクスプローラー | はい - 推奨 |
| 64 × 64 | 一部のWindows UIサーフェス、RSSリーダー | オプション |
| 128 × 128 | Windows大きなアイコンビュー、Chrome Web Store | オプション |
| 256 × 256 | Windows特大ビュー、高DPIデスクトップショートカット | 完全性のために推奨 |
16と32ピクセルは絶対的な必需品です。これらがないと、ブラウザは一般的な地球儀または空白のアイコンにフォールバックし、ブランド認識を損ないます。これら2つのサイズは、事実上すべての標準DPIおよび高DPIブラウザタブシナリオをカバーします。
48ピクセルは、ユーザーがサイトへのWindowsショートカットを作成するときに画像に入ります。オペレーティングシステムは、デフォルトのアイコンビューで48ピクセルでデスクトップショートカットをレンダリングするため、このサイズを含めると、OSが32ピクセルバリアントを不格好にアップスケーリングするのを防ぎます。
64と128ピクセルはニッチなコンテキストに表示されます。一部のWindows UIサーフェスとサードパーティアプリケーションは64ピクセルアイコンを要求しますが、128ピクセルはChrome Web Storeと特定の大きなアイコンビューで使用されます。それらを含めることは、ICOファイルに数キロバイトを追加するだけなので、トレードオフは最小限です。
256ピクセルは、高DPIモニターで最も重要です。Windowsが特大アイコンビューをレンダリングするとき、またはユーザーが4Kディスプレイでサイトをタスクバーに固定するときに、OSは最もシャープなレンダリングのために256ピクセルバリアントを取得する場合があります。
推奨される安全なセット
不要な肥大化なしに最も広範囲のコンテキストをカバーする単一のfavicon.icoが必要な場合は、この安全なセットを使用してください。
- 16 px - ブラウザタブとブックマーク
- 32 px - 高DPIタブとWindowsタスクバー
- 48 px - Windowsデスクトップショートカット
- 256 px - 高DPIと特大アイコンビュー
この4サイズセットは、ICOファイルをコンパクト(通常30 KB未満)に保ちながら、すべての主要なコンテキストでシャープなレンダリングを保証します。ユースケースで必要な場合は64と128ピクセルを追加できますが、ほとんどのウェブサイトは違いに気付きません。
純粋にウェブ用のfaviconを構築していて、ユーザーがデスクトップショートカットを作成することを期待していない場合は、セットを16と32ピクセルだけにトリミングできます。これにより、10 KB未満のICOファイルが生成されます。ただし、48と256を含めるコストは非常に小さいため、ほぼすべてのプロジェクトのデフォルトとして完全な安全セットをお勧めします。
ICO形式がどのように機能し、PNGよりも適切な選択である場合の詳細については、ICOファイルとはに関する説明をご覧ください。
適切なfaviconサイズを生成する方法
マルチサイズfavicon.icoの作成は、Any2ICOを使用すると、わずか数ステップで完了します。このツールは、最大10 MBのPNG、JPG、WebP、GIF、BMP、AVIF、SVGソース画像を受け付け、選択したすべてのサイズを含む適切に構造化されたICOファイルを生成します。
- 高解像度ソースから始めます。512ピクセル以上でロゴまたはアイコンをアップロードします。大きなソースは、コンバーターにすべてのターゲットサイズでクリーンなダウンスケールされたバージョンを生成するのに十分な詳細を提供します。SVGソースは、詳細を失うことなくスケーリングされるため、特にうまく機能します。
- サイズを選択します。16、32、48、256(安全なセット)のチェックボックスをオンにするか、必要に応じて64と128を追加します。
- スケーリング動作を選択します。Containはアスペクト比を保持しながら画像を各正方形内に収め、余分なスペースをパディングします。Coverは正方形全体を埋め、必要に応じてエッジをクロップします。ほとんどのロゴでは、透明な背景を持つcontainが最良の選択です。
- favicon.icoをダウンロードします。結果のファイルをウェブサイトのルート(
https://yoursite.com/favicon.ico)に配置します。ブラウザはこのパスを自動的に探すため、多くの場合、<link>タグさえ必要ありません。
Any2ICOは、Canvas APIを使用してブラウザで直接変換を実行します。デバイスからインポートされたファイルは処理のためにサーバー経由で送信されますが、保存されません。クリップボードの貼り付けは完全にマシン上に留まります。一度に複数のアイコンを変換する場合、バッチモードですべてを単一のZIPファイルでダウンロードできます。
スクリーンショットとHTMLコードスニペットを含む完全なウォークスルーについては、favicon.icoの作成方法に関するステップバイステップガイドをご覧ください。特にPNGを変換する必要がある場合は、PNGからICOガイドでそのワークフローを詳細に説明しています。
まとめ
適切なfaviconサイズを選択することは複雑である必要はありません。コアルールは簡単です。常に16と32ピクセルを含め、Windowsおよび高DPIカバレッジのために48と256を追加し、すべてのサイズをシャープに保つために高解像度ソース画像を使用します。その4サイズの安全セットは、実際のシナリオの大部分を処理します。
faviconを構築する準備ができたら、Any2ICOが簡単にします。画像をアップロードし、サイズを選択して、どこでも機能する単一のICOファイルをダウンロードします。無料、高速、プライバシーを尊重します。