ICOファイルとは

ICO はコンテナです。誰か別のものが符号化した流れを、中に収めておく外殻です。 ピクセルの格子を保存するので、自分の解像度を超えて拡大するとぼやけます。 ウェブのために使われます。

拡張子は .ico、正式名称は Windows Icon です。ただしどちらも、そのファイルが中に何を持てるかほどには多くを語りません。このページの残りは、その中身についての話です。

Microsoft が 1985 年に公開しました。

これだけ長く読まれ続けてきた形式なら、10 年後に取り出したいものを預けても大丈夫です。

文書があり、それに沿って実装できます。それでも、次の版がどうなるかを決めるのはその会社です。実務上、ファイルが開き続けるにはこれで足ります。安心するには足りません。

ひとつの仕事を、ひとつの分野の人たちのために、よくこなすために存在しています。その仕事の外で何となく選ぶものではありませんし、その仕事の中では、たいていこれより良いものがありません。

ICO ファイルは中身をそのまま保存します。保存し直しても何も変わらないので、開いて、直して、また保存する——それを何度繰り返しても劣化は積み上がりません。これが、渡すための形式ではなく作業のための形式である理由です。

ICO ファイルはアルファチャンネルを一緒に持てるので、ロゴの縁は後ろに何があってもなめらかなまま残ります。白い箱に閉じ込められた状態で届くことはありません。

1 チャンネルあたり最大 8 ビット。 RGBとインデックスカラーで扱えます。

1 チャンネルあたり 8 ビットは、画面が表示するぶんであり、渡すための形式がほぼ例外なく備えているぶんです。

ICO ファイルは、どちらかの辺が 256 ピクセルを超える画像を記述できません。スクリーンショットより小さく、スマートフォンで撮った写真より小さい値です。ここへ変換したものは収まるように縮小されるので、これは例外的にぶつかる上限ではなく、ほとんどどの元ファイルもぶつかる上限です。

ICO ファイルは 1 ページに縛られていません。1 ページしか持てないものへ変換するときには、これが効いてきます。1 回の変換で出てくるのは 1 ページぶんのファイル 1 つで、取られるのは先頭のページです——どのページを取るかを選ばせてくれる変換であれば、そのページになります。

GIMPとIcoFXが読めますし、同じ種類のプログラムならたいてい読めます。

ファイルが開かないとき、形式が悪いことはめったにありません。たいていはプログラムのほうが形式より古いのです。もっと古い形式に変換してしまうのが確実な逃げ道で、このサイトの残りの部分はそのためにあります。

これは今のブラウザーならどれでも読めます。

ですからページに置くのも、メッセージに添えて送るのも、安心してできます。相手が何をインストールしているかを考える必要がありません。

ICO は渡すために作られたもので、中で作業するためのものではありません。編集は可能ですが、快適だったためしはありません。賢い道は、元のファイルへ戻ってもう一度書き出すほうを通ります。

これが ICO を成り立たせている事実です。.ico は同じアイコンをいくつかのサイズ ── よくあるのは 16、32、48 ピクセルの正方形で、それ以上のこともあります ── で持つ小さなアーカイブで、それぞれが独自の色深度を持つ完全な画像として保存されています。

ポイントは、48 ピクセルのアイコンを 16 ピクセルに縮小するとつぶれるということです。そのサイズではすべてのピクセルが構造上の役割を担っているからです。だからこの形式は、デザイナーが各サイズを意図的に描き、小さくなるほどアートワークを単純化できるようにしていて、オペレーティングシステムやブラウザーは必要なものを選びます。一つのサイズしかない ICO も有効ではありますが、この形式が存在する理由を捨てています。

favicon には 16 と 32 でほぼすべてをカバーできます。16 はブラウザーのタブ、32 はブックマークバーと、高密度ディスプレイでタブを表示する場合に使われます。48 を加えるコストはわずかで、Windows のデスクトップショートカットをカバーします。

それ以上になると見返りは急に減っていきます。256 ピクセルの項目は Windows の大アイコン表示で使われ、それだけでファイルサイズをおよそ四倍にします。favicon としてはページの読み込みごとに取得されるものにしては割に合いません。デスクトップアプリケーションのアイコンには含め、ウェブサイトには含めないでください。

16 × 16 では合計 256 ピクセルしかありません。ワードマークは読めず、細い輪郭は消え、細部の多いイラストレーションはにじみになります。自動的な縮小はまさにそれを生み出し、これが多くの favicon がタブの中で灰色のぼやけに見える理由です

うまくいくのは、一つの強い形です。一文字、単純なグリフ、明るいタブ背景にも暗いタブ背景にもはっきり見える塗りつぶしのシルエット。ロゴを縮小するのではなく、それ自体を独立したアートワークとして描き、拡大した画面ではなく実際のサイズで確かめてください。

初期の ICO は 1 ビットのマスクを使っていました。ピクセルは完全に不透明か完全に透明かのどちらかで、曲線のあるものにはギザギザの縁ができていました。Windows XP がまともなアルファチャンネルを持つ 32 ビットの ICO を導入し、それ以降はどれもそれに対応しています。

それが求めているものであり、いま現行のツールが作るものです。favicon がブラウザーごと、テーマごと、明暗のモードごとに違う背景の上に乗ることを考えると重要です。白い背景を焼き込んだアイコンは、暗いタブ帯の中でそれをすぐに露呈します。

Windows Vista 以降、ICO の中の項目は生のビットマップデータではなく、完全な PNG になっています。大きいサイズではこれが大幅な節約になります。256 ピクセルの無圧縮の項目はおよそ 256 キロバイトですが、同じ画像を PNG にすればほんの一部です。

かなり古いソフトウェアは PNG 圧縮された項目を理解せず、そのサイズについては何も表示しません。実際にはこれは Windows XP と同じくらい古いツール群のことで、いまはウェブサイトについて考慮すべき対象ではありません。小さいサイズはビットマップのまま、大きいサイズは PNG で持たせてください。今のジェネレーターの既定はまさにそうなっています。

サイトのルートにある `favicon.ico` は、何も指示せずともどのブラウザーも探しに来る、いまも変わらないフォールバックです。それだけで、これを用意しておく良い理由になります。それを超えると、いまの現代的な組み方は HTML の head で宣言する一連の PNG に加えて、拡大縮小でき、ダークモードに反応できる SVG のfaviconです。

だから正直な助言は、どちらか一方ではなく両方です。自動リクエストのために 16 と 32 を持つ `favicon.ico` を用意し、それを使うブラウザーのために PNG と SVG の版を宣言してください。ICO は最低限であって、答えのすべてではありません。

Windows のアプリケーションとショートカットのアイコン。これがこの形式のもともとの仕事で、大きいサイズが役割を果たす場所です。`.exe` や `.dll` に埋め込まれたアイコンは、リソースセクションの中の ICO の項目です。デスクトップのショートカット、フォルダーのカスタマイズ、インストーラーのアートワーク。

Windows と favicon の外ではほとんど現れません。macOS は ICNS を使い、Linux のデスクトップは PNG と SVG を使います。ICO を求められたなら、それはほぼ確実にウェブサイトか Windows のプログラムのためで、どちらかによってサイズが決まります。

余白にゆとりのある正方形の元画像から始めてください。アートワークぎりぎりまでトリミングしたアイコンは隣のものより大きく見えます。透明度を持つ PNG が理想的な入力で、ツールが受け付けるなら SVG のほうがさらに良いです。各サイズを再標本化ではなくレンダリングし直せるからです。

正方形でない元画像はパディングされるかトリミングされ、どちらも意図した通りにはならないことがほとんどです。あらかじめアートワークを意図的に正方形にしておくことは一瞬で済み、結果に対するいちばんよくある失望を取り除きます。

favicon は普通ではないほど積極的にキャッシュされます。しばしばページ本体より頑固で、ときには普通の再読み込みでは触れられない別の保存場所にあります。新しい favicon は、それを作った本人以外には見えるのに、本人には見えないということがよく起きます。

アイコンの URL を直接読み込むのが確実な確認方法です。`example.com/favicon.ico` が新しい画像を返しているなら、公開はうまくいっていて、タブはキャッシュされたコピーを表示しているだけです。強制再読み込みやプライベートウィンドウ、あるいは単に一日待つことで、たいてい解決します。何かを変える前にこれを排除しておく価値があります。よくある反応は favicon を何度も書き出し直すことですが、それでは形式が壊れていると結論づけてしまいがちです。