ファビコン

🐾 猫で例えると？

ふかふかのカゴの端から、ちょこんと顔だけを出している茶トラ猫。体全体は見えなくても、その小さな顔を見るだけで「あ、うちの猫がここにいるな」と一瞬で分かりますよね。Webサイトにおける「ファビコン」もまさにこれと同じです。ブラウザの狭いタブという隙間から、「このサイトはここですよ！」と小さな顔（ロゴ）を出して、ユーザーに自分の居場所を可愛らしくアピールしてくれます。

💻 Web開発現場における「ファビコン」とは？

ファビコンは、多くのタブを開いたときにサイトを探す手掛かりになります。ページの内容を説明するタイトルと組み合わせて使うもので、ファビコンがなくてもWebページは表示できます。小さくしても見分けられることが大切です。

Googleの検索結果にもサイトのファビコンが表示される場合があります。ただし、ガイドラインに沿って設定しても表示は保証されず、順位やクリック率が必ず上がるものでもありません。iOSのホーム画面用には apple-touch-icon、PWAのインストール用にはWebアプリマニフェストのアイコン設定など、別の指定も確認します。

⚠️ ファビコンの仕組みと設定方法

HTMLの <head> に <link rel="icon"> を書き、画像のURLを指定します。ICO・PNG・SVGなどが使えますが、対応形式や選び方は利用先によって異なります。複数の指定がある場合、ブラウザは type・sizes・media などを手掛かりに選びます。

HTMLでの記述例

次は実際の画像ファイルを各URLに配置した場合の例です。同程度に適切な候補が複数あれば後の指定が選ばれるため、この例ではPNGを先、SVGを後に置いています。PNGが必ずすべての環境の代替になると決め付けず、対象のブラウザで確認します。

<!-- HTMLのhead内。各ファイルを公開ディレクトリに配置する -->
<link rel="icon" href="/favicon-48.png" type="image/png" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

SVGは拡大縮小に強い一方、細い線や細部が小さな表示で消えないかは別に確認が必要です。ダークモード用の色をSVG内のCSSで切り替える場合も、実際のタブの背景色と組み合わせて読めるかを確認します。

🛠️ ファビコンを作成・設定するポイント

小さなアイコンだからこそ、デザインや書き出しには特有の注意点があります。

• 小さな表示で確認する： 16×16px程度でも猫の輪郭が見分けられるか、実寸で見ます。Google検索用には正方形で8×8px以上が必要で、同社は48×48pxより大きいものを推奨しています。ブラウザの小さい表示と検索用の画像要件を分けて考えましょう。
• 背景と線のコントラストを確認する： 透過は選択肢の一つです。透明にすれば必ず読みやすくなるわけではなく、黒い猫の輪郭は暗いタブで消えることがあります。必要なら縁取りや背景を付け、明暗両方のテーマで確認します。
• 表示されない箇所を切り分ける： 画像URLが開けるか、HTMLの指定先が正しいか、キャッシュに古い画像が残っていないかを順に確認します。Google検索での反映には再クロールも必要です。検索向けのアイコンURLは頻繁に変えず、Googlebotがホームページを、Googlebot-Imageが画像を取得できる状態にします。

カゴからちょこんと顔を出した猫を見つけるように、小さなファビコンはサイトを探す手掛かりになります。大きく美しい原画だけで判断せず、実際のタブやブックマークに置いたときに見分けられるかを確かめましょう。