PNG を ICO に変換

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

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

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

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

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

そしてここで作られるのは 1 枚で、ICO が収められる複数枚ではありません。Windows もブラウザーも必要に応じて縮小するので、単純なマークなら十分です。細かい線のあるロゴは、16 と 32 ピクセルで手作業で描き直したほうが確かに良く見えます。それは変換ソフトではなくアイコン編集ソフトの仕事です。

正方形でない画像は切り取られないので、横長のロゴからは横長のアイコンができ、ブラウザーのタブの中で収まりの悪い見た目になります。

作った道具の中で正方形に整え、256 ピクセル以上にしてください。そうすれば、描かれるどの場所でも正しく収まります。

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

ここで書き出されるのは 1 枚なので、大きく始めて縮小させてください。256 ピクセルの元はそのすべてにきれいに縮みます。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 つずつアイコンが要る複数のサイトにそのまま合います。

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