AVIFをICOに変換

AVIF は 2019 年に Alliance for Open Media が公開した形式で、AV1 ビデオコーデックをベースにしています。対応は Chrome が 85、Firefox が 93、Safari が 16 から始まり、現在ではサイト構築ツールや画像 CDN が AVIF を標準で出力します。その結果、ブランドのマークが logo.avif だけで保存されているチームも少なくありません。

ただ、ファビコンだけはそれでうまくいきません。Windows のデスクトップショートカットやピン留めしたサイトは ICO を読み込み、古いブラウザや多くのクローラーは HTML を見ずに /favicon.ico を取得し、CMS によってはファビコン欄で AVIF のアップロード自体を受け付けません。AVIF から作った 1 つの ICO で、これらすべてに対応できます。間に PNG to ICO の手順を挟む必要もありません。

16 px のアイコンは全部で 256 ピクセルしかないため、細い線や小さな文字、グラデーションは消えてしまいます。変換する前に、ロゴを簡略化したバージョンを書き出しておきましょう。ロゴタイプを外してシンボルだけにし、線を太くして、ライトテーマでもダークテーマでもコントラストがはっきりするようにします。背景を透明にするとタブの色が透けて、白い四角形よりも見栄えがよくなることがほとんどです。

AVIF の圧縮が強いと、輪郭がぼやけたり、シャープな形の周りで色がにじんだりすることもあります。ロゴにそうした症状が出る場合は、可逆圧縮の AVIF か SVG の元データを用意してください。大きなアイコンでは劣化が目立ちますが、16 px や 32 px では縮小によってほとんど目立たなくなります。AVIF と WebP、HEIC の違いについては、AVIF、HEIC、WebP の違いを解説をご覧ください。