WEBサイトfavicon の現代的な実装 ── SVG・manifestで揃える3ファイル構成と、表示されないときの確認方法（2026年8月時点）
favicon の現代的な実装 ── SVG・manifestで揃える3ファイル構成と、表示されないときの確認方法（2026年8月時点）
目次
01 favicon の現行要件 — 一次ソースで確認する2026年8月時点の姿
Google公式ドキュメントが定める現行要件
Google Search Centralが公開している「検索結果に表示するfaviconを定義する」ページは、2026年2月4日（UTC）付けで最終更新されています。この記事執筆時点で最新の要件は、次の5点に整理できます。
| 項目 | 現行の要件 |
|---|---|
| サイズ | 正方形（1:1）で最低8×8px。ただし48×48pxより大きいサイズを推奨 |
| フォーマット | 有効なfavicon形式であれば何でも可（ICO・PNG・SVGなど） |
| ホスト単位 | Google検索が認識するfaviconはホスト名ごとに1つ。サブドメインは別favicon可、サブディレクトリ単位では不可 |
| クロール許可 | favicon本体とホームページの両方が、それぞれのクローラーによってクロール可能である必要がある |
| URLの安定性 | favicon のURLは頻繁に変更しないことが推奨されている |
出典
クロール許可の項目では、favicon本体をクロールするのはGooglebotとは別にGooglebot-Imageであることが明記されています。Googleクローラー(User-Agent)の一覧ページにも同様の記載があり、favicon 用のクローラーとホームページ用のクローラーは別物として扱われています。両方が通れて初めて、favicon は検索結果に反映されます。
「48pxの倍数」はもう要件ではない
この現行要件で見落とされやすいのが、以前は存在していた「48pxの倍数（48×48、96×96……）でなければならない」という制約が、すでに撤廃されている点です。Search Engine Journalが2024年10月24日に報じた記事によれば、この変更でGoogleの要件は「最低8×8px、推奨48px超」というシンプルな形に置き換わりました。当サイトが2026年6月に自社のfaviconを点検・整備した記録（archives/74）でも、この2024年10月の変更を起点に置いています。倍数ルールを前提に「96×96で作り直さないと」と作業を計画している場合、それは不要な作業になっている可能性があります。
表示される場所はブラウザタブだけではない
favicon が表示される場所は、ブラウザのタブ・ブックマーク・履歴だけではありません。デスクトップ検索結果では2023年3月にサイト名+favicon+ラベルの構成で正式に全世界展開されており、モバイル検索結果ではさらに前の2019年5月から表示が続いています。iOSのホーム画面追加時にはapple-touch-icon、AndroidのPWA・ホーム画面にはWeb App Manifestのアイコンが使われ、いずれも別ファイルの用意が要ります。表示面ごとに参照されるファイルが違うという構造を、次の図でまとめます。
02 なぜ、favicon の扱いはここまで変わったのか — 背景
2020年のロールバック事件が示したこと
favicon が検索結果に表示されるようになった経緯を振り返ると、決して直線的な歴史ではありません。2019年5月にモバイル検索結果への表示が始まった後、2020年1月にはデスクトップにも導入されましたが、「オーガニック検索結果が広告と見分けにくくなった」という批判を受け、約1週間でロールバックされています。この一件は、favicon の見た目ひとつでユーザーのクリック行動が変わりうることを示す、間接的だが具体的な傍証です。その後2023年3月、サイト名表示・大型favicon・Sponsoredラベルという構成でデスクトップに再導入され、現在に至ります。
SVG形式への対応が、この2年で大きく広がった
favicon の実装方法を左右するもうひとつの変化が、SVG形式への対応状況です。Can I use のSVG favicon対応表によれば、ChromeはバージョンMoz80以降、Firefoxはバージョン41以降で対応済みで、長らく非対応だったSafariもバージョン26.1以降で対応しています。1ファイルで全解像度に対応でき、後述するダークモード切り替えも実現できるSVGは、いまや実務的な選択肢になっています。ただしIEや旧バージョンのブラウザは非対応のままのため、ICOやPNGを保険として併置する構成が現実的です。
AI引用面でも、favicon の役割が広がっている
2026年5月、AI OverviewとAI Modeの引用表示が刷新され、従来は回答末尾にまとめられていた引用リンクが、該当する記述の近くにインラインで表示される方式に変わりました。このインライン引用にfaviconを表示するテストが観測されており、AIの回答の中で「どのサイトからの情報か」を読者が判断する手がかりが、サイト名とfaviconに絞られつつあります。この変化についての詳しい経緯は、当サイトが実装時に整理した記録（archives/74）にまとめてあります。
SVGでダークモードに対応する実装
SVG形式を本命にする最大の利点は、1ファイルでダークモード対応まで完結できる点です。実装はSVGファイル内の<style>要素に、CSSのprefers-color-schemeメディアクエリを書くだけで済みます。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<style>
.mark { fill: #12203c; }
@media (prefers-color-scheme: dark) {
.mark { fill: #f0f0f0; }
}
</style>
<path class="mark" d="..." />
</svg>ブラウザ側のテーマ設定が暗いときだけ、塗り色が自動で反転します。JavaScriptを一切使わず、追加のHTTPリクエストも発生させずに実現できるのが、SVGならではの強みです。逆に言えば、PNGやICOだけで実装している場合、ダークモードのタブでロゴが背景に沈んで見えなくなる事故を、構造的に防ぐ手段がありません。
注意
ここは正直に書いておきます。「favicon の有無でクリック率(CTR)が何%上がる」と断定できる、大規模で統制された公開調査は見つかっていません。上に挙げた2020年のロールバック事件や、AI引用面での表示拡大は、faviconが視認・クリック行動に影響しうることの傍証ではありますが、因果関係を示す一次データではありません。数字を盛らずに書けば、「CTRが確実に上がる根拠はないが、ブランド識別とAI引用の両面で整備しない理由も見当たらない」というのが、この記事の執筆時点での正直な現在地です。
03 この記事で出てくる用語
用語
favicon（ファビコン） — favorite iconの略。ブラウザのタブ・ブックマーク・検索結果・AI引用表示など、サイトを識別するために使われる小さなアイコン。HTMLの<head>内に<link rel="icon">として指定する。
用語
ICO・PNG・SVGの使い分け — ICOは1ファイルに複数サイズを同梱できる最古参の形式でレガシー環境向け、PNGは解像度ごとにファイルを分けて配信する形式でapple-touch-iconやmanifestアイコンに使われる、SVGはベクター形式で1ファイルが全解像度とダークモード対応を兼ねられる形式。どれか1つに絞るのではなく、役割分担で併用するのが現実的な運用。
用語
Web App Manifest — PWA（Progressive Web App）としての振る舞いをブラウザに伝えるJSON形式の設定ファイル。MDNのicons解説によれば、192×192pxはデスクトップショートカット用途、512×512pxはPWAのスプラッシュ画面用途を想定したサイズとされている。
用語
maskable icon — Web App Manifestのpurposeプロパティにmaskableを指定するアイコン形式。web.devの解説では、重要な図像をアイコン中央の半径40%の円内（セーフゾーン）に収めることが求められており、これによりAndroidの丸型・角丸型など端末ごとの切り抜き形状に対応できる。
04 実装パターン別に見る、対応範囲と限界
モダン3ファイル+manifest構成
2026年時点の実務的なデファクトは、favicon.ico・icon.svg・apple-touch-icon.png・manifestの4点セットに収束しています。ICOをレガシー環境の保険として残し、SVGをモダンブラウザの本命に据えるという役割分担です。少ないファイル数で必要な表示面をおおむね網羅できますが、SVGに完全非対応の環境（旧IEなど）では favicon が表示されない、という限界は残ります。
旧来の20サイズ書き出し方式
ひと昔前の実装では、favicon-16x16.png・favicon-32x32.pngから始まり、各OS・各解像度向けに10種類以上のファイルをheadに並べる方式が一般的でした。この方式が対応していた古い環境（旧Android・旧IE・各種ガラパゴス端末）の実利用は縮小していますが、間違った実装というわけではありません。問題になるのは保守コストで、ロゴを変更するたびに全サイズを再生成し、headのリンク行も総入れ替えする必要があります。
生成ツールに一括生成だけを任せる場合の限界
元画像を1枚アップロードすれば必要なファイル一式とHTMLスニペットまで生成してくれるツールは便利ですが、生成ツールが確認していないことが2つあります。ひとつは16pxまで縮小したときに図像として判読できるか、もうひとつはダークモードのタブでロゴが背景に沈んで見えなくなっていないかです。どちらも機械的なサイズ変換では検知できず、生成後に人間が実タブで見て確認する工程が必要になります。
実務のヒント
ICOとSVGを両方指定している場合、ブラウザによっては<link rel="icon" href="/favicon.ico" sizes="32x32">のようにsizes属性を明示しておくと安定します。sizes属性が無いと、ChromeがICOをSVGより優先して表示してしまう挙動が報告されているためです。SVGを本命にしたい場合は、ICO側にsizes指定を入れておくと意図通りの優先順位になりやすくなります。
| 実装パターン | 対応範囲 | 向いていないケース |
|---|---|---|
| モダン3ファイル +manifest | 検索結果・モダンブラウザ・iOS・Android PWA | SVG完全非対応の旧環境がまだ多いと判明しているサイト |
| 旧来の20サイズ 書き出し | 各種OS・旧ブラウザまで幅広く網羅 | 更新頻度が高いサイト（再生成コストが重い） |
| 生成ツール 一括生成のみ | 主要ファイルの取りこぼしを機械的に防げる | 16px視認性・ダークモード適性の確認（人間の目が必要） |
整えたのに表示されない場合、まず2系統で切り分ける
04章のどのパターンで実装しても、「設定したのに検索結果に反映されない」という状況は起こり得ます。ここで焦って設定を作り直す前に、原因を大きく2系統に分けて考えると切り分けが早くなります。ひとつは設定側に原因があるケース（robots.txtのブロック・複数指定の競合・サイズ違反など）、もうひとつは単純な反映待ちのケースです。Google公式ドキュメントは「ガイドラインをすべて満たしても、表示は保証されない」ことを明記しており、条件を整えたあとは時間の経過を待つ必要がある場合があります。
05 自分のサイトで確認するチェックリスト
チェックリストの構成
ここまでの内容を、公開済みのサイトに対して今日から確認できる動作に翻訳しました。前半はブラウザとファイルの実配置確認、中盤はrobots.txtとインデックス側の確認、後半は表示品質そのものの目視確認です。チェックの状態はブラウザ内にのみ保存され、サーバーには送信されません。
- ブラウザで自サイトのトップページを開き、タブに表示されているアイコンを目視で確認する
- デベロッパーツールの要素タブを開き、
<head>内のlink rel="icon"の指定数を数える - rel="icon"が2つ以上ある場合、それぞれのhref先URLをブラウザで直接開いてHTTP 200が返るか確認する
- favicon.icoのURLを直接開き、48×48px以上のサイズで表示されるか確認する
- SVG形式のfaviconを使っている場合、OSのダークモード設定を切り替えてタブの色が反転するか確認する
- apple-touch-icon（180×180px想定）が配信されているか、URLを直接開いて確認する
- manifest.jsonまたはmanifest.webmanifestをブラウザで開き、192pxと512pxのアイコンが指定されているか確認する
- robots.txtを開き、favicon.icoやicon.svgのパスがDisallowされていないか確認する
- 同じrobots.txtで、ホームページ自体がブロックされていないかも合わせて確認する
- Search Consoleの「URL検査」でホームページを検査し、インデックス登録をリクエスト済みかを確認する
- 直近1ヶ月以内にfaviconのURLやファイル形式を変更していないか、変更履歴を振り返る
- Search Consoleの検索パフォーマンスで「favicon」というクエリの表示回数を検索窓に入力して確認する
- 元画像を16pxに縮小したプレビューを作り、図像として判読できるか目視で確認する
13項目の内訳と、優先して手をつける範囲
最初の7項目はファイルの実配置とブラウザでの表示確認、次の3項目はrobots.txtとインデックス側の確認、最後の3項目は変更履歴と表示品質の確認に対応しています。特に3番目の「rel="icon"が2つ以上ある場合」の項目は、先述の優先順位の競合に直結するため、複数指定がある場合は最優先で確認してください。13項目すべてに目を通す所要時間の目安は、15〜20分程度です。
06 favicon を用意する手段の比較
手作業とツール任せ、どちらを選ぶか
3ファイル+manifestの構成を手作業で1から作る必要はありません。元画像（できればSVGか1024px以上の正方形PNG）を1枚用意すれば、あとはツールが揃えてくれます。用途に応じて使い分けられるよう、代表的な3つの手段と、生成後に必ず必要になる手作業の確認とを並べて整理します。
| 手段 | 得意なこと | 使うタイミング |
|---|---|---|
| 当サイトのツール (🔧 favicon自動作成・無料) | 画像1枚からfavicon（48・96・144・192pxを内包）とApple用アイコンまで一括出力。正方形でない画像も中心から自動で正方形に切り出す | 元画像が1枚用意できていて、ブラウザだけで揃えたいとき |
| 生成ツール (RealFaviconGenerator等) | 元画像1枚から3ファイル+manifest+HTMLスニペットまで一括生成、既存faviconのチェッカー機能も持つ | 本実装・全体見直しのとき |
| 簡易生成ツール (favicon.io等) | テキストや絵文字からの即席生成に強い | 立ち上げ期に仮のfaviconが今すぐ必要なとき |
| ImageMagick (コマンドライン) | 複数サイズを同梱したICOを1コマンドで生成できる | ビルドパイプラインに自動生成を組み込みたいとき |
| ブラウザの 開発者ツール | 実際のタブ表示・DOM上のlink要素を直接確認できる | 生成後の最終確認・目視チェックの段階 |
実務のヒント
当サイトも🔧 favicon・サイトアイコン自動作成ツールを無料で公開しています。元画像を1枚アップロードするだけで、04章で紹介したモダン3ファイル+manifest構成に必要な一式を生成できます。
どの手段を選んでも、最後は人間の目が必要
上の表の右端に置いた「ブラウザの開発者ツール」は、他の3手段とは性質が異なります。生成ツールやコマンドラインはファイルを揃える工程を担当しますが、そのファイルが実際に意図通り表示されているかを最終確認するのは、常に人間の目です。04章で触れた「16pxでの判読性」と「ダークモードでの沈み」は、どのツールを使っても機械的には検知されません。
07 当サイトでの実装状況
「favicon」というクエリの実測
当サイトのSearch Consoleでは、「favicon」というクエリの表示回数50・平均掲載順位111.7位という実測が出ています。受け皿になる記事がこれまで薄かったにもかかわらず、検索結果のかなり深い順位で表示され続けているという状態で、この数字自体が「探している人はいるが、答えている記事が足りない」ことの傍証です。この記事は、その状態に正面から答えるために書いています。
自分のサイトでも同じように特定クエリの表示回数・掲載順位を確認したい場合は、当サイトの🔧 Google Search Console 解説ツールで、数字の読み方を確認できます。
3ファイル+manifest構成の配置を確認した
この記事の執筆にあたり、当サイト自身の実装状況を本番サーバー上で改めて確認しました。当サイトは2026年6月12日にfaviconのモダンセット（SVG化・manifest 192px/512px対応・rel="shortcut icon"旧記法の整理）を実装済みで（archives/74）、その実装が今も継続しているかを、サーバー上のファイル配置とHTTPレスポンスの両方で確認しています。favicon.ico・icon.svg・manifest.json・apple-touch-icon.pngの4ファイルはいずれもDocumentRoot直下に配置され、すべてHTTP 200で応答しています。
headタグの実装は<link rel="icon" href="/favicon.ico" sizes="48x48">・<link rel="icon" href="/icon.svg" type="image/svg+xml">・<link rel="manifest" href="/manifest.json">の3行で構成されており、04章で紹介した「モダン3ファイル+manifest」パターンにそのまま該当します。SVGファイルの中身には@media (prefers-color-scheme: dark)を使ったスタイル切り替えが組み込まれており、ダークモードのタブで背景が沈まないようにしてあります。
robots.txtとチェックリストの実行結果
05章のチェックリストのうち、robots.txtに関する2項目（favicon本体のブロック確認、ホームページ自体のブロック確認）を当サイトのrobots.txtに対して実行しました。Disallowで指定されているのは/admin/や/mypage/など管理系のパスのみで、favicon関連のファイルやホームページ自体をブロックする記述は見当たりませんでした。この確認は数十秒で終わりますが、05章の項目のうち見落としやすい部類に入るため、実際にこの記事を書く過程で自分のサイトに対して手を動かしています。同じ確認手順は、Search Consoleの読み方を扱った以前の記録（archives/16）で整理した「データを眺めるだけでなく、次の一手の材料として使う」姿勢とも重なります。
manifest.jsonのアイコン指定
manifest.jsonには192×192pxと512×512pxのPNGアイコンが指定されていますが、purposeプロパティ（maskable等）は現時点では指定していません。03章で触れたmaskable iconの対応は、Androidの端末ごとの切り抜き形状への最適化に関わる項目であり、この記事を書く過程で見つかった当サイト側の未実施項目のひとつです。
実務のヒント
05章のチェックリストの7番目「manifest.jsonまたはmanifest.webmanifestをブラウザで開き、192pxと512pxのアイコンが指定されているか確認する」は、当サイトで実際に使っている確認手順そのものです。同じ手順を、purposeプロパティの有無の確認にもそのまま使えます。
08 このテーマの、これまで
favicon整備を宣言から実装まで同日で終えた回
当サイトが実際にfaviconのモダン化に着手した経緯は、以前まとめて記録しています(archives/74)。この記事の07章で確認した3ファイル+manifest構成は、この回で「宣言→実施→記事更新」を同日で終えた実装がそのまま今も続いているものです。当時はSVGのベクターデータが元画像に残っていなかったため、既存の180px画像から幾何パラメータをピクセル解析で抽出して再構成する、という手順を踏んでいます。
再クロール待ちの「最長2週間」を扱った回
01章のチェックリストで「faviconのURL変更履歴を振り返る」という項目を挙げましたが、変更後にGoogleへ反映されるまでの期間については、当サイトが別のテーマで詳しく検証した記録があります(archives/108)。Google公式が2026年7月10日に追加した「再評価には時間がかかる」という説明と、当サイトが実際に経験した待機期間を突き合わせた内容で、faviconの反映待ちにもそのまま当てはまる考え方です。
Googleのクロールしきい値を扱った回
公式ドキュメントは、favicon の取得しきい値がホームページ本体より低く設定されていることを明記しています。クロール全般のバイト数上限について当サイトで整理した記録（【2026年8月時点】Googleの無料SEOツール完全ガイド）では、通常のページが最大2MBまでクロールされる一方、画像・動画系クローラーはしきい値の幅が広く、faviconはその中でも「ごく低いしきい値」に位置づけられていることを紹介しています。ファイルサイズを不必要に大きくしないことも、favicon が確実にクロールされるための一因です。
無料の公式ツールの使い分けを整理した回
05章のチェックリストで使ったURL検査ツールや検索パフォーマンスの読み方は、当サイトが以前まとめて整理した記録（【2026年8月時点】Googleの無料SEOツール完全ガイド）とも重なります。Search Console・PageSpeed Insights・Rich Results Testといった無料ツールをどう使い分けるかを扱った回で、いずれも「実際に測った値を返すツール」という共通点があります。faviconの確認作業も、この実測ツール群の延長線上にあります。
現在の貴方のIPアドレス
このサイトで書いている人
