ファビコン

Favicon

web beginner

ブラウザのタブやブックマーク、検索結果などに表示される、Webサイトを識別するための小さなアイコン画像のこと。

概要（サマリー）

ファビコン（Favicon）とは、ブラウザのタブやブックマーク一覧、検索結果などに表示される、Webサイトを識別するための小さなアイコン画像のことである。「Favorite Icon（お気に入りアイコン）」を縮めた言葉で、タブでは32×32ピクセル前後、検索結果やホーム画面ではより大きい正方形が使われる。サイトのロゴや象徴的なマークを小さく表示することで、複数のタブを開いているときでもどのサイトかをひと目で識別できるようになる。

詳細解説

ファビコンが表示される場所

ファビコンはさまざまな場面で活用されている。

ブラウザのタブ: 複数タブを開いているときのサイト識別
ブックマーク: お気に入り一覧での視覚的な区別
Google検索結果: URLの横にサイトのアイコンとして表示
スマホのホーム画面: 「ホーム画面に追加」したときのアプリアイコン

特にGoogle検索結果にファビコンが表示されるようになってから、検索結果での視認性やブランド識別の観点でも重要になっている。

HTMLへの設置方法

ファビコンはHTMLの <head> 内に <link> タグで指定する。

<head>
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/favicon.png" type="image/png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

指定がない場合、ブラウザはサイトのルートにある favicon.ico ファイルを自動で探しに行くことがある。ただし、意図した画像を安定して表示させるには、<link rel="icon"> で明示的に指定するほうが分かりやすい。WordPressでは、管理画面の「サイトアイコン」から登録するケースも多い。

検索結果では、ホスト名ごとにファビコンは1つである。example.com と news.example.com は別々に置けるが、example.com/news/ のようなディレクトリ単位では分けられない。ホームページから辿れること、robots.txt で画像の取得を拒んでいないこと、URLを頻繁に変えないことも条件になる。条件を満たしても、検索結果への表示は保証されない。

推奨されるファイル形式とサイズ

用途	形式	目安サイズ
ブラウザのタブ	`.ico` / `.png`	32×32px など
Google検索結果	`.ico` / `.png` / `.jpg` など	48×48pxより大きい正方形を推奨
ホーム画面・PWA向け	`.png`	192×192px など
iOSホーム画面アイコン	`.png`	180×180px
拡大しても荒れにくい指定	`.svg`	ブラウザ向け。検索結果の掲載形式とは分ける

2026年10月時点のGoogle検索のガイドラインでは、ファビコンは正方形で、一辺8px以上が要件、48×48pxより大きい画像が推奨である。掲載形式として挙げられているのは BMP、GIF、ICO、PNG、JPEG、PPM、TIFF であり、SVGは一覧に含まれていない。ブラウザのタブでは SVG を使えることが多いので、検索結果向けには PNG か ICO を別に用意すると安全である。

AIコーディングとの関係

AIにファビコン用の画像や <link> を書かせるときは、単純なマーク、正方形、実在するファイルパス、rel="icon" を指定する。細かい絵は小さい表示で潰れる。SVGだけを渡し、検索結果にも出ると書かせない。生成後は、タブ、ブックマーク、検索結果で別々に確認する。

よくある勘違い

ファビコン = OGP画像（og:image）？

異なる。ファビコンはブラウザのタブや検索結果に表示される小さなアイコンであるのに対し、og:imageはSNSでシェアされたときに表示されるカード画像だ。用途も表示場所もまったく異なる。

ファビコン = サムネイル？

異なる。サムネイルは記事一覧や動画リストで内容を伝えるプレビュー画像である。ファビコンはサイトのアイコンとして機能するものであり、内容の説明よりもブランド識別が目的だ。

ファビコンを変えたのに反映されない？

タブに出ないときは、ブラウザのキャッシュが原因であることが多い。強制リロード（Ctrl+Shift+R）やシークレットモードで確認する。<head> 内の <link rel="icon"> でパスを明示するほうが、ルートの favicon.ico を探しに行く挙動より意図が伝わる。

検索結果は別である。キャッシュを消しても、Googleがホームページを再クロールするまで数日から数週間かかることがある。

まとめ

ファビコンは、タブ、ブックマーク、検索結果でサイトを見分ける小さなアイコンである。
HTMLの <head> に <link rel="icon"> で置く。ルートの favicon.ico だけに頼ると、意図した画像にならないことがある。
検索結果に出すには、正方形で、クロールできる安定したURLが要る。48×48pxより大きい PNG や ICO が扱いやすい。SVGはブラウザ向けと分けて考える。
変えた直後に検索結果が変わらないときは、ブラウザのキャッシュと、検索側の再クロールの両方を疑う。

情報ソース

より詳しくAIに聞いてみよう

ファビコンとは何か、初心者でもわかるように説明してください。
ファビコンとog:imageの違いを整理してください。
HTMLにファビコンを設定する正しい方法を教えてください。
Google検索結果にファビコンを正しく表示させるための条件を教えてください。
WordPressでファビコンを設定する手順を教えてください。