PNG を ICO に変換

PNG を ICO にする人はほぼ全員、ファビコンを作っています。ブラウザーは 30 年近く前から、どのサイトについてもルートの /favicon.ico を要求してきましたし、いまも要求します。HTML で何を宣言していてもです。そこに置いておけば、ログに並ぶ 404 が止まり、それ以外を見ない道具にも届きます。

現代的なファビコンの書き方では PNG や SVG を指すこともでき、多くのサイトは両方を用意しています。ICO は、宣言しなくても効く最後の受け皿です。

圧縮形式ではなく容れ物です。だからこの変換で意味のあるものは失われません。あなたの画像は PNG のまま、大きさごとに 1 枚ずつ、アルファチャンネルごとその中に収まります。角の丸いロゴや、透明な隅を持つマークは、そのままの形で保たれます。

ファイルが小さいままである理由もここにあります。計算し直されるのではなく、どの大きさが入っているかを書いた目次が前に付くだけだからです。

形式から来る制約は 1 つ、そして固いものです。アイコンは 256 ピクセルで頭打ちになり、それより大きいものは縮小されます。ICO の目次にある大きさの欄が 1 バイトしかなく、256 は収まらないので 0 として書かれるからです。

その上限より下は、あなたが決めます。「アイコンのサイズ」で目次に何を入れるかが決まり、既定では 48、32、16 ピクセルの 3 つが、大きいものから順に、それぞれ独立した PNG として書き込まれます。ファビコンが最初から求めてきたのはこの形でした。ブラウザーは目次を読み、これから描く大きさにいちばん近いものを取り出します。大きな 1 枚を汎用の縮小処理でその場で縮めることはありません。

ここで書き出される項目はどれも正方形です。アイコンが正方形だからです。正方形でない画像は、切り取られも引き伸ばされもしません。収まる最大の大きさで正方形の中央に置かれ、まわりは透明のまま残ります。形は歪みませんが、横長のロゴは枠の半分ほどしか埋めず、タブが並んだ中では隣より小さく見えます。

ですから、作った道具の中で正方形に整え、256 ピクセル以上にして、マークが枠の九割ほどを埋めるようにしてください。元の画像への手直しはこれ 1 つだけで、アイコンの見え方はこのページのどの話よりもここで決まります。

実務で効くのは 16 と 32 ピクセルです。16 はブラウザーのタブとブックマークの一覧、32 はタスクバーとほとんどのデスクトップ上の表示。Windows は表示によっては 48 と 256 でも描きます。

既定で書き出されるのはまさにこの 3 つで、だから既定になっています。それでも元は大きく用意してください。どの項目もあなたが置いた画像から縮小して作られます。256 ピクセルの元からは、きれいな 48、32、16 ができます。32 ピクセルの元を 256 に拡大すると、その言葉どおりの見た目になります。

つまずくのは形式ではなく算数のほうです。16 ピクセルでは文字の高さがおよそ 10 ピクセルしかありません。社名のロゴタイプにも、添えた一言にも、ほかより細い線にも足りません。

効くのは、形が 1 つ、対比が強く、色が少ないことです。名前ではなく頭文字、組み合わせロゴ全体ではなくシンボルマークだけ。確かめ方は簡単で、変換する前に PNG を 16 ピクセルに縮めてみることです。それが何か分からなければ、どの形式でも救えません。

サイトのルートに favicon.ico として置いてください。この 1 か所で、直接それを要求してくるブラウザー、フィードリーダー、そしてほかを見ない古い道具まで覆えます。

HTML の head でも宣言しておく価値はあります。現行のブラウザー向けの PNG と、iOS のホーム画面向けの apple-touch-icon と並べてです。ICO は土台であって、戦略の全部ではありません。

ほぼ必ずキャッシュです。しかもファビコンは異常に強くキャッシュされます。ブラウザーによって、サイトの前に立つ CDN によって、そしてときには OS によっても。

まずアイコンの URL を直接開いて、新しいファイルが配信されていることを確かめてください。そのうえで、ブラウザー全体ではなくそのオリジンのサイトデータだけを消します。CDN があるならそちらも消します。ファイル自体が正しいと確認できたら、あとは時間の問題です。

好きなだけ PNG を置いてください。それぞれが自分の ICO になり、ZIP にまとまって戻ってきます。アプリや、1 つずつアイコンが要る複数のサイトにそのまま合います。

変換はブラウザーの中で走るので、アップロードも順番待ちもなく、上限はあなたの機械だけです。アイコンは十分に小さいので、それが制約になることはありません。