TIFF を ICO に変換

このアイコン系のページの中でも、両端の落差がいちばん大きいのがこの変換です。印刷用に納品されたロゴは 300 dpi で数千ピクセル四方あることが多く、余白もたっぷり取られ、下にキャッチコピーが添えられていることもあります。アイコンはどれだけ大きくても 256 ピクセルで、実際に見えるのは 16 か 32 ピクセルです。ブラウザーのタブのファビコン、デスクトップのショートカット、タスクバーの一項目です。

縮小はピクセル数の問題を解決しますが、構図の問題は解決しません。レターヘッドでは美しく映るマークも、キャッチコピーや細い罫線、輪郭線だけの書体が含まれていると、32 ピクセルではただの灰色のにじみになります。変換の前にシンボルだけを切り抜き、キャッチコピーも余白も、幅の四十分の一より細い要素も外してください。この五分間の作業が、このページのどの設定よりも結果を左右します。

どんな画像が来ても、長辺が 256 ピクセルを超えないように縮小されてから書き出されます。これは方針ではなく形式そのものの上限です。ICO のディレクトリは各画像の幅と高さを 1 バイトで記録し、256 は 1 バイトに収まらないためゼロとして記録されます。Vista 以降のすべての Windows はこの慣習を正しく読みます。

ファイルの中の各サイズは、その 256 ピクセルの画像から一度のフィルター処理で作られる正方形のキャンバスの上に描かれるので、3,000 ピクセルの印刷用ファイルがギザギザになることはなく、正方形でないマークは伸ばされずに透明な余白付きで中央に置かれます。同時に単純化もされます。画像幅のおよそ百分の一より細い特徴は平均化されて消えます。32 ピクセルでとにかく鮮明さが要るなら、3,000 ピクセルからの縮小より、編集ソフトで意図して 32 ピクセルの版を作るほうが目に見えて違います。

TIFF は 1 ファイルに複数の画像を持てる形式で、ICO も持てます。まさにそのためにある仕組みで、正式なアイコンファイルは 16・32・48・256 ピクセルの同じ絵を持ち、状況ごとに好きなものを選べるようにしています。このページの比較表はどちらについても正しいことを書いていて、この変換が実際に守るのはそのうち一方だけです。

TIFF の読み込みは 1 ページ目で止まるので、複数ページのファイルはそれ以降がすべて静かに失われます。モノクロ版や反転版も入ったブランドパックを変換する前に、ロゴがどのページにあるか確認してください。一方 ICO の書き出しは、既定で 48・32・16 の三つ、それぞれ独立した PNG として、サイズごとに 1 つのディレクトリエントリを作ります。つまり非対称の向きが望ましい方向にそろっています。1 枚しか渡さない印刷用ファイルから、ブラウザーやタスクバーがどのサイズを求めても応えられる容器ができあがります。

ICO は生のビットマップか PNG のどちらかを持てて、ここではサイズごとに PNG が入ります。現在の主流の作り方で、生ビットマップの版に比べてはるかに軽く、そして本物の 8 ビットのアルファチャンネルを伴います。背景を切り抜いたロゴはそのまま切り抜かれたままで、ぎざぎざの一ビットマスクではなく滑らかにアンチエイリアスされた縁を保ちます。

これは写真ではなくロゴを変換するときにいちばん強い理由です。ファビコンはブラウザーのタブの色が何であれその上に載り、ライトモードとダークモードでも切り替わります。不透明な白い四角の中にあるマークは、ダークモードでは失敗のように見えます。TIFF の背景が透明でなく、素材がべた塗りの白の上にあるなら、変換前にその背景を取り除いておく価値があります。

印刷用の TIFF は ICC プロファイル付きの CMYK であることが多く、その組み合わせこそが印刷を可能にしています。ここでの読み込みは CMYK を固定の計算式で画面用の色に変換し、プロファイルは経由しません。結果はブランドとして認識できる色にはなりますが、正確な色ではありません。深い色調でやや平板になり、企業カラーの赤や青の彩度が少し足りなくなりがちです。

32 ピクセルのタブアイコンなら誰も気づきません。色そのものが資産であるブランドなら、きちんと変換する価値があります。Photoshop や Affinity、GIMP で TIFF を開き、プロファイルを尊重しながら sRGB に変換し、書き出した RGB 版を持ってきてください。同じ素材をサイトの他の場所でも使うなら、なおさらやっておくべきです。ヘッダーのロゴと合わないファビコンは目立つ不一致になります。

16 ビットのチャンネルは上位バイトを残す形で 8 ビットに減らされ、アイコンのサイズではまず見分けがつきません。レイヤーは合成されて 1 枚になります。EXIF、XMP、IPTC、そして ICC プロファイルはすべて失われます。このサイトの画像変換はすべて生のピクセルに一度復号してから再符号化するため、ここでは何も設定しなくても自然にそうなります。

サイズはそれに応じて大きく縮まります。このサイトのサンプルにある 480×320 の画像は TIFF で 615,400 バイトあり、印刷用素材から作ったアイコンはたいてい数キロバイトに収まります。数百ピクセルの PNG が数十バイトのディレクトリの後ろに続くだけだからです。既定の三サイズ構成は、実際にはより優れたアイコンであると同時にファイルも小さいことが多く、フラットなマークでの実測では 1,062 バイト対、256 ピクセル単独の 2,229 バイトでした。どちらにしても速度への影響は皆無で、公開前のチェックリストから一つ心配事が減ります。

ウェブサイトなら、ルート直下に /favicon.ico として置いてください。ブラウザーはマークアップに何が書かれていてもこのパスを取りに行き、これへの 404 はサーバーのログでいちばんよく見かける行の一つです。head に link 要素を加えることは害にならず、意図を明示できます。

Windows のショートカットなら、右クリックしてプロパティ、アイコンの変更でこのファイルを指定してください。アプリケーションのビルドツールは複数サイズの ICO を求めることが多く、その場合は「全サイズ」を選べば、このページから 256 から 16 まで一式そろえて得られます。現代のブラウザーは link 要素経由で PNG や SVG もファビコンとして受け付けるので、ICO が必須なのは素の /favicon.ico へのリクエストと Windows 自身に対してだけだと知っておく価値があります。

ロゴがベクター形式でも存在するなら——同じブランドパックの中の SVG や EPS、AI ファイル——そちらを使ってください。ベクターは読み込み時に再サンプリングではなく描画されるので、縁のアンチエイリアスが二重にかからず、SVG はすでに画面用の色を持っているため CMYK の問題そのものを回避できます。引き継ぎ用フォルダーを十分掘る手間は、このページで設定を追い込む手間より多くの場合報われます。

目的が実はアイコンではないなら、隣接するページのほうが正しい答えです。透過を保ったまま文書やスライドに載せたいロゴなら TIFF から PNG、ウェブページに載せるなら TIFF から WebP、看板や切り抜き用に図形へ戻したいなら TIFF から SVG です。ICO はその容器を本当に必要とする限られた場所のためのものです。

utif2 が TIFF を復号し、画像はサイズごとに一度ずつ拡大縮小されて PNG として符号化され、6 バイトのヘッダーとエントリあたり 16 バイトのディレクトリがその周りに書かれます。すべてブラウザーの中で行われ、何もアップロードされません。このページに関しては、これを明記する価値があります。ファイルはほぼ確実に誰かが権利を持つロゴで、まだ公開されていないことも珍しくありません。

無料枠は 1 ファイルあたり 100 MB で、印刷用ロゴなら大きく余裕があります。複数のマークを持っているならバッチも使えます。フォルダーをドロップして ZIP で受け取れますが、このページに来る人のほとんどはファイル 1 つ、チェックリストの項目 1 つだけです。PNG エンコーダーはサイト全体の画像パイプラインと共有しているので、アイコンはエンコーダーが最初に作った状態のままではなく oxipng を通って書き出されます。