ファビコン（favicon）

ファビコン（favicon）とは、ブラウザのタブやブックマークの一覧に表示される、サイトを表す小さな絵柄のことです。「favorite icon」を縮めた言葉で、タブをいくつも開いているときに、目的のページを見分ける手がかりになります。

現実世界に例えると、ファビコンは背表紙に貼られたシールのようなものです。棚に並んだ本の題名をいちいち読まなくても、色と形だけで目当ての一冊にすぐ手が届きます。小さくても、探す手間をはっきり減らしてくれます。

用意しておきたい種類

もっとも簡単な方法があります。サイトの一番上の階層に「favicon.ico」という名前でファイルを置いておくと、ブラウザが自動で探しに来て表示します。HTMLに何も書かなくてよいため、古くからこのやり方が使われてきました。ただし大きさや形式の指定はできません。

きちんと制御したい場合はこちらです。head要素の中にlinkタグを書き、rel属性に「icon」と指定して、画像の場所と大きさを明示します。用途ごとに複数行を並べれば、タブ用、スマホのホーム画面用といった使い分けができます。現在はこの書き方が推奨されています。

選択肢は増えています。いまのブラウザはpngやsvgもファビコンとして扱えるため、扱いやすいpngを使う例が増えました。svgであれば一つのファイルでどんな大きさにも対応でき、明るい画面と暗い画面で色を変えるといった工夫も組み込めます。古い環境が対象ならicoを併せて置きます。

設計上の勘所です。実際に表示されるのは数ミリの大きさなので、ロゴをそのまま縮めると何も読み取れない染みになってしまいます。文字なら一字だけ、図形なら一つの形に絞り、背景との明暗の差をはっきり付けます。白い背景に薄い色、という組み合わせはとくに見えにくくなります。

相談の多い症状です。ブラウザはファビコンを強く保存しておくため、差し替えても古い絵柄が出続けることがよくあります。ファイル名の末尾に数字を足して別のファイルとして扱わせるか、履歴を消してから開き直すと切り替わります。数日待てば自然に入れ替わることもあります。

見た目以上の意味があります。スマートフォンの検索結果では、サイト名の横にファビコンが表示されるため、一覧の中で目に留まるかどうかに関わってきます。用意していないと、既定の地球の絵柄など味気ない表示になります。押してもらう確率に効く要素として、軽く見ないほうが賢明です。

意外と抜けやすい部分です。スマートフォンでサイトをホーム画面に追加したとき使われる絵柄は、タブ用のファビコンとは別に指定する必要があります。指定が無いと、画面の一部を切り取った画像が代わりに使われ、見栄えが整いません。180ピクセル四方の画像を用意しておきます。