高解像度の Retina ディスプレイで、あるサイトのファビコンは鮮明なのに、別のサイトは 1995 年のゲームのようなドット絵に見えることはありませんか？その原因の多くは、単一サイズのアイコンファイルにあります。2026 年、SVG が主流となった今でも、マルチサイズ ICO ファビコン (multi size favicon ico) はプロフェッショナルな Web サイトにとって不可欠な「セーフティネット」です。

ICO ファイルを単なる画像ではなく、1 つの「コンテナ（入れ物）」として考えてみてください。その中には、異なる解像度のロゴが複数格納されています。Chrome などのブラウザや Windows のデスクトップ環境は、そのコンテナの中を覗き、現在の状況に最適なサイズを自動的に選択します。もし 16x16 の画像しか用意していない場合、ユーザーがリンクをデスクトップにドラッグ（48x48 が必要）すると、OS は小さな画像を無理やり引き伸ばし、結果としてぼやけたアイコンになってしまいます。

GitHub や Stripe のような大手ブランドは、この仕組みを熟知しています。彼らは「なんとかなるだろう」と楽観視せず、ブラウザのタブ、ブックマークバー、Windows のタスクバーなど、あらゆる場所でブランドアイデンティティを鮮明に保つために、堅牢な ICO ファイルをフォールバックとして用意しています。

ICO コンテナに含めるべき必須サイズ

適切なマルチレゾリューションファイルを作成するには、特定のレイヤーを準備する必要があります。あらゆるサイズを入れたくなるかもしれませんが、パフォーマンスを考慮し、以下の「黄金の 3 サイズ」に絞ることをお勧めします。

よくある間違いは、256x256 のレイヤーを ICO に含めてしまうことです。これによりファイルサイズが数百 KB に膨れ上がります。大きなサイズには PNG や SVG を使用すべきです。詳細は ファビコンサイズガイド をご覧ください。

ステップ 1: ソースアセットの準備

まず、512x512 ピクセル程度の高品質な透過 PNG を用意します。小さいサイズではデザインを簡略化するのがコツです。512px で美しく見える複雑なロゴも、16px では判別不能な汚れに見えてしまいます。多くの開発者は、ファビコン用にロゴを簡略化した「シンボル版」を作成しています。

ステップ 2: マルチサイズ ICO のパッケージング

デザインが完了したら、それらを 1 つの .ico ファイルにまとめます。単に .png の拡張子を .ico に変えるだけでは不十分です。レイヤー構造をサポートする適切な変換ツールが必要です。

Mzu favicondl を使用するのが最も効率的です。当ツールは、元の画像から 16、32、48 ピクセルのレイヤーを自動生成し、最適化された 1 つのコンテナにパックします。コマンドライン派の方は ImageMagick も使えますが、99% のプロジェクトでは自動ジェネレーターの方が速く、ミスも少なくなります。変換の詳細は PNG から ICO への変換方法 を参照してください。

ステップ 3: HTML での実装

マルチサイズ ICO の素晴らしい点は、HTML の記述が非常にシンプルなことです。ファイル自体がサイズ選択のロジックを持っているため、<head> 内に 1 行追加するだけです。

<link rel='icon' href='/favicon.ico' sizes='any'>

sizes='any' 属性はプロのテクニックです。これはブラウザに対し「このファイルはマルチレゾリューションコンテナなので、中を見て最適なサイズを選んでください」と伝えます。これがないと、一部のモダンブラウザは最初に見つけたレイヤー（必ずしも最高画質ではないもの）を優先してしまうことがあります。

よくある落とし穴と注意点

最も多いミスは、透過処理の無視です。レイヤー作成時は必ず 32bit アルファ透過を使用してください。24bit フォーマットを使用すると、ダークモードや色のついたタスクバーで、アイコンの周りに不自然な黒や白の枠が表示されることがあります。

また、ファイルサイズにも注意してください。最適化されたマルチサイズ ICO は 10KB 〜 25KB 程度に収まるはずです。もし 100KB を超えているなら、不要な巨大画像が含まれています。大きなレイヤーは削除し、モダンブラウザ向けには別途 PNG や SVG を用意しましょう。