使い方
- .ico ファイルをドロップエリアにドロップするか、クリックして選択するか、画像を貼り付けます。
- アイコンに格納されたすべてのサイズを出力に残すため、「元の形式のまま」にします。
- エンコード後のサイズを確認します。多くのサイズを含むアイコンは、予想より大きくなることがあります。
- ファビコンの link タグ用に data URI をコピーするか、img タグ、CSS、Markdown の出力をコピーします。
ICO 形式
ICO は Windows のアイコン形式で、もともとのファビコンの形式でもあります。ICO はコンテナ形式で、短いディレクトリに 1 つ以上の画像の幅、高さ、色深度が記録されています。各画像はビットマップデータとして格納され、256×256 などの大きなサイズでは埋め込み PNG として格納されます。一般的な favicon.ico には 16、32、48 ピクセルの画像が含まれており、ブラウザが最も鮮明なものを選べるようになっています。
登録されている MIME タイプは image/vnd.microsoft.icon ですが、image/x-icon のほうがはるかに広く使われており、ブラウザはどちらも受け付けます。ICO データの Base64 は、ファイルヘッダーをエンコードした AAABAA で始まります。
data URI によるファビコン
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">ファビコンのインライン化は、エクスポートしたレポート、ディスクに保存したダッシュボード、オフライン用ドキュメントなど、1 ファイルで完結する HTML ドキュメントで便利です。別ファイルをデプロイしたくないプロトタイプや社内ツールにも向いています。多数のページがある Web サイトでは、通常の /favicon.ico のほうが適しています。こちらは一度ダウンロードすればキャッシュされますが、data URI はすべての HTML レスポンスに繰り返し含まれるからです。
アイコンを一切使わない場合は、<link rel="icon" href="data:,"> と記述すれば、ブラウザが /favicon.ico をリクエストしなくなります。
ICO、PNG、SVG のファビコン
現在のブラウザは PNG や SVG のファビコンにも対応しています（例：<link rel="icon" type="image/png" href="data:image/png;base64,...">）。32×32 の PNG 1 枚のほうが、複数サイズを含む ICO より小さいことがよくあります。その場合は PNG を Base64 に変換または SVG を Base64 に変換ツールを使ってください。
ここで ICO を PNG、JPEG、WebP に変換すると、ブラウザが表示用に選んだ 1 枚の画像だけが残ります。逆に ICO ファイルを作成するには、PNG をエンコードして、その結果を Base64 を ICO に変換ツールに貼り付けてください。16～256 ピクセルのアイコンを書き出せます。
よくある質問
ICO の MIME タイプは x-icon と vnd.microsoft.icon のどちらを使うべきですか？
image/vnd.microsoft.icon は正式に登録されたタイプで、image/x-icon はほとんどのサイトが使っているタイプです。システムが特定のタイプを要求する場合は、コピーした後でプレフィックスを書き換えてください。Base64 の出力にはすべてのアイコンサイズが含まれますか？
はい。「元の形式のまま」にすれば含まれます。ファイル全体がエンコードされるため、ブラウザは引き続き必要なサイズを選べます。別の形式に変換すると、画像は 1 枚だけになります。
data URI のファビコンはすべてのブラウザで使えますか？
現在のデスクトップブラウザでは、タブに表示されます。ブックマーク、ホーム画面のショートカット、一部の古いブラウザではインラインのアイコンが無視されることがあるため、公開 Web サイトでは引き続きファビコンのファイルを用意してください。