よいファビコンの元画像
ファビコンは16pxのようにとても小さく表示されることが多いので、元画像は次の条件を満たすのが理想です。
- 正方形の画像。正方形でない場合は中央に合わせ、余った部分は透明にします。
- 256px以上のサイズ。小さい画像を拡大するとぼやけます。SVGならサイズを気にせず鮮明に作れます。
- シンプルな形。細い線や小さな文字は16pxでつぶれるので、ロゴの核になる形だけを残したものを使うのがおすすめです。
サイトに設定する
作ったfavicon.icoをサイトのいちばん上のフォルダ(ルート)にアップロードし、すべてのページの<head>の中に次の1行を入れます。
<link rel="icon" href="/favicon.ico" sizes="any">この行がなくてもブラウザがルートのfavicon.icoを探すことは多いですが、書いておくほうが確実です。詳しくはファビコンの作り方と設定方法にまとめています。
新しいファビコンが表示されないとき
ブラウザはファビコンを長く記憶しているので、新しいファイルをアップロードしても古いアイコンが表示されることがあります。スーパーリロードをするか、href="/favicon.ico?v=2"のようにアドレスにバージョンをつけると新しいファイルを読み込みます。