ファビコン
Favicon
概要（サマリー）
ファビコン（Favicon）とは、ブラウザのタブやブックマーク一覧、検索結果などに表示される、Webサイトを識別するための小さなアイコン画像のことである。「Favorite Icon（お気に入りアイコン）」を縮めた言葉で、通常は16×16ピクセルや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では、テーマや管理画面の「サイトアイコン」設定から登録するケースも多い。
推奨されるファイル形式とサイズ
| 用途 | 形式 | 目安サイズ |
|---|---|---|
| 基本のファビコン | .ico / .png |
32×32px |
| Google検索結果向け | .ico / .png / .svg など |
48×48px以上の正方形が目安 |
| ホーム画面・PWA向け | .png |
192×192px など |
| iOSホーム画面アイコン | .png |
180×180px |
| SVG（スケーラブル） | .svg |
ベクター形式 |
現在は .ico 形式に加え、.png や .svg も広くサポートされている。ただし、すべての表示場所で同じように扱われるとは限らないため、基本は .ico や .png を用意し、必要に応じて .svg も使うと考えるとよい。AIにファビコンを作成してもらう場合は、シンプルで正方形に収まるデザインを指示するとよい。
よくある勘違い
ファビコン = OGP画像（og:image）？
異なる。ファビコンはブラウザのタブや検索結果に表示される小さなアイコンであるのに対し、og:imageはSNSでシェアされたときに表示されるカード画像だ。用途も表示場所もまったく異なる。
ファビコン = サムネイル？
異なる。サムネイルは記事一覧や動画リストで内容を伝えるプレビュー画像である。ファビコンはサイトのアイコンとして機能するものであり、内容の説明よりもブランド識別が目的だ。
ファビコンを変えたのに反映されない？
ブラウザのキャッシュが原因であることが多い。強制リロード（Ctrl+Shift+R）やシークレットモードでの確認を試してみるとよい。また、<head> 内の <link rel="icon"> でファビコンのパスを明示的に指定することで意図したものが表示されやすくなる。
情報ソース
まとめ
- ファビコンは、ブラウザのタブやブックマーク、検索結果などに表示される、Webサイトを識別するための小さなアイコン画像のこと。
- 関連する用語や実際の作業場面と一緒に理解すると、使いどころを判断しやすい。
- AIコーディングでは、用語の意味を理解しているほど、AIの説明や生成コードを確認しやすくなる。
- 迷ったときは、エラー内容、目的、前提条件を整理してAIに聞くとよい。
より詳しくAIに聞いてみよう
- ファビコンとは何か、初心者でもわかるように説明してください。
- ファビコンとog:imageの違いを整理してください。
- HTMLにファビコンを設定する正しい方法を教えてください。
- Google検索結果にファビコンを正しく表示させるための条件を教えてください。
- WordPressでファビコンを設定する手順を教えてください。