ファビコン（ブラウザのタブや検索結果でサイト名の横に出る小さなアイコン）を設定したのに、表示されない。あるいは古いアイコンのまま変わらない。この記事はその場面に向けて書いています。
先に結論です。「表示されない」には、場所が3つあります。①ブラウザのタブ、②Googleの検索結果、③スマホのホーム画面に追加したアイコン。それぞれ見ているファイルも、反映までの時間も違います。どこで表示されないのかを先に切り分けると、直す場所がすぐ決まります。
まず「どこで」表示されないかを切り分ける
表示されない場所 | 主な原因 | 反映までの目安 |
|---|---|---|
ブラウザのタブ | <link>タグの書き忘れ・パス違い、ブラウザが古いアイコンを覚えている | 設定が正しければ、キャッシュを消せばすぐ |
Googleの検索結果 | Googleのガイドライン（正方形・8×8px以上・ホームページに設定 等）を満たしていない、まだ再クロールされていない | 数日〜数週間（Googleの再クロール待ち） |
スマホのホーム画面 | apple-touch-iconなど、ホーム画面用のアイコンを指定していない | 追加し直せば反映 |
自分のパソコンだけ古いアイコンのまま、という場合は、サイト側ではなくブラウザ側の問題であることがほとんどです。
ブラウザのタブに出ないときの確認3つ
- <head>に<link>タグがあるか：ページのソースを表示して、
<link rel="icon" href="/favicon.ico">のような行があるかを探します。無ければ、ブラウザはサイト直下の/favicon.icoを探しにいくだけです - hrefのファイルが本当に開けるか：hrefに書かれたURLをブラウザのアドレス欄に直接入れて開きます。404（見つかりません）になるなら、アップロード先かファイル名が違っています。大文字・小文字の違いでも別のファイルになるサーバーがあります
- ブラウザが古いアイコンを覚えていないか：ブラウザはファビコンを長く覚えておくことがあり、ページを再読み込みしても変わらないことがあります。シークレットウィンドウで開いて新しいアイコンが出れば、サイトの設定は正しく、自分のブラウザの記憶が残っているだけです
3つ目は、ファビコンに限らず「更新したのに古いまま」の典型です。ブラウザ・サーバー・CDNのどこに古い内容が残っているかの見分け方はホームページ更新したのに古いまま｜キャッシュ4層の見分け方でまとめています。
Googleの検索結果に出ないときは、ガイドラインを満たしているか
検索結果のファビコンは、Googleが独自に取得して表示しています。Google検索セントラルのファビコンのガイドラインに書かれている条件を、つまずきやすい順に並べると次のとおりです。
条件（Googleのガイドライン） | よくあるつまずき |
|---|---|
ホームページ（トップページ）のヘッダーに<link>タグがある | 下層ページにだけ書いていて、トップページに無い |
ファビコンは1サイト（ホスト名）につき1つ。サブディレクトリ（example.com/news）には別のファビコンを設定できない | サイトの一部をサブディレクトリで運用していて、そこだけ別のアイコンにしようとしている |
画像用Googlebotがファビコンを、Googlebotがホームページをクロールできる | robots.txtで画像フォルダやファビコンのパスをブロックしている |
正方形（縦横比1:1）で8×8px以上。48×48pxより大きいものを推奨 | 横長のロゴをそのまま使っている |
対応形式はBMP、GIF、ICO、PNG、JPEG、PPM、TIFF | 対応形式の一覧にないSVGだけを指定している |
ファビコンのURLを頻繁に変えない | 更新のたびにファイル名を変えている |
サイトのブランドを表す図柄で、不適切な表現を含まない | （不適切と判断されるとデフォルトのアイコンに置き換えられる） |
ガイドラインには、すべての条件を満たしていても検索結果に表示されるとは限らない、とも書かれています。またGoogleがホームページを再クロールするまでに数日から数週間かかることがあります。急ぐときは、Search ConsoleのURL検査ツールでトップページのインデックス登録をリクエストできます（同ガイドライン）。設定を直した直後に検索結果が変わらないのは、多くの場合この再クロール待ちです。検索結果に更新が反映されるまでの流れ全体はサイト更新が検索結果に反映されない｜原因3つと早める手順で扱っています。
スマホのホーム画面に追加したアイコンが変なとき
iPhoneで「ホーム画面に追加」したときのアイコンは、ブラウザのタブ用とは別にapple-touch-iconで指定します。Googleもファビコン用のrel属性としてicon・shortcut iconに加えてapple-touch-iconとapple-touch-icon-precomposedを挙げています。指定が無いと、ページの縮小画像や文字だけのアイコンになることがあります。なお、すでにホーム画面に追加したアイコンは、ファビコンを直しても自動では変わりません。一度削除して追加し直してください。
サイト作成サービスやWordPressの場合
WordPress、Wix、STUDIOなどのサービスでは、<link>タグを自分で書く代わりに、管理画面の「サイトアイコン」「ファビコン」の設定欄から画像を登録します。設定欄から登録したのに出ない場合は、上の表のうち「正方形か」「サイズは足りているか」を確認し、そのうえで再クロールを待ちます。テーマやプラグインが別のファビコンを出力していて、設定欄の画像が上書きされていることもあるので、ページのソースで<link rel="icon">が何本出ているかも見ておくと確実です。
ファビコンが出ないのは「サイトの基本設定」の点検のサイン
ファビコンは小さな部品ですが、表示されない原因をたどると、robots.txtでのブロック、トップページのヘッダーの不備、ブラウザやCDNのキャッシュなど、サイト全体に効いている設定に行き着くことがよくあります。1つ直したついでに、検索結果の見え方（サイト名・タイトル）まで一度点検しておくと安心です。
私たちMihataは、中小企業のホームページ制作と、こうした公開後の細かな設定の手直しもお引き受けしています。記事の途中で恐縮ですが、よろしければ合わせてご覧いただけたら嬉しいです。
まとめ
- 「表示されない」はタブ・検索結果・ホーム画面の3か所で原因が違う。まず場所を切り分ける
- タブは<link>タグとファイルの存在、ブラウザの記憶をシークレットウィンドウで確認
- 検索結果はGoogleのガイドライン（トップページ・正方形8×8px以上・クロール可能・URL固定）を満たし、再クロールを待つ。急ぐならURL検査でインデックス登録をリクエスト
- ホーム画面のアイコンはapple-touch-iconで指定し、追加し直す
よくある質問
ファビコンを設定したのに検索結果に表示されません。
Googleがホームページを再クロールするまで、数日から数週間かかることがあります。あわせて、トップページのヘッダーにlinkタグがあるか、正方形で8×8ピクセル以上か、ファビコンとトップページがrobots.txtでブロックされていないかを確認してください。急ぐときはSearch ConsoleのURL検査ツールでトップページのインデックス登録をリクエストできます。条件をすべて満たしても必ず表示されるとは限らないと、Googleのガイドラインに書かれています。
自分のパソコンだけ古いファビコンのままです。
ブラウザが古いアイコンを覚えている可能性が高いです。シークレットウィンドウで開いて新しいアイコンが出るなら、サイトの設定は正しく、ブラウザ側の記憶が残っているだけです。
ページごとに違うファビコンを検索結果に出せますか。
できません。Google検索でサポートされるファビコンは1サイト（ホスト名）につき1つです。サブドメインなら別のファビコンを設定できますが、サブディレクトリはメインのサイトと同じファビコンになります。
SVGのファビコンは検索結果に使われますか。
Googleのガイドラインで検索結果向けに挙げられている形式は、BMP、GIF、ICO、PNG、JPEG、PPM、TIFFです。SVGは一覧にないため、検索結果用にはPNGやICOも用意しておくのが確実です。