ITワクワク塾Favicon（ファビコン）とは？サイトを見分ける小さなアイコン
参照したオンライン文書の版番号：未確認 画面例は模式図と公式資料の引用です。
ブラウザーでページを開くと、タブの題名の横に小さな絵が表示されることがあります。この絵の名前がファビコンです。
本記事では、タブの画面例と公式資料の実例を通じて、ファビコンの役割や、小さな表示でもサイトを見分けやすくする考え方を解説します。
ファビコンとは
ファビコン（Favicon）は、Webページやサイトを表す小さなアイコンです。ブラウザーのタブやブックマークなどで、サイトを探す目印になります。
名前は英語の「favorite icon」に由来するもので、ブックマークに登録したときだけ使う、という意味ではありません。いくつもタブを開いて題名が短くなったときも、見慣れた図柄から目的のサイトを探せます。
ページの中に大きく表示するロゴとは、使う場所が違うものです。同じ図柄を使うことはできますが、横長のロゴや長いサイト名をそのまま縮めると、読み取りにくくなるでしょう。
2つの画面例
左は通常のタブ、右は固定したタブを想定した架空の画面です。同じ花のアイコンを使い、題名がある場合と、絵だけで見分ける場合を並べました。
Firefoxでは、固定したタブは題名を出さず、サイトのアイコンだけを表示する仕組みです。このような表示では、細かい文字よりも、形や色の特徴を見分けられるかが大切になります。
ファビコンはサイトを見つける目印であり、安全を証明する表示ではありません。見慣れた絵だけで本物と判断せず、ドメイン名も確認しましょう。
実例から見る設計の違い
WordPress.comの公式資料から、ロゴとの対応と、大きさによる見え方を比べます。この節の引用画像は出典元の著作物で、当サイトのCC BY 4.0の対象外です。
例1：サイトのロゴと同じ図柄を使う
ページ内の「Jetpack」というロゴと、ブラウザーのアドレス入力時の候補に、共通の緑の図柄が見える例です。小さなアイコンでは文字を省き、丸と稲妻の形でサイトを表しています。
このように、サイトのロゴの特徴を小さな絵に残すと、ページの中とブラウザーの表示を対応づけやすくなります。すべてのブラウザーがこの位置に同じ表示をする、という例ではありません。
例2：大きな表示と小さな表示を見比べる
画像を選ぶ画面の右側に、大きなアプリアイコンと、小さなタブのアイコンを並べた例です。同じ画像を使っていても、タブでは木の細部を読み取りにくくなっています。
大きな元画像だけでなく、小さく表示したときの輪郭と色も確認しましょう。白、灰色、黒などの背景で見比べると、背景と同じ色になって見えにくい部分にも気づけます。
ホーム画面用のアイコンには、タブ用とは別の設定を使う場合もあるため、表示先に合わせた確認が必要です。また、Google検索にもファビコンが表示されることはありますが、設定後すぐの表示や、必ず採用されることは保証されません。
AIに画面を依頼するとき
このWebサイトを見分けるファビコンを用意してください。サイトのロゴの特徴を残し、細かい文字を詰め込まず、タブの小さな表示でも分かる形にします。明るい背景と暗い背景で見え方を確認し、画像をサイトのアイコンとして設定してください。ホーム画面用のアイコンも必要なら、別の設定と画像サイズを確認してください。