ファビコン
Favicon
概要（サマリー）
ファビコン（Favicon）とは、ブラウザのタブやブックマーク一覧、検索結果などに表示される、Webサイトを識別するための小さなアイコン画像のことである。「Favorite Icon（お気に入りアイコン）」を縮めた言葉で、通常は16×16ピクセルや32×32ピクセルほどの正方形の画像が使われる。サイトのロゴや象徴的なマークを小さく表示することで、複数のタブを開いているときでもどのサイトかをひと目で識別できるようになる。
詳細解説
ファビコンが表示される場所
ファビコンはさまざまな場面で活用されている。
- ブラウザのタブ: 複数タブを開いているときのサイト識別
- ブックマーク: お気に入り一覧での視覚的な区別
- Google検索結果: URLの横にサイトのアイコンとして表示
- スマホのホーム画面: 「ホーム画面に追加」したときのアプリアイコン
特にGoogle検索結果にファビコンが表示されるようになってから、SEOや視認性の観点でも重要度が上がった。
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 ファイルを自動で探しに行く。そのため、WordPressなどのCMSでは favicon.ico をルートに置くだけで機能することも多い。
推奨されるファイル形式とサイズ
| 用途 | 形式 | 推奨サイズ |
|---|---|---|
| 基本のファビコン | .ico / .png |
32×32px |
| 高解像度ディスプレイ | .png |
192×192px |
| iOSホーム画面アイコン | .png |
180×180px |
| SVG（スケーラブル） | .svg |
ベクター形式 |
現在は .ico 形式に加え、.png や .svg も広くサポートされている。AIにファビコンを作成してもらう場合は、シンプルで正方形に収まるデザインを指示するとよい。
よくある勘違い
ファビコン = OGP画像（og:image）？
異なる。ファビコンはブラウザのタブや検索結果に表示される小さなアイコンであるのに対し、og:imageはSNSでシェアされたときに表示されるカード画像だ。用途も表示場所もまったく異なる。
ファビコン = サムネイル？
異なる。サムネイルは記事一覧や動画リストで内容を伝えるプレビュー画像である。ファビコンはサイトのアイコンとして機能するものであり、内容の説明よりもブランド識別が目的だ。
ファビコンを変えたのに反映されない？
ブラウザのキャッシュが原因であることが多い。強制リロード（Ctrl+Shift+R）やシークレットモードでの確認を試してみるとよい。また、meta-tagでファビコンパスを明示的に指定することで意図したものが表示されやすくなる。
より詳しくAIに聞いてみよう
- ファビコンとは何か、初心者でもわかるように説明してください。
- ファビコンとog:imageの違いを整理してください。
- HTMLにファビコンを設定する正しい方法を教えてください。
- Google検索結果にファビコンを正しく表示させるための条件を教えてください。
- WordPressでファビコンを設定する手順を教えてください。