WordPressで設定したファビコンが変わらないときに試すこと3つ【Chrome編】
- WordPressで設定したはずのファビコンが変わらない
目次
WordPressで設定したファビコンが変わらないときに試すこと3つ
設定したファビコンが変わらない場合、以下の3つを一つずつ確認していくとどれかに当てはまることが多いです。- ブラウザのキャッシュが古いままになっている
- ファイルのリンクが間違っている
- サーバー側でキャッシュしていてそのキャッシュがクリアされていない
1.ブラウザのキャッシュが古いままになっている
最も多いのがWEBブラウザが古いものを読み込み続けているパターンです。- 一度ダウンロードしたファイルをブラウザは通信量を減らすためにPC内に保存する
- 次回同様のデータの表示を要求された時、新しいファイルよりも前に今PC内に保存されている同一のファイルが無いか確認しに行く
- 確認の結果同一のファイルが有った場合、そのファイルを取得しサーバーからのファイルのダウンロードは行わない
解決策
解決策は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）
その行を左クリックで選択した状態で右クリックすると「Edit as HTML」というのがありますのでクリックしましょう。
編集モードに切り替わったら、URLをコピーしましょう。
コピーしたらブラウザに貼り付けてエンターキーを押します。
更新したファビコンファイルが表示されれば画像は読み込まれているということで別の問題だと切り分けが出来ます。
正常に表示できない場合は画像のURLが間違っているということになりますね。
