変更したのに古い画像が見えると、画像作成に失敗したと思ってしまいます。でも原因は画像だけとは限りません。ブラウザが前の画像を覚えている場合、HTMLが別の画像を見ている場合、PC内だけ変わって公開サーバーが古い場合があります。
この記事で分かること
- キャッシュとは何か
- 古い画像や間違ったパスの見つけ方
- アップロード漏れの確認方法
- PCとスマホで表示が違うときの候補
- Google検索だけ古いときの考え方
- 上から順番に確認するチェックリスト
01
まず慌てずに確認する
設定ミスだけが原因とは限りません。最初に「PC内の画像」「公開サーバーの画像」「ブラウザに見えている画像」「Google検索の画像」を別のものとして考えます。
どの場所まで新しくなっているかを分けると、直す場所が見つけやすくなります。
02
原因1 ブラウザキャッシュ
原因
キャッシュは、前に表示した画像などをブラウザが一時的に覚えておく仕組みです。毎回すべてを読み直さず、ページを速く表示するために使われます。
確認方法
HTMLと公開サーバーの画像が新しいのに、いつものブラウザだけ古い画像なら、キャッシュの可能性があります。
対処
まず再読み込みを試します。それでも変わらなければ、新しいタブ、プライベートブラウズ、別のブラウザなど、古い記憶の影響を受けにくい方法で同じURLを確認します。
03
再読み込みしても変わらない場合
通常の再読み込みだけでは、ファビコンの古いキャッシュが残ることがあります。何度も連続で押す前に、公開されている画像URLを直接開き、その画像自体が新しいかを確認します。
画像URLを直接開く → 別のブラウザで開く → HTMLの参照先を確認する、の順に進むと、キャッシュか設定かを分けやすくなります。
04
原因2 古いファビコン画像を参照している
原因
新しい画像を保存しても、HTMLのhrefが旧画像のままだと、ブラウザは古いファイルを読み込みます。
確認方法
HTMLのrel="icon"を検索し、hrefの最後に書かれたファイル名を確認します。
対処
使う画像を一つ決め、実際の保存場所と同じ画像パスへ直します。複数のrel="icon"がある場合は、全部の参照先を確認します。
05
原因3 ファイル名は同じだが画像が古い
原因
同じfavicon.pngを新しい画像へ差し替えても、ブラウザや途中の仕組みが同じURLを古い画像として覚えている場合があります。
確認方法
PC側とサーバー側で更新日時やファイルサイズを比べ、画像URLを直接開きます。
対処
正しく上書きしたうえでキャッシュを確認します。切り分けのため一時的にfavicon-new.pngなどへ変える方法もありますが、favicon-v2、v3、v4と無制限に増やすと管理しにくくなります。原因が分かったら、使うファイルを整理します。
06
原因4 保存場所とHTMLのパスが違う
原因
画像はassets/images/common/にあるのに、HTMLがimages/を見ているなど、保存場所と画像パスがずれている状態です。
確認方法
実際の保存場所:assets/images/common/favicon-32.png
HTMLのhref: ../assets/images/common/favicon-32.pngarticles内のHTMLでは、先頭の../で1つ上へ戻る必要があります。
対処
ファイルをむやみに移動せず、現在のHTMLの場所から画像までを順番にたどり、正しいhrefへ合わせます。
07
原因5 拡張子が違う
原因
拡張子は、ファイル名の最後にある.png、.ico、.jpgなどの部分です。実物がPNGなのにHTMLへICOと書けば、別のファイルを探してしまいます。
確認と対処
エクスプローラーで拡張子を表示し、実際のファイル名とhrefを一文字ずつ比べます。名前だけ変えてPNGをICOにすることはできないため、正しい形式で保存します。
08
原因6 大文字・小文字
原因
WindowsのPC内では同じように見えても、サーバー上ではFavicon.pngとfavicon.pngを別の名前として扱う場合があります。
確認と対処
ファイル名、フォルダ名、HTMLのhrefで大文字・小文字まで一致させます。今後迷わないよう、半角小文字にそろえると管理しやすくなります。
09
原因7 サーバーへアップロードしていない
原因
PC内だけ新しくなり、公開サーバーに古いHTMLや画像が残っている状態です。
確認方法
FFFTPの左側(PC)と右側(サーバー)で、ファイル名、更新日時、ファイルサイズ、フォルダ位置を比べます。
対処
変更したHTMLとファビコン画像を、それぞれ同じ公開用フォルダへアップロードします。詳しい画面操作はFFFTPアップロード方法で確認できます。
10
原因8 PCとスマホで違う画像を参照している
今回AIはじめノートでも、PC版とスマホ版の表示差を確認する必要がありました。表示が違うときは、次を確認候補にします。
- PC用とスマホ用に別画像がある
pictureやsourceで画像を切り替えているsrcsetに複数画像が書かれている- CSSの
background-imageで別画像を指定している - メディアクエリで表示を切り替えている
- 端末側に古い画像参照やキャッシュが残っている
これらは表示差がある場合の確認候補です。ファビコンのlinkとは別に、ヘッダーのロゴ画像などが切り替わって見えている場合もあります。
11
ブラウザでは変わったのにGoogle検索だけ古い
Google検索結果のファビコンは、変更後すぐに切り替わらない場合があります。Googleがホームページを再クロールし、新しい情報を処理する時間が必要だからです。
Google公式は、クロールに数日から数週間かかる場合があると案内しています。ただし「何日で必ず変わる」とは決められません。ブラウザ表示が新しくても、検索結果だけ古いという状態を分けて考えます。
12
Google検索結果のファビコンについて
2026年9月9日にGoogle検索セントラル公式のファビコン案内を確認しました。検索結果で表示対象になるための主な条件は次のとおりです。
- 正方形(縦横比1:1)で、8×8px以上
- さまざまな場所で見やすいよう、48×48pxより大きい画像が推奨
- ファビコン画像とホームページをGoogleがクロールできる
- サイトのブランドを視覚的に表す画像にする
- ファビコンのURLを頻繁に変更しない
現在Google検索が対応すると明記している形式は、BMP、GIF、ICO、PNG、JPEG、PPM、TIFFです。ブラウザ向けのSVG説明と、Google検索結果で現在明記されている対応形式は分けて考えます。
Google公式にも、ガイドラインをすべて満たしていても検索結果にファビコンが表示される保証はない、と書かれています。
13
Search Consoleとの関係
Search Consoleは、Google検索での登録状況などを確認するためのGoogle公式ツールです。ファビコンを変更した後、ホームページのURL検査からインデックス登録をリクエストし、再クロールを促すことができます。
ただし、リクエストは即時反映を保証するボタンではありません。同じURLを何度も送っても早くなるわけではないとGoogle公式は案内しています。登録や見方はGoogle Search Consoleの見方で確認します。
14
よくある勘違い
Q. ファビコンを設定すると検索順位が上がる?
ファビコンは検索順位を直接上げるためのものではありません。検索結果やタブでサイトを見分けやすくし、見た目を整える役割があります。
Q. ロゴをそのまま使えばいい?
使うことはできますが、小さくして文字や形が見えるかを確認します。文字付きロゴより、シンボルだけが向く場合があります。
Q. 画像を作れば自動で表示される?
画像を置いただけでは表示されない場合があります。HTMLのheadで画像の保存場所を参照する設定が必要です。
Q. Google検索もすぐ変わる?
再クロールと処理に時間がかかる場合があります。すぐ変わる時間を断定することはできません。
Q. 背景透過でないとダメ?
背景透過は必須ではありません。白い場所でも暗い場所でもシンボルが分かるかを確認することが大切です。
15
ファビコンが変わらないときの確認順番
- 新しい画像か:PC内の画像を単体で開く
- ファイル名:拡張子と大文字・小文字も見る
- 保存場所:使うフォルダにあるか確認
- HTMLのhref:実際の画像へたどれるか確認
- アップロード:サーバー側のHTMLと画像を確認
- ブラウザキャッシュ:別の開き方でも見る
- PC・スマホ:どちらだけ古いのか分ける
- Google検索:ブラウザは新しく、検索結果だけ古いのか確認
16
最終チェックリスト
- □ 正しい画像を使用している
- □ ファイル名が一致している
- □ 保存場所が正しい
- □ HTMLのパスが正しい
- □ サーバーへアップロード済み
- □ キャッシュを確認した
- □ PCで確認した
- □ スマホで確認した
- □ Google検索の反映には時間がかかる場合があると理解した
17
AIはじめノートで今回分かったこと
大きなロゴで良く見えても、ファビコンでは細かすぎる場合があることが分かりました。そのため、シンボルをもっとシンプルにする必要がありました。
シンボルの中にあった小さな2つの点も、縮小すると「目」のように見え、印象に影響しました。ほんの小さな部分でも確認が必要でした。
また、PCとスマホで表示が違う場合は、画像そのものだけでなく、実際にどのファイルを参照しているのかを見る必要があります。「直してください」と頼むだけではなく、何を参照しているかを先に確認することが大切だと分かりました。
18
最後のまとめ
ファビコンは小さな画像ですが、作成、保存、HTML、アップロード、キャッシュ、Google検索と、確認する場所がいくつかあります。最初は全部が一つの問題に見えました。
最初から全部覚えなくても、画像 → 保存場所 → HTML → アップロード → 表示確認の順番で、一つずつ確認すれば大丈夫です。
SOURCE
2026年9月9日に確認した公式情報
RELATED
