記事
PNGからファビコンを作成する
ファビコンはブラウザがタブ、ブックマーク、履歴リストに表示する小さなグラフィックです。うまく仕上げるには、ロゴをリサイズするだけでは不十分です：.icoフォーマットは複数の解像度を1つのファイルにパックし、モダンなブラウザはPNGを好み、モバイルデバイスには独自のapple-touch-iconがあり、ウェブアプリマニフェストには独自のアイコンセットが必要です。この記事では各要素を説明し、単一のソースPNGから完全なセットを生成する方法を解説します。
ファビコンとは何か、ブラウザがどこで使うか
「ファビコン」という言葉は「お気に入りアイコン（favorite icon）」の短縮形です。ブラウザは最初にInternet Explorer 5（1999年）のアドレスバーにこれを表示し、その後ブックマークにも採用しました。今日では、ブラウザタブ、ブックマークツールバー、閲覧履歴、一部のブラウザの新しいタブページ、サイトがピン留めされたときのオペレーティングシステムのタスクバーに表示されます。モバイルでは、ユーザーがサイトをホーム画面に追加すると、デバイスは標準のファビコンではなくapple-touch-iconと呼ばれる関連するが異なる画像を使います。検索エンジンはインターフェイスの結果の隣にファビコンを表示することがあります。グラフィックは設計上小さく、視覚的な素早い識別に効果的ですが、うまく制作するのも難しいです：16x16ピクセルでは、詳細なロゴが不鮮明な汚れになります。ファビコンファイル自体は数十年にわたっていくつかのフォーマットを経てきており、.icoが最も広く互換性があり、PNGが現在ほとんどのブラウザでモダンなデフォルトになっています。
.icoコンテナ：1つのファイルに複数の解像度
.icoフォーマットは単一の画像ではなくコンテナです。単一の.icoファイルは、ファイル先頭のインデックスに個別のエントリとして保存された異なる解像度の複数のビットマップ画像を持てます。最も一般的な3つのサイズは16x16、32x32、48x48ピクセルです。WindowsがExplorerやタスクバーにファビコンを表示するとき、表示コンテキストに最も合うエントリを選択します。古いWindowsバージョンでは、高密度タスクバースロットに48x48エントリが必要でした。ブラウザはタブ用に16x16でファビコンをリクエストしますが、高密度ディスプレイが検出された場合はより大きなエントリを使う場合があります。3つのサイズすべてを1つの.icoファイルにパックすることで、単一のHTTPリクエストですべてのユースケースをカバーできます。別々のPNGとして配布することも有効ですが、追加のlinkタグが必要でHTTPリクエストが増えます。.icoファイル内部の画像は標準のBMPまたはPNGデータなので、コンテナはエントリごとに小さなヘッダーオーバーヘッドを追加するだけです。
小さなサイズのデザイン：マークをシンプルにする
16x16ピクセルでは256ピクセルしかありません。ワードマークや細かいディテールを持つ典型的なロゴタイプは、そのサイズでは判読不能になります。標準的なアプローチは、単純化されたマークを作成することです：単一の文字、抽象的な形、またはディテールに頼らずにブランドを表すアイコン。予測すべきいくつかの具体的な問題：細いストロークは小さなサイズで、特に非網膜スクリーンでは完全に消えます。文字のペアとネガスペースのディテールがグレーのノイズに統合されます。グラデーションはほとんど見えなくなります。マークと背景のハイコントラストが判読性の最も大きな要因です。プレーンな背景に対するソリッドな形は、16x16では詳細なイラストよりほぼ常に読みやすく見えます。32x32と48x48のサイズはより許容度が高く、少し多くのディテールをサポートできますが、16x16バージョンを制約として扱う必要があります。マークがまだ16x16で読めない場合は、デザインをさらにシンプルにする必要があります。
モダンセット：.ico、PNGアイコン、apple-touch-icon、マニフェスト、HTMLリンクタグ
公開サイトの完全なファビコン設定には現在5つのものが必要です。まず、サイトのルートにfavicon.ico（ブラウザはlinkタグなしのフォールバックとして/favicon.icoを直接リクエストします）。次に、モダンなデスクトップブラウザ用の32x32 PNGで、linkタグで宣言：`<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`。3つ目は、タブサイズ用の16x16 PNG：`<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`。4つ目は、iOSのホーム画面ブックマーク用の180x180ピクセルのapple-touch-icon：`<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`。5つ目は、Androidとプログレッシブウェブアプリ用の192x192と512x512 PNGを含むウェブアプリマニフェスト（site.webmanifest）。透明度はPNGと.ico内のPNGエンコードされたエントリでサポートされていますが、apple-touch-iconは不透明な背景を持つべきです。iOSはアルファチャンネルを無視し、透明な領域を黒で塗りつぶすためです。
ローカルで実行：favicon-generatorは画像をデバイス上に保持する
このサイトのfavicon-generatorはPNGを受け取り、完全なセットを生成します：16x16、32x32、48x48エントリを含むマルチ解像度favicon.ico、直接linkタグで使用するための個別PNGサイズ、180x180のapple-touch-icon。これらすべてが、Canvas APIとJavaScriptの.icoエンコーダーを使ってブラウザ内で行われます。ソース画像はどこにもアップロードされません；デバイス上にとどまります。これは、ソースファイルが会社のロゴや、どこに行くかを管理する前にマシンを離れるべきでないアセットである場合に重要です。生成された各ファイルは、従来のファイル名で個別にダウンロードとして提供されます。サイトのルートにコピーし、対応するlinkタグをHTMLのheadに追加します。ソースロゴに16x16のレンダリングを生き残れない細かいディテールがある場合は、ジェネレーターにドロップする前にクロップまたはシンプルにするか、ファビコン専用に準備された別のソース画像を提供してください。
この記事で紹介するツール
よくある質問
PNGのlinkタグを宣言していてもfavicon.icoは必要ですか？
はい、2つの理由があります。まず、HTMLを読まないブラウザ（ウェブクローラー、RSSリーダー、一部の古いモバイルブラウザ）はドメインのルートで/favicon.icoを直接探します。そのファイルがない場合、すべてのページ読み込みで404リクエストが生成され、サーバーログにノイズが追加され、小さな不要なラウンドトリップが発生します。次に、古いバージョンのInternet Explorerは.icoフォーマットしか認識せず、PNGのlinkタグを無視します。両方を提供することですべてのケースをカバーできます。
SVGをファビコンとして使えますか？
ChromeとFirefoxは`<link rel="icon" type="image/svg+xml" href="/favicon.svg">`経由でSVGファビコンをサポートしています。SafariはSVGファビコンをサポートしていません。SVGファビコンは解像度に依存しないため、複数のサイズバリアントなしに網膜スクリーンを含むあらゆる表示密度でシャープに見えます。実用的な推奨は、サポートするブラウザ用にSVGのlinkタグを宣言し、完全なカバレッジのために.icoフォールバックを含め続けることです。SVGファビコンには、ライトバージョンとダークバージョンを自動的に切り替えるための`prefers-color-scheme`メディアクエリも含めることができます。
最良の結果を得るにはどの画像から始めるべきですか？
透明な背景を持つ512x512以上の正方形PNGが最も柔軟性を与えます。大きく始めてダウンスケールする方が、小さな画像から始めるよりもディテールが保たれます。メインロゴにワードマークが含まれている場合は、ソース解像度に関係なく16x16ではテキストが読めないため、アイコンまたはマークだけを示す別のシンプルなバージョンを準備することを検討してください。マークと背景のハイコントラストが、小さなサイズがはっきり読めるかどうかの最も信頼できる予測因子です。