Webサイトを訪れたときに、ブラウザのタブに小さなアイコンが表示されているのを見たことがあると思います。これは「Favicon（ファビコン）」と呼ばれ、サイトのブランディングやユーザーエクスペリエンス向上に貢献します。しかし、適切なファビコンを設定しないと、特にスマートフォンのホーム画面ではアイコンが正しく表示されなかったり、SEOにも悪影響を及ぼす可能性があります。
本記事では、Faviconの基本的な設定方法から、iPhoneやAndroidのホーム画面アイコン対応、さらにはSEOに役立つ最適化方法まで詳しく解説します。
1. Faviconとは？
Favicon（ファビコン）とは、「Favorite Icon」の略で、Webサイトのシンボルとなる小さなアイコンのことです。ブラウザのタブやブックマーク、検索結果などに表示され、サイトの認識性を高める役割を果たします。
ファビコンが表示される場所
- ブラウザのタブ（Chrome、Safari、Firefoxなど）
- ブックマークバー（お気に入り登録時）
- 検索結果の横（Google検索でサイトが表示される際）
- スマートフォンのホーム画面（iPhoneやAndroidで「ホーム画面に追加」した場合）
2. Faviconの基本的な設定方法
Faviconを設定するには、以下の手順でHTMLにタグを追加します。
① Faviconを作成する
一般的なFaviconのフォーマットは以下の通りです。
- ICO形式（
favicon.ico）：主にブラウザ向け - PNG形式（
favicon.png）：高解像度ディスプレイ向け - SVG形式（
favicon.svg）：スケーラブルなアイコン
推奨サイズ：
- 16x16px（最低限のサイズ）
- 32x32px（標準的なブラウザ向け）
- 48x48px 以上（高解像度向け）
無料でファビコンを作成できるツールもあります。
② HTMLにファビコンを設定する
作成した favicon.ico をルートディレクトリ（public_html/ や htdocs/）にアップロードし、以下のコードをHTMLの <head> 内に追加します。
<link rel="icon" href="/favicon.ico" type="image/x-icon">また、PNGファイルを使用する場合は次のように設定します。
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">3. iPhoneやAndroidのホーム画面アイコンを設定する
Faviconを設定しても、iPhoneやAndroidで「ホーム画面に追加」した場合には適用されません。そのため、apple-touch-icon を設定する必要があります。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">推奨サイズ:
- 180x180px（iPhone用）
- 192x192px（Android用）
複数のサイズを用意する場合は、以下のように記述します。
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">4. SEOに役立つFaviconの最適化
① Faviconを設定するとSEOに良い影響がある？
Googleの公式ガイドによると、適切なFaviconを設定すると検索結果のクリック率（CTR）が向上する可能性がある と言われています。検索結果にサイトアイコンが表示されることで、視認性が高まり、ユーザーがクリックしやすくなるからです。
② 正しいパスとHTTPS対応
FaviconのURLは、HTTPSでアクセスできる場所に設置 することが重要です。GoogleはHTTPSをランキング要因の一つとしているため、HTTPS化されていないとSEO的にマイナスの影響が出る可能性があります。
<link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">③ クローラーに認識されるようにする
GoogleがFaviconを正しく認識するには、サイトマップ（sitemap.xml）や robots.txt に記述し、クローラーに正しくインデックスされるようにすることが重要です。
User-agent: *
Allow: /favicon.icoまとめ
Faviconは、サイトの視認性を高めるだけでなく、ユーザー体験やSEOにも影響を与える重要な要素です。特にスマートフォンでの表示を最適化することで、ユーザーの利便性を向上させることができます。
Favicon設定のチェックリスト: ✅ favicon.ico をサイトのルートディレクトリに配置 ✅ <link rel="icon" href="favicon.ico"> を <head> に記述 ✅ スマホ用の apple-touch-icon.png も用意 ✅ HTTPSで正しく配信されることを確認 ✅ Googleクローラーが正しく認識できるように設定
これらを正しく実装すれば、SEO対策としても有効です。