1. 看板ではなく、16×16で読める形にする
タブの大きさでは、細い線・小さい文字・複雑なグラデーションは潰れます。色は1〜2色、シルエットは太めの方が、長い社名ロゴの縮小版よりずっと見えます。
まず正方形にします。横長ロゴは先に中央を正方形に切り抜き。そうしないとジェネレーターが全体を縮め、マークが点に見えます。
元データはベクターSVG、または最低256×256（できれば512×512）のPNGを残します。ぼやけたサムネを拡大するのではなく、この原本から小さくしてください。
2. 複数サイズのICO（またはPNGセット）を出す
定番の`favicon.ico`は16×16・32×32・48×48を1ファイルに入れ、タブやブックマークが近いサイズを選びます。
PNG・SVG・JPGをファビコン生成に上げ、サイズセットを選んでダウンロードすれば十分です。手で16進をいじる必要はありません。
32×32や180×180の単体PNGも一緒に置くチームが多いです。PWAならweb app manifestにアイコン項目も必要です。
3. 置き場所とHTML
`favicon.ico`はサイトのルートに置くか、フレームワークの決まりに従います。Next.jsやAstroならだいたい`public/`配下です。
最低限は`<link rel="icon" href="/favicon.ico" sizes="any">`。PNGもあるなら`<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`なども足します。
iOSの「ホーム画面に追加」用に180×180のPNG：`<link rel="apple-touch-icon" href="/apple-touch-icon.png">`。
4. 公開後に確認する
強制再読み込みかシークレットウィンドウで見てください。ファビコンはキャッシュが強く、普通の再読み込みだと古いアイコンのまま、ということがよくあります。
スマホでホーム画面に追加し、apple-touch-iconが余白なくはっきり見えるかも確認します。
リブランドしたらICO・PNG・manifestのアイコンをまとめて差し替えます。新旧が混ざると、同じサイトにマークが2種類残ります。
ハマりやすい落とし穴
512pxのPNGを、小さいサイズを入れずに`favicon.ico`へリネームだけする。環境によっては拡大が甘く、タブでぼやけます。
SVGだけのファビコンは対応が増えていますが、社内イントラなどでは静かに失敗することがあります。ICO＋PNGがいまだに無難な既定です。
完全透過のアイコンは、Windowsの明るいタブ背景で形が分かりにくくなることがあります。マークの後ろにブランド色の四角を置くと読みやすいです。
ICOを今すぐ作る
正方形のロゴを上げて、[[favicon-generator|ファビコン生成]]から複数サイズのファビコンをダウンロードし、上のHTMLタグを貼り付けてください。
ファビコン生成を開く