ファビコン（favicon.ico）の作り方：本当に必要なサイズと形式

favicon.icoには複数のサイズの画像を入れられ、ブラウザが場面に合うものを選びます。タブには16×16、高解像度画面やタスクバーには32×32、Windowsのショートカットには48×48。この3つを1つのICOに入れておけば、ほとんどの場面をカバーできます。

スマートフォンは別のファイルを使います。iOSは180×180のPNG（apple-touch-icon）、Androidやインストール型のウェブアプリはウェブマニフェストに書かれた192×192と512×512のPNGを探します。

ICOは最も互換性が高く、ブラウザが/favicon.icoを自動で探しに来ます。PNGのファビコンはリンクを明示すれば最新のブラウザすべてで使えます。SVGはどのサイズでも劣化せず、最新のChrome・Edge・Firefoxが対応していますが、すべてのブラウザではないので、予備としてICOも置いておきましょう。

正方形の画像から始め、できるだけシンプルにします。1文字や太い図形なら縮小しても残りますが、細かい文字の入った複雑なロゴはつぶれてしまいます。コントラストを強くし、明るいタブと暗いタブの両方でどう見えるか確認しましょう。

ロゴがSVGなら、PNGではなくSVGから直接変換してください。ベクターはサイズごとに描き直されるので、16ピクセル版でも鮮明です。

LocalvertのPNG→ICOまたはSVG→ICOで変換すると、16・32・48ピクセルが入ったfavicon.icoが1つできます。正方形でない画像は切り取らず余白を足し、透明部分もそのまま保ちます。

favicon.icoをサイトのいちばん上のフォルダに置き、<head>の中に <link rel="icon" href="/favicon.ico" sizes="any"> の1行を追加します。ブラウザはファビコンを長くキャッシュするので、変わらない場合はシークレットウィンドウで確認してみてください。