ファビコンのサイズ早見表：16・32・48・180・192・512pxの使い道（作り方つき）

16×16px：ブラウザのタブ。32×32px：高解像度のタブ、ブックマーク、Windowsのタスクバー。48×48px：Windowsのショートカット、そしてGoogle検索結果でサイト名の横に出るアイコンの最小サイズです（Googleは48pxの倍数の正方形、たとえば48・96・144pxを推奨しています）。

180×180pxのPNG：iPhone・iPadでサイトをホーム画面に追加したときのアイコン（apple-touch-icon）。192×192px・512×512pxのPNG：Androidのホーム画面やインストール型ウェブアプリ用で、ウェブマニフェストに書きます。512pxは起動画面にも使われます。

1つだけ作るなら、16・32・48pxを入れたfavicon.icoと180pxのPNGを用意しましょう。タブ、検索結果、スマートフォンをすべてカバーできます。

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行を追加します。ブラウザはファビコンを長くキャッシュするので、変わらない場合はシークレットウィンドウで確認してみてください。