Webサイトを運営していると、ブラウザのタブやGoogleの検索結果に表示される小さなアイコンが気になったことはないでしょうか？ この小さなアイコンが「favicon（ファビコン）」です。
＼ 短期間でアクセス数を増やす専用ツールをご案内！／SEOツール「キーワードファインダー」を無料で見る
faviconは設定しなくてもサイトは動きますが、タブ・ブックマーク・スマートフォンのホーム画面・Googleの検索結果など、ユーザーがサイトに触れる多くの場面で表示されるため、サイトの「顔」として意外と大きな役割を果たしています。「なんとなく設定したまま」「昔のやり方のまま運用している」という方も多いのではないでしょうか。
特にGoogleの検索結果に関する要件は2024年10月に改訂されており、古い情報のまま設定していると、せっかく用意したfaviconが意図どおりに表示されないこともあります。
そこで今回は、faviconの基本から、表示される場所やメリット、SEOとの関係、推奨サイズ・形式、Googleの最新要件、作り方、HTML・WordPressでの設定方法、表示されないときの対処法まで、わかりやすく解説していきます。
＼ 短期間でアクセス数を増やす専用ツールをご案内！／SEOツール「キーワードファインダー」を無料で見る
この記事でわかること
- favicon（ファビコン）の意味と、表示される場所
- faviconを設定するメリットと、SEOとの関係
- 用途別の推奨サイズと、ico・PNG・SVGの使い分け
- Google検索結果に表示させるための最新要件（2024年10月改訂を反映）
- faviconの作り方と、HTML・WordPressでの設定方法
- faviconが表示されない・変わらないときの原因と対処法
favicon（ファビコン）とは
favicon（ファビコン）とは、Webサイトを象徴する小さなアイコン画像のことです。「favorite icon（お気に入りアイコン）」を短縮した言葉で、もともとはInternet Explorerの「お気に入り（ブックマーク）」に登録したときに表示されるアイコンとして1999年に導入されました。現在では、ブラウザのタブやブックマーク、スマートフォンのホーム画面、Googleの検索結果など、さまざまな場所でサイトを識別する目印として使われています。
faviconにはサイトのロゴを使うことが多いですが、ブラウザのタブでは16×16pxや32×32pxといった非常に小さいサイズで表示されます。そのため、ロゴの文字部分を省いてシンボルマークだけを使う、頭文字1文字だけを配置するなど、小さくても判別できるデザインに調整するのが一般的です。
技術的には、サイトのルートディレクトリに「favicon.ico」という名前で画像を配置するか、HTMLの<head>内に<link rel="icon">タグを記述してブラウザに画像の場所を伝えることで表示されます。近年はブラウザ用だけでなく、iPhoneのホーム画面用アイコン（apple-touch-icon）やAndroid・PWA用のアイコン（Web App Manifest）など、用途別に複数のサイズ・形式を用意することが多くなっています。
なお、WordPressではfaviconに相当する機能を「サイトアイコン」と呼んでいます。呼び方が違うだけで役割は同じです。Googleの検索結果に表示されるアイコンも、Googleのドキュメント上は「favicon」として説明されており、基本的にはサイトに設定したfaviconがそのまま使われます。
faviconはどこに表示される？
faviconは私たちが思っている以上に多くの場所で表示されています。代表的な表示場所を整理すると、次のとおりです。
ブラウザのタブ
最も目にする機会が多いのがブラウザのタブです。複数のタブを開いているとき、ユーザーはタイトルではなくfaviconでどのタブがどのサイトかを判断することが多くあります。タブが増えるとタイトルは省略されて見えなくなりますが、faviconは最後まで残るため、faviconの有無で「見つけやすさ」に大きな差が出ます。
ブックマーク・履歴・アドレスバーの候補
ブックマークバーやブックマーク一覧、閲覧履歴、アドレスバーにキーワードを入力した際の候補にもfaviconが表示されます。ブックマークバーでは名前を非表示にしてfaviconだけを並べているユーザーも多く、faviconが未設定のサイトは地球儀マークなどの汎用アイコンで表示され、他のサイトに埋もれてしまいます。
スマートフォンのホーム画面
iPhoneのSafariで「ホーム画面に追加」を行うと、apple-touch-iconとして指定した画像がアプリのアイコンのようにホーム画面に配置されます。AndroidのChromeでも同様に、Web App Manifestで指定したアイコンがホーム画面に表示されます。ここではタブよりも大きな180×180pxや192×192pxといったサイズが使われるため、小さいfaviconだけを用意していると、ぼやけたアイコンが表示されてしまいます。
Googleの検索結果
Googleの検索結果では、各検索結果のサイト名の横にfaviconが表示されます。スマートフォンの検索結果では2019年から表示されており、現在はPCの検索結果でも表示されます。検索結果は、まだサイトを訪問していないユーザーが最初に目にする場所です。ここでfaviconが表示されるかどうかは、後述するようにクリック率に影響する場合があります。
PWA・その他
PWA（プログレッシブウェブアプリ）としてインストールされたサイトは、OSのアプリ一覧やタスクバーにもアイコンが表示されます。また、Slackなどのチャットツールでリンクを共有した際のプレビューや、RSSリーダーでもfaviconが参照されることがあります。
faviconを設定するメリット
faviconは設定しなくてもサイトは動作します。しかし、設定することで得られるメリットは小さくありません。主なメリットを4つ紹介します。
1. ユーザーがサイトを見つけやすくなる
タブやブックマークが多数並んでいる状態でも、faviconがあればユーザーは一目で目的のサイトを見つけられます。特にタブを何十個も開いたまま作業するユーザーにとって、faviconのないサイトは「どこにあるかわからないタブ」になりがちです。再訪問のしやすさは、リピーターの獲得にもつながる要素です。
2. ブランド認知・信頼感が高まる
faviconはロゴと同じく、ブランドを視覚的に印象づける要素です。検索結果・タブ・ブックマーク・ホーム画面など、あらゆる接点で同じマークが表示されることで、ユーザーの記憶にサイトのイメージが定着しやすくなります。反対にfaviconが未設定のサイトは、汎用の地球儀マークが表示されるため、「きちんと管理されていないサイト」という印象を与えてしまう場合があります。
3. 検索結果でのクリック率（CTR）向上が期待できる
Googleの検索結果では、faviconがサイト名の横に表示されます。faviconが表示されているサイトと汎用アイコンのみのサイトが並んだ場合、視認性やブランド認知の差から、faviconのあるサイトのほうがクリックされやすくなる場合があります。順位やタイトルの魅力など他の要素の影響のほうが大きいものの、手軽に取り組める施策として価値があります。
4. スマートフォンでアプリのように使ってもらえる
apple-touch-iconやWeb App Manifestを設定しておくと、ユーザーがサイトをホーム画面に追加した際にきれいなアイコンが表示され、ネイティブアプリに近い体験を提供できます。会員向けサイトや業務ツール、定期的に訪問してもらいたいメディアなどでは欠かせない要素です。
faviconとSEOの関係
「faviconを設定すると検索順位が上がるのか」という質問をよく受けますが、結論から言うと、faviconは直接の検索順位要因ではありません。Googleはfaviconの有無やデザインで検索順位を決めているとは公表しておらず、faviconを設定したからといって順位が上がるわけではありません。
ただし、faviconがSEOにまったく無関係というわけでもありません。Googleの検索結果ではサイト名の横にfaviconが表示されるため、faviconが適切に表示されていれば検索結果上での視認性が高まり、クリック率（CTR）の向上につながる場合があります。クリック率が上がれば、同じ順位でも獲得できる流入は増えます。
また、Googleは「ユーザーに誤解を与えるアイコンや、不適切な画像を含むアイコンは表示しない」という方針を明示しています。faviconは順位を左右する要素ではないものの、Googleがユーザー体験の一部として明確に扱っている要素だと言えます。
まとめると、faviconのSEO上の位置づけは「順位を上げるための施策」ではなく、検索結果に表示された際のクリック率と、ブランド認知を高めるための施策と捉えるのが適切です。
faviconの推奨サイズ・ファイル形式
faviconは表示される場所によって求められるサイズや形式が異なります。ここでは、用途別の推奨サイズと、ico・PNG・SVGという3つの主要な形式の使い分けを解説します。
用途別の推奨サイズ一覧
すべてを用意するのが理想ですが、最低限「favicon.ico（16・32・48px同梱）」「apple-touch-icon（180px）」「Android・PWA用PNG（192・512px）」の3種類を用意しておけば、主要な環境はカバーできます。
| 用途 | 推奨サイズ | 推奨形式 | 補足 |
|---|---|---|---|
| ブラウザのタブ・ブックマーク | 16×16px、32×32px | ico、PNG | 高解像度ディスプレイでは32×32pxが使われる。icoには48×48pxも同梱するのが定番 |
| favicon.ico（互換性重視） | 16×16・32×32・48×48pxを1ファイルに同梱 | ico | ルートディレクトリに置けばlinkタグなしでも認識される。古いブラウザにも対応 |
| PNG形式のfavicon | 32×32px、192×192px、512×512px | PNG | 透過に対応。用途に応じて複数サイズをlinkタグで指定する |
| SVG形式のfavicon | 可変（サイズ指定不要） | SVG | 拡大しても劣化せず、ダークモード対応も可能。ただしブラウザ対応率は約74%のため、PNG・icoのフォールバックが必須 |
| iPhone・iPadのホーム画面（apple-touch-icon） | 180×180px | PNG（非透過推奨） | 透過部分は黒く表示されるため、背景色を塗った画像を用意する |
| Android・PWA（Web App Manifest） | 192×192px、512×512px | PNG | manifest.jsonのiconsで指定。512×512pxはスプラッシュ画面にも使われる |
| WordPressのサイトアイコン | 512×512px以上の正方形 | PNG、JPEG、GIF | 1枚アップロードすると各サイズが自動生成される |
| Google検索結果 | 正方形（1:1）。最小8×8px、48×48pxより大きいサイズを推奨 | BMP、GIF、ICO、PNG、JPEG、PPM、TIFF | 2024年10月24日改訂の最新要件。詳細は次章で解説 |
ico形式：互換性を最優先するなら必須
ico形式は、Windowsのアイコン用に作られた、faviconの元祖とも言える形式です。最大の特徴は、1つのファイルの中に16×16px・32×32px・48×48pxなど複数サイズの画像を同梱できる点で、ブラウザは表示する場所に応じて最適なサイズを自動的に選びます。
また、ルートディレクトリに「favicon.ico」という名前で配置しておけば、linkタグを記述していなくても、多くのブラウザやツールが自動的にこのファイルを探して表示します。古いブラウザやRSSリーダーなど、linkタグを解釈しないツールにも対応できるため、互換性を重視するならfavicon.icoは必ず用意しておくのが定石です。
PNG形式：扱いやすく透過も可能
PNG形式は、一般的な画像編集ソフトで作成・編集でき、背景の透過にも対応しているため、最も扱いやすい形式です。ico形式のように複数サイズを1ファイルにまとめることはできませんが、linkタグのsizes属性で用途別のサイズを個別に指定できます。
apple-touch-iconやWeb App Manifestで指定するアイコンはPNG形式が標準ですので、いずれにしてもPNG形式のアイコンは用意することになります。なお、apple-touch-iconでは透過部分が黒く表示されてしまうため、背景色を塗った非透過のPNGを用意しましょう。
SVG形式：高解像度・ダークモード対応の最新形式
SVG形式はベクター画像のため、どのサイズで表示しても劣化しません。1つのファイルであらゆる解像度に対応でき、さらにSVGの内部にCSSを埋め込むことで、OSのダークモード設定に応じて色を切り替えることも可能です。
ただし、SVG形式のfaviconに対応しているブラウザは約74%にとどまります。特にSafariは長らく非対応でしたし、古いブラウザでは表示されません。そのため、SVGを使う場合でも必ずPNGまたはicoのフォールバックを併記する必要があります。「SVGだけを設置すれば他は不要」と考えるのはまだ時期尚早です。
現在の推奨構成は「favicon.ico（16・32・48px同梱）＋SVG（任意）＋apple-touch-icon 180px＋Manifest用PNG 192・512px」です。SVGは対応ブラウザでの見え方を良くする「加点」として使い、必須のフォールバックはicoとPNGで確保しましょう。
Google検索結果に表示させるための最新要件（2024年10月改訂を反映）
Googleの検索結果にfaviconを表示させるには、Googleが定める要件を満たす必要があります。この要件は、Google Search Centralの「検索結果に表示するファビコンを定義する（Define a favicon to show in search results）」というドキュメントで公開されています。
重要なのは、この要件が2024年10月24日に改訂された点です。古い記事や解説には改訂前のルールが書かれていることが多いため、新旧の違いをしっかり押さえておきましょう。
旧要件と新要件の違い
2024年10月24日より前、Googleはfaviconのサイズについて「48pxの倍数（48×48px、96×96px、144×144pxなど）でなければならない」というルールを定めていました。この「48の倍数」ルールは非常に有名で、今でも多くの解説記事で紹介されています。
しかし、2024年10月24日の改訂でこのルールは撤回され、現行の要件は次のように変更されました。
- 正方形（アスペクト比1:1）であること
- 最小サイズは8×8px
- 48×48pxより大きいサイズを推奨
つまり、「48の倍数でなければならない」という制約はなくなり、正方形であれば任意のサイズが受け付けられるようになりました。ただし、Googleは検索結果での表示用に画像を縮小して使うため、品質を保つには48×48pxより大きい画像を用意することが推奨されています。実務上は、Android・PWA用に用意する192×192pxや512×512pxの画像がそのままGoogle向けの要件も満たしますので、無理に「48の倍数」にそろえる必要はありません。
Googleが対応しているファイル形式
Googleが検索結果用のfaviconとしてサポートしているファイル形式は、BMP・GIF・ICO・PNG・JPEG・PPM・TIFFの7種類です。一般的に使われるico・PNG・JPEGはすべて含まれていますので、通常のfaviconを設定していれば形式面で問題になることはほとんどありません。
なお、SVG形式はこのリストに含まれていません。SVGのfaviconだけを設置しているサイトでは、Googleの検索結果にfaviconが表示されない可能性がありますので、必ずPNGやicoも併記してください。
Googleに認識してもらうためのその他の要件
- ホームページにfaviconのlinkタグを設置する：Googleはサイトのホームページ（トップページ）にあるfaviconの指定を読み取り、そのサイト全体の検索結果に適用します。
- GooglebotとGooglebot-Imageの両方がクロールできること：faviconのファイルとホームページの両方に、Googlebot（通常のクローラー）とGooglebot-Image（画像クローラー）の双方がアクセスできる必要があります。robots.txtでfaviconや画像ディレクトリをブロックしていると、検索結果に表示されません。
- faviconのURLを頻繫に変更しない：Googleはfaviconを頻繫にはクロールしません。ファイル名やURLをたびたび変更すると、反映が遅れたり、認識されなくなったりする場合があります。
- 不適切な画像は表示されない：ポルノやヘイトシンボルなど不適切な画像を含むfaviconや、ユーザーを誤解させるアイコンは、Googleがデフォルトのアイコンに置き換えます。
- 1つのサイト（ホスト名）につき1つのfavicon：Googleはホスト名単位でfaviconを扱います。サブドメインごとに異なるfaviconは設定できますが、ディレクトリ単位（example.com/blog/など）で変えることはできません。
faviconを変更・設置した後、Googleの検索結果に反映されるまでには数日から数週間かかることがあります。反映を早めたい場合は、Google Search Consoleの「URL検査」からホームページの再クロールをリクエストしてください。
faviconの作り方
ここからは、実際にfaviconを作成する手順を解説します。大きく「元画像の準備」「各サイズ・形式への変換」「アップロード」の3ステップです。
ステップ1：元画像を準備する
まず、faviconのもとになる正方形の画像を用意します。以下の点を意識してデザインしましょう。
- 正方形で、512×512px以上の大きさで作成する：大きい画像から縮小するのが基本です。WordPressのサイトアイコンも512×512px以上を求めていますので、512×512pxまたは1024×1024pxで作っておくと使い回しがききます。
- シンプルなデザインにする：16×16pxまで縮小しても判別できるよう、細かい文字や線は省き、シンボルマークや頭文字1文字など、要素を絞り込みます。
- 重要な要素は中央に寄せる：iPhoneのホーム画面など角が丸く切り取られる環境では、四隅の要素が欠けることがあります。
- 透過版と非透過版を用意する：ブラウザのタブでは透過背景がなじみやすい一方、apple-touch-iconでは透過部分が黒くなるためです。
- ダークモードでの見え方を確認する：黒一色のマークはダークモードのタブで見えなくなってしまいます。輪郭を付ける、明るめの色を使う、または後述するダークモード用のfaviconを別に用意するといった対応を検討しましょう。
画像の作成には、Photoshop・Illustrator・Figma・Canvaなどのデザインツールが使えます。ロゴデータがある場合は、シンボル部分を切り出して正方形に配置するだけでも十分です。
ステップ2：各サイズ・形式に変換する
元画像を用意したら、用途別のサイズ・形式に変換します。ico形式は一般的な画像編集ソフトでは書き出せないことが多いため、専用のツールを使うのが手軽です。
- オンラインのfaviconジェネレーター：「RealFaviconGenerator」や「favicon.io」など、画像をアップロードするだけで、favicon.ico・PNG各サイズ・apple-touch-icon・manifest.json・貼り付け用HTMLコードまで一式生成してくれる無料サービスがあります。もっとも手軽で確実な方法です。
- デザインツールのプラグイン：FigmaやPhotoshopには、ico形式で書き出せるプラグインがあります。
- コマンドラインツール：ImageMagickなどを使えば、複数サイズを同梱したfavicon.icoをコマンドで生成できます。開発フローに組み込みたい場合に向いています。
生成後は、「favicon.ico」「favicon.svg（任意）」「apple-touch-icon.png（180×180px）」「icon-192.png」「icon-512.png」「site.webmanifest」がそろっているかを確認しましょう。
ステップ3：サーバーにアップロードする
favicon.icoはサイトのルートディレクトリ（https://example.com/favicon.ico でアクセスできる場所）に置くのが基本です。その他のファイルは任意の場所に置いて構いませんが、後述するlinkタグのパスと一致させる必要があります。
HTMLでの設置方法
ファイルを用意したら、HTMLの<head>内にlinkタグを記述してブラウザに場所を伝えます。基本の書き方から、SVG＋ダークモード対応、Web App Manifestまで解説します。
基本の設置コード
もっとも基本的な構成は、favicon.icoとapple-touch-iconの2つを指定する形です。
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="apple-touch-icon" href="/apple-touch-icon.png">rel="icon"がfaviconを指定する属性です。sizes="any"は「複数サイズが含まれている」という意味で、複数サイズを同梱したico形式に付けるのが一般的です。rel="apple-touch-icon"はiPhone・iPadのホーム画面用アイコンの指定で、180×180pxの非透過PNGを指定します。
なお、古い解説記事ではrel="shortcut icon"という書き方が紹介されていることがありますが、「shortcut」はInternet Explorer時代の名残で、現在はrel="icon"だけで問題ありません。
PNG形式を複数サイズ指定する場合
ico形式を使わず、PNG形式を用途別に指定することもできます。sizes属性で各画像のサイズを明示します。
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">SVG形式を併用する場合
SVG形式のfaviconを使う場合は、type="image/svg+xml"を付けて指定し、必ずico形式などのフォールバックを併記します。対応ブラウザはSVGを、非対応ブラウザはicoを使います。
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" type="image/svg+xml" href="/icon.svg"><link rel="apple-touch-icon" href="/apple-touch-icon.png">この3行の組み合わせは、現在もっとも推奨されている設置パターンの1つです。これにWeb App Manifestを追加すれば、主要な環境をすべてカバーできます。
ダークモードに対応させる方法
OSやブラウザのダークモード設定に応じてfaviconの見え方を変える方法は、大きく2通りあります。
方法1：linkタグのmedia属性で画像を出し分ける
ライトモード用とダークモード用の2枚の画像を用意し、linkタグのmedia属性でどちらを使うかを指定します。ブラウザがprefers-color-schemeを判定して、該当するほうを表示します。
<link rel="icon" href="/light.png" media="(prefers-color-scheme: light)"><link rel="icon" href="/dark.png" media="(prefers-color-scheme: dark)">この方法はPNGやicoでも使えるため、SVGに対応していないブラウザでもダークモード対応が可能です。ただし、media属性の判定に対応していないブラウザもあるため、通常の<link rel="icon">も併記しておくと安全です。
方法2：SVGの中にprefers-color-schemeを埋め込む
SVG形式のfaviconを使っている場合は、SVGファイルの内部に<style>タグでCSSを記述し、@media (prefers-color-scheme: dark)で色を切り替えられます。ファイルは1つで済み、色の変更もCSSで柔軟に行えます。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> path { fill: #222222; } @media (prefers-color-scheme: dark) {path { fill: #ffffff; } } </style> <path d="..." /></svg>ただしこの方法は、SVG faviconに対応したブラウザでしか機能しません。非対応ブラウザにはフォールバックのico・PNGが表示されることを前提に、どちらの背景でも判別できるデザインにしておきましょう。
Web App Manifestでスマートフォン・PWA用アイコンを指定する
Android・PWA向けのアイコンは、Web App Manifest（manifest.jsonまたはsite.webmanifest）というJSONファイルで指定します。HTMLからはrel="manifest"でファイルを参照し、manifestファイルのiconsに192×192pxと512×512pxのPNGを指定します。
<link rel="manifest" href="/site.webmanifest">{ "name": "サイト名", "short_name": "略称", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone"}すべてを組み合わせた推奨コード例
ここまでの内容をまとめると、現在の推奨構成は次のようになります。この構成であれば、ブラウザのタブ・iPhoneのホーム画面・Android・PWA・Googleの検索結果をすべてカバーできます。
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" type="image/svg+xml" href="/icon.svg"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest">WordPressでの設定方法
WordPressでは、HTMLを直接編集しなくても、管理画面から「サイトアイコン」としてfaviconを設定できます。1枚の画像をアップロードするだけで、ブラウザ用・apple-touch-icon用など複数サイズのアイコンとlinkタグが自動的に出力されるため、多くの場合はこの方法で十分です。
クラシックテーマの場合：カスタマイザーから設定する
- WordPress管理画面の左メニューから「外観」→「カスタマイズ」を開く
- カスタマイザーの左側メニューから「サイト基本情報」を選択する
- 「サイトアイコン」の項目にある「サイトアイコンを選択」をクリックする
- メディアライブラリから画像を選択、または新しい画像をアップロードする
- 必要に応じて正方形に切り抜き、「公開」をクリックして保存する
アップロードする画像は、512×512px以上の正方形を推奨します。WordPressの画面上でも「サイトアイコンは512×512ピクセル以上の正方形にしてください」と案内されます。正方形でない画像をアップロードした場合は、切り抜き画面で正方形に切り抜いてください。
設定が完了すると、WordPressがサイトの<head>内に、32×32pxと192×192pxのicon、180×180pxのapple-touch-icon、Windowsタイル用のタグを自動的に出力します。
ブロックテーマの場合：設定場所が異なる
Twenty Twenty-Two以降のブロックテーマ（フルサイト編集対応テーマ）を使っている場合、「外観」メニューに「カスタマイズ」が表示されないことがあります。ブロックテーマでは、サイトアイコンの設定場所が異なりますので注意してください。
- 「外観」→「エディター」でサイトエディターを開き、左側パネルの「スタイル」または「設定」からサイトアイコンの項目を探す（WordPressのバージョンによって表示位置が変わります）
- または、サイトエディター内で「サイトロゴ」ブロックを選択し、ブロック設定の「サイトアイコンとして使用する」をオンにする
- 管理画面のURLに直接「/wp-admin/customize.php」を入力すると、ブロックテーマでもカスタマイザーを開ける場合があります
設定場所は1か所に統一する
SEO系のプラグインや一部のテーマには、独自のfavicon設定機能が用意されていることがあります。複数の場所で異なるfaviconを設定すると、linkタグが重複して出力され、意図しないほうが表示される原因になります。設定場所は1か所に統一し、他の設定は空にしておきましょう。
SVGやダークモード対応など、サイトアイコン機能では対応できない設定を行いたい場合は、子テーマのheader.phpやfunctions.phpからlinkタグを出力します。この場合も、サイトアイコン機能による自動出力と重複しないよう注意してください。
faviconが表示されない・変わらないときの原因と対処法
faviconを設定したのに表示されない、変更したのに古いアイコンのまま変わらない、というトラブルは非常によくあります。原因は大きく「ブラウザのキャッシュ」「ファイルやパスの問題」「形式・サイズの不備」「Google側の反映待ち」の4つに分けられます。
原因1：ブラウザのキャッシュが残っている
もっとも多い原因がブラウザのキャッシュです。ブラウザはfaviconを一度取得すると長期間キャッシュし、その後はサーバーに問い合わせずキャッシュを表示し続けます。特にChromeは、faviconを通常のページキャッシュとは別に、ブラウザ内部のデータベースに保存しています。そのため、通常のキャッシュクリアやスーパーリロードでは古いfaviconが消えないことがあります。
切り分けとしては、まずシークレットウィンドウ（プライベートブラウジング）でサイトを開いてみてください。そこで新しいfaviconが表示されれば、サーバー側の設定は正しく、原因はブラウザのキャッシュだと判断できます。対処法は次のとおりです。
- ブラウザの設定から「キャッシュされた画像とファイル」を削除する
- linkタグのURLに「?v=2」のようなクエリパラメータを付けて別URLとして認識させる（Google向けには頻繫なURL変更は避けたいため、一時的な確認手段として使う）
- Chromeの場合、faviconのURLに直接アクセスしてリロードするとキャッシュが更新される場合がある
なお、自分の環境だけキャッシュが残っていても、新規訪問者には新しいfaviconが表示されています。あまり神経質になる必要はありません。
原因2：画像のURL・パスが間違っている
シークレットウィンドウでも表示されない場合は、ファイルの場所やパスの問題を疑います。linkタグに記述したURLをアドレスバーに直接入力し、画像が表示されるかを確認してください。404エラーになる場合は、以下を確認します。
- ファイルが指定した場所に正しくアップロードされているか
- ファイル名の大文字・小文字、拡張子（.ico / .png）が一致しているか
- パスの指定が正しいか（サブディレクトリのページでも正しく参照できるよう、「/favicon.ico」のようにルートからの絶対パスで書くのが安全です）
- httpsのサイトでhttpのURLを指定していないか
- robots.txtや.htaccessで画像ディレクトリへのアクセスを制限していないか
原因3：ファイル形式・サイズが不適切
画像自体にはアクセスできるのに表示されない場合は、形式やサイズの問題が考えられます。
- 拡張子を「.ico」にリネームしただけのPNGファイルになっていないか（正しいico形式に変換する必要があります）
- 正方形になっているか（長方形の画像は表示されなかったり、つぶれて表示されたりします）
- SVGだけを設置し、非対応ブラウザ用のフォールバックがないか
- apple-touch-iconに透過PNGを使っていて、透過部分が黒く表示されていないか
- ファイルサイズが極端に大きくないか
原因4：Googleの検索結果にだけ表示されない
ブラウザでは表示されているのに、Googleの検索結果にはfaviconが表示されない、または古いfaviconのまま、というケースもよくあります。Googleはfaviconを頻繫にはクロールしないため、変更が反映されるまでに数日から数週間かかるのが通常です。まずは前述の要件（正方形・対応形式・ホームページに設置・GooglebotとGooglebot-Imageがアクセス可能）を満たしているかを確認し、そのうえで待つ必要があります。
反映を早めたい場合は、Google Search Consoleの「URL検査」ツールでホームページ（トップページ）のURLを検査し、「インデックス登録をリクエスト」を実行してください。再クロールが促され、faviconの更新が反映されやすくなります。また、Googleが「不適切」あるいは「ユーザーを誤解させる」と判断したfaviconはデフォルトのアイコンに置き換えられるため、汎用的なアイコンや他社のロゴに似たものを使っていないかも確認しましょう。
faviconが表示されないときは、「シークレットウィンドウで確認→画像URLに直接アクセス→形式・サイズを確認→Google側は待つ・再クロール依頼」の順で切り分けると、効率よく原因を特定できます。
よくある質問（FAQ）
Q1. faviconはSEOの検索順位に直接影響しますか？
いいえ、faviconは直接の検索順位要因ではありません。ただし、Googleの検索結果にfaviconが表示されることで視認性が高まり、クリック率（CTR）の向上を通じて間接的にSEOへ寄与する場合があります。順位を上げる施策ではなく、検索結果での見え方とブランド認知を高める施策と捉えてください。
Q2. faviconのサイズは何pxにすべきですか？
用途によって異なります。ブラウザのタブ用には16×16px・32×32px（icoには48×48pxも同梱）、iPhoneのホーム画面用（apple-touch-icon）には180×180px、Android・PWA用には192×192pxと512×512pxが標準です。Googleの検索結果向けには、2024年10月の改訂以降「正方形（1:1）・最小8×8px・48×48pxより大きいサイズを推奨」となっており、以前の「48pxの倍数」という制約はなくなりました。
Q3. ico・PNG・SVGのどれを使うべきですか？
互換性を確保するために、favicon.ico（複数サイズ同梱）は必ず用意しましょう。PNGはapple-touch-iconやWeb App Manifest用に必要です。SVGは高解像度・ダークモード対応が可能で便利ですが、ブラウザ対応率は約74%にとどまるため、単独で使わず、必ずicoまたはPNGのフォールバックと併用してください。
Q4. WordPressでfaviconを設定する方法は？
管理画面の「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」から、512×512px以上の正方形画像をアップロードします。1枚アップロードするだけで、各サイズのアイコンとlinkタグが自動的に出力されます。ブロックテーマ（フルサイト編集対応テーマ）では「カスタマイズ」メニューが表示されない場合があり、サイトエディター内の設定やサイトロゴブロックから設定する点に注意してください。
Q5. faviconを変更したのに反映されないのはなぜですか？
多くの場合、ブラウザのキャッシュが原因です。特にChromeはfaviconをブラウザ内部のデータベースに別途キャッシュしているため、通常のリロードでは更新されません。まずシークレットウィンドウで確認し、新しいfaviconが表示されればサーバー側の設定は正常です。表示されない場合は、画像のURL・パスの誤りや、ファイル形式・サイズの不備を確認してください。
Q6. Googleの検索結果にfaviconが表示されないのはなぜですか？
主な原因は、要件を満たしていないか、まだGoogleに反映されていないかのどちらかです。正方形であること、対応形式（BMP・GIF・ICO・PNG・JPEG・PPM・TIFF）であること、ホームページにlinkタグが設置されていること、GooglebotとGooglebot-Imageの両方がfaviconとホームページにアクセスできることを確認してください。要件を満たしていても反映には数日から数週間かかるため、Search Consoleの「URL検査」からホームページの再クロールをリクエストして待ちましょう。
Q7. ダークモードでfaviconの見え方を変えられますか？
はい、2つの方法があります。1つは、linkタグにmedia="(prefers-color-scheme: dark)"を指定して、ダークモード用の別画像を出し分ける方法です。もう1つは、SVG形式のfavicon内部にCSSの@media (prefers-color-scheme: dark)を埋め込み、1つのファイルで色を切り替える方法です。後者はSVG対応ブラウザでのみ機能するため、フォールバックのico・PNGも用意しておきましょう。
まとめ
favicon（ファビコン）は、ブラウザのタブ・ブックマーク・スマートフォンのホーム画面・Googleの検索結果など、ユーザーがサイトに触れるあらゆる場面で表示される、サイトの「顔」となる小さなアイコンです。検索順位を直接左右する要素ではありませんが、サイトの見つけやすさやブランド認知、検索結果でのクリック率に影響する場合があり、手軽に取り組める施策として価値があります。
この記事のポイントを振り返ります。
- faviconは直接の順位要因ではないが、検索結果での視認性向上を通じてCTRに寄与する場合がある
- 推奨構成は「favicon.ico（16・32・48px同梱）＋SVG（任意）＋apple-touch-icon 180px＋Manifest用PNG 192・512px」
- SVGはブラウザ対応率約74%のため、単独では使わずico・PNGのフォールバックを必ず併記する
- Google検索結果の要件は2024年10月24日に改訂され、「48pxの倍数」は撤回。現行は「正方形・最小8×8px・48×48pxより大きいサイズを推奨」
- Googleに認識させるには、ホームページへの設置と、Googlebot・Googlebot-Imageの双方がアクセスできることが必要
- WordPressは「外観→カスタマイズ→サイト基本情報→サイトアイコン」から512×512px以上の正方形で設定。ブロックテーマは設定場所が異なる
- 表示されないときは「シークレットウィンドウ→画像URL→形式・サイズ→Google側は待つ・再クロール依頼」の順で切り分ける
すでにfaviconを設定しているサイトでも、apple-touch-iconやManifest用のアイコンが未設定だったり、古い「48の倍数」ルールのまま運用していたりするケースは少なくありません。この機会に自社サイトのfaviconの設定状況を見直し、すべての表示場所で意図どおりのアイコンが表示されているかを確認してみてください。