Skip to content
さきどりふぁくとり~
  • Webマーケティング
  • WordPress
  • SEO
  • YouTube
  • お問い合わせ
  • 求人情報

WordPressで設定したファビコンが変わらないときに試すこと3つ【Chrome編】

更新日:2021年9月15日
  • WordPressで設定したはずのファビコンが変わらない
上記のような悩みを抱えていますか? この記事ではWordPressで設定したはずのファビコンが変わらないときにどうすれば良いのか原因の特定方法を解説します。 この記事を読むことで、一般的なファビコンが何故変わらないのかが理解でき、対応方法の検討が行えるようになります。

目次

  • 1 WordPressで設定したファビコンが変わらないときに試すこと3つ
  • 2 1.ブラウザのキャッシュが古いままになっている
  • 3 解決策
    • 3.1 1.異なるファイル名でセットアップし直して更新する
    • 3.2 2.ブラウザをスーパーリロードする
  • 4 2.ファイルのリンクが間違っている
  • 5 解決策
  • 6 3.サーバー側でキャッシュしていてそのキャッシュがクリアされていない
  • 7 解決策

WordPressで設定したファビコンが変わらないときに試すこと3つ

設定したファビコンが変わらない場合、以下の3つを一つずつ確認していくとどれかに当てはまることが多いです。
  1. ブラウザのキャッシュが古いままになっている
  2. ファイルのリンクが間違っている
  3. サーバー側でキャッシュしていてそのキャッシュがクリアされていない

1.ブラウザのキャッシュが古いままになっている

最も多いのがWEBブラウザが古いものを読み込み続けているパターンです。
  1. 一度ダウンロードしたファイルをブラウザは通信量を減らすためにPC内に保存する
  2. 次回同様のデータの表示を要求された時、新しいファイルよりも前に今PC内に保存されている同一のファイルが無いか確認しに行く
  3. 確認の結果同一のファイルが有った場合、そのファイルを取得しサーバーからのファイルのダウンロードは行わない
ブラウザは上記のような順序で可能な限り表示を高速化するようにプログラムされています。 そのため古いデータが読み込まれ続けてしまい、新しいデータに変わらないということが起きるわけですね。

解決策

解決策は2つあります。
  1. 異なるファイル名でセットアップし直して更新する
  2. ブラウザをスーパーリロードする

1.異なるファイル名でセットアップし直して更新する

先程のブラウザの動作を思い出してください。 ブラウザは同じファイルがあるとキャッシュされた画像を読みに行きますが、 異なるファイル名の場合は新しくファイルをダウンロードして表示します。 そのため、ファイル名を変更し、ファビコンファイルへのリンクもすべて新しい別の名前のものに修正することで新規に読み込むことが出来、キャッシュの影響を受けなくなります。

2.ブラウザをスーパーリロードする

2つ目はブラウザをスーパーリロードする方法です。 スーパーリロードとはブラウザのキャッシュを無視してすべてサーバーに問い合わせを行うという再読み込みの方法です。 更新ボタンを押しただけでは通常のリロードとなってしまうので、 Ctrl+F5キー を押すことでブラウザがスーパーリロードを行います。

2.ファイルのリンクが間違っている

キャッシュのスーパーリロードを行っても全く変化しない場合はそもそもファイルへのリンクが間違っていないかを疑いましょう。

解決策

この問題を解決するにはブラウザの検証ツールを利用します。 問題が起こっている画面でF12キーまたは画面上で右クリックして「検証」をクリックしましょう。 そうすると以下の画像のようなウィンドウが出てくると思います。 検証ツールはHTMLのソースコードがどのようになっていて実際に読み込まれている画像がなにかを特定するのに役に立ちます。 ファビコンの設定はタグに記述されていますのでタグの中から該当のHTMLコードを探します。 Elementsからを探して▶をクリックして開きましょう。 以下の画像のようにタグでrel=”icon”となっている項目を探します。 ファビコンは各ブラウザによってサイズが異なります。 以下を参考に現在表示できていないファビコンを特定します。
  • 16×16(IEブラウザ)
  • 32×32(その他ブラウザ)
  • 64×64(Windowsデスクトップ)
  • 180×180(iPhone&iPad)
  • 256×256(Android)
Chromeでは32×32なのでそのURLをコピーします。 以下の画像のものが該当の箇所ですね。 その行を左クリックで選択した状態で右クリックすると「Edit as HTML」というのがありますのでクリックしましょう。 編集モードに切り替わったら、URLをコピーしましょう。 コピーしたらブラウザに貼り付けてエンターキーを押します。 更新したファビコンファイルが表示されれば画像は読み込まれているということで別の問題だと切り分けが出来ます。 正常に表示できない場合は画像のURLが間違っているということになりますね。

3.サーバー側でキャッシュしていてそのキャッシュがクリアされていない

1で説明したキャッシュというものですが、PCに限った話では無いのです。 画像データなどの大きいデータはサーバー側でもキャッシュしていることがあるのです。 これは実際にWEBページを同時刻に多数の人が表示しようとした場合に、単体のサーバでは力不足となってしまうことがあり、 データのコピーを持ったサーバーを配置して受け入れを高速化するという仕組みで解決しようとしているのです。 このデータのコピーを持ったサーバーのことをキャッシュサーバーと呼びます。 キャッシュサーバーは定期的にWEBページを構成するファイルをキャッシュしており、ユーザーがWEBページを表示しようとした時、 キャッシュサーバーが応答を返すということがあります。 この場合、もしキャッシュサーバーがWEBページの古いデータを持っており、最新ファイルを持っていなかったらユーザーは古いファイルを提供されてしまうというわけですね。

解決策

残念ながら自分で管理していないキャッシュサーバーをどうにかして最新のデータにするということは出来ないのです。 もしこのような状況になったら少しの間待つしか無く、キャッシュサーバーが新しいデータをコピーして蓄えたらユーザーは新しいファイルを表示できるようになります。 待ちましょう。 以上の解決手段で大抵のアイコンが表示されない問題は解決できるはずです。 サーバー等の知識は難しいかもしれませんが、知っておくとよりWEBサイトが表示される仕組みに詳しくなれるので楽しくなりますよ! 良いWordPressライフを応援しています!

カテゴリー

  • AWS (3)
  • SEO (50)
  • SNS (16)
    • Facebook (7)
  • Webマーケティング (38)
  • WordPress (62)
  • YouTube (43)
  • プライバシー・ポリシー (1)
  • 未分類 (2)

プロフィール

ブログ運営・執筆または監修:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

代表取締役:生田 寿行

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

目次

  • 1 WordPressで設定したファビコンが変わらないときに試すこと3つ
  • 2 1.ブラウザのキャッシュが古いままになっている
  • 3 解決策
    • 3.1 1.異なるファイル名でセットアップし直して更新する
    • 3.2 2.ブラウザをスーパーリロードする
  • 4 2.ファイルのリンクが間違っている
  • 5 解決策
  • 6 3.サーバー側でキャッシュしていてそのキャッシュがクリアされていない
  • 7 解決策
© 2023 さきどりふぁくとり~