WebP を ICO に変換

このページに来る人のほとんどは、逆順で作業しています。デザインファイルはもう連絡の取れない制作会社の手元にあるか、閉じられた Figma アカウントの中か、2 つ前の仕事で使っていたノートパソコンの中にあり、いま残っているロゴのコピーはサイトが配信しているものだけです——それがビルド処理か画像 CDN によって WebP に変換されて配信されています。

それでも十分な出発点で、実用的なファビコンが作れます。それでも、もっと良い素材がないか 30 秒だけ探す価値はあります。良い元データほど良いアイコンになり、代わりになるものがすぐそこにあることも多いからです。ドメインの /favicon.svg を試す、ページのソースを ".svg" で検索する、同じ画像が picture 要素のフォールバックとして PNG で配信されていないか確認する。もし見つかれば、SVG から ICO や PNG から ICO のページのほうがこのページよりよい結果になります。

ここで作る ICO の長辺は 256 ピクセルが上限です。これは形式そのものの制約で、ディレクトリが各寸法を 1 バイトに格納し 256 はゼロとして記録されるためです。多くのアイコンページではこの上限がいちばんの論点になります。元データが数千ピクセルにも及ぶ印刷用ファイルやカメラ写真だからです。

ここでは通常そうなりません。サイトはレイアウトが必要とする大きさでロゴを配信しており、しばしばリサイズサービスを経由します。240 から 400 ピクセル幅はヘッダー用のマークとしてまったく普通で、既定の組み合わせの上限である 48 を余裕で上回ります。リスクは逆向きにあり、元データがまかなえないサイズを要求したときだけ効いてきます。120 ピクセルのロゴを「一般的なサイズすべて」で変換すると、256 と 128 のエントリーを埋めるために拡大され、容量は増えても細部は増えません。変換する前に、同じ URL をより大きな幅パラメーターで試すか、@2x のアセットを探してみてください。

WebP には 2 種類あり、拡張子だけではどちらか判断できません。平坦なロゴの可逆 WebP は PNG と同じくらいきれいです。非可逆な WebP は、平坦な領域をなめらかにし硬い輪郭にリンギングを残す変換を経ており、400 ピクセルでは見えなくても、32 ピクセルまで縮小してページタイトルの隣に描かれると見えなくはありません。

症状は、マークにまとわりつく淡いグレーのハローと、本来べた塗りであるべき部分の濁りです。このページでは何をしてもそれを取り除けません。情報がすでに失われているからです。役に立つのは、より大きい元データから始めることです。400 ピクセルの非可逆な元データを 256 に縮小すればリンギングの一部が平均化されますが、128 ピクセルのものには平均化する余地がありません。そしてシンボルだけに切り抜けば、残った細部を読み取れるものに使えます。

ここで作られる ICO は生のビットマップではなく PNG を含みます。これが現代の慣例で、Vista 以降のすべての Windows が読め、ファイルの容量も生のビットマップの方式よりずっと小さくなります。それ以上に重要なのは、本物の 8 ビットアルファチャンネルが備わっていることです。WebP にもそれがあるので、切り抜かれたロゴはなめらかにアンチエイリアスされた輪郭を保ったまま切り抜かれた状態で届きます。

ファビコンにはこれがほとんどの画像以上に必要です。ブラウザーのタブバーに置かれ、ライトテーマとダークテーマで色が変わり、ブラウザーが違えばさらに変わるからです。不透明な白い四角に焼き込まれたマークは、ダークモードではバグのように見え、ライトモードではシールを貼ったように見えます。WebP に透明な背景がなく、ロゴが平坦な白の上に置かれているなら、変換前にその背景を取り除くことが、できる編集の中で最も価値があります。

WebP はアニメーションを持てますが、ここで使われているデコーダーは静止画しか読みません。アニメーションのファイルは黙って最初のフレームに縮められるのではなく、読める形のメッセージとともに拒否されます。2 つの失敗のしかたのうちよいほうで、このサイトの他の部分が同じ状況をどう扱っているかとも一致しています。

この場合は損失でもありません。ブラウザーは ICO のファビコンをアニメーションさせないので、アニメーションする元データからアニメーションするアイコンが作られることはもともとありませんでした。1 コマだけ欲しいなら、ブラウザーでファイルを開いて一時停止し、そのフレームをスクリーンショットして変換してください。アニメーション自体が別の用途で必要なら、WebP から GIF への変換がそれを保ちます。

これは変換の問題ではなくデザインの問題で、結果の大部分を左右します。ファビコンは実際には 16 や 32 ピクセルで見られ、その大きさではキャッチコピーはグレーのにじみになり、アウトライン書体はつぶれて塗りつぶされ、細い罫線は消え、3 つ以上の要素を持つマークは塊になります。

変換前に WebP をシンボルだけに切り抜いてください。ワードマークを外し、余白を外し、幅の 40 分の 1 より細いものを外します。ブランドがシンボルを持たないワードマークだけなら、ブランド書体で 1 文字だけ設定するのが、よく知られたほぼすべてのサイトが行っていることです。それなら 16 ピクセルでも読めますが、正式名称ではそうはいきません。どんな画像編集ソフトでも 5 分かければ、このページのどんな設定よりも効果があります。

ICO のコンテナーは、同じ絵柄を複数のサイズでまとめて持てるよう設計されており、このサイトの比較表でこの形式が複数画像対応と記録されている理由です。ここではそのとおりに書き出されます。サイズごとに 1 つのディレクトリエントリーを持ち、既定では 48、32、16 ピクセルの 3 つです。タブを描くブラウザーは、256 を自前のフィルターで縮小するのではなく、16 で作られたエントリーを読みます。これがこの形式が存在する理由そのものの違いです。この処理ができないのはマークの描き直しです。専用に描かれた 32 ピクセルのアイコンは、ロゴを縮小した 32 ピクセルよりいまも鮮明です。

メタデータはどちらの方向にも運ばれません。ここでのすべての画像変換は生の画素へデコードしてから再符号化するので、WebP にあった EXIF や XMP、ICC プロファイルは何をしても失われます。ページ側で切り替えられるものではありません。ファビコンとしてはまったく問題なく歓迎される話です。できあがるファイルは、数十バイトのディレクトリの奥に 1〜2 キロバイトの PNG があるだけになります。既定の 3 サイズの合計は、たいてい単独の 256 ピクセル版より小さくなります。平坦なマークの小さい PNG を 3 つ持つほうが、大きいもの 1 つより安く済むからです。

サイトのルートに /favicon.ico として置いてください。ブラウザーは HTML に何も書かれていなくても、この正確なパスを自分から要求します。すでにヘッダーでアイコンを宣言しているサイトでも、それでもログに 404 が出る理由です。link 要素を併せて追加しておけば意図が明確になり、別のファイルを指定したい場合にも対応できます。

そして少し待ってから、判断する前にキャッシュを消してください。ファビコンはどのブラウザーでも中間のプロキシでも積極的にキャッシュされ、新しいものが反映されるまで 1 日かかったり、強制リロードが必要だったりするのが普通です。現代のブラウザーは link 要素経由で PNG や SVG も受け付けるので、ICO が厳密に必要なのは素の /favicon.ico へのリクエストと Windows のショートカットに対してだけですが、それだけでも用意しておく十分な理由になります。

WebAssembly にコンパイルされた libwebp がファイルをデコードし、画像は拡大縮小されてサイズごとに oxipng を 1 回適用した PNG として符号化され、その結果の周りに ICO のヘッダーとディレクトリが書き込まれます。これらはすべてブラウザーの中で行われます。何もアップロードされず、アカウントも不要で、1 日の上限もありません。

このページに限っては、それを当然と思わずあえて言っておく価値があります。ファイルは誰かが所有するロゴであり、クライアントのものであることも、まだ公開されていないものであることも十分にあり得るからです。無料枠の上限は 1 ファイルあたり 100 MB で、どんなロゴもそこには届きません。1 つのプロジェクトに複数のブランドがあるならバッチでも動作します。フォルダーを置けば ZIP を受け取れ、コーデックは処理全体を通して 1 回だけダウンロードされます。