初心者の為のWEB開発

ファビコンが変わらない4つの原因と解決方法【WordPress】

※当サイトはPR(プロモーション)を含みます。

WordPress ファビコンが変わらない時の解決方法 初心者の為のWEB開発
  • WordPressでファビコン設定したんだけど、全然変わらない!
  • ファビコンを変更したんだけど、変更されない・・・
ファズ
ファズ

今回はこんなお悩みを解決できるように助力記事を書かせてもらおうと思います。

ファビコンは自身のサイトを一目で判断でき、目印としての役割があります。

が、これが意外と結構曲者で、「ファビコンを変更しようとした時」に多く発生するのが「変わらない」というもの。

これには4つほど原因が予想できるので、1つずつ原因を切り分けると解決できることが多いです。

  • ブラウザキャッシュが古い
  • ファビコンのリンクが正しくない
  • サーバーキャッシュのデータが古い
  • サイトが「noindex」になっていないか

結論を言えば、上記4解決できると表示できるようになります。

本記事では4つの「原因の詳細」と「解決する方法」をそれぞれ詳しく掘り下げいくので、初めてファビコンが変わらないトラブルに遭遇した方は是非参考までにご覧ください。

ファズ

Hello!ファズです。

◆仕事関連 WEB制作4年:「WordPress/WEB制作」
◆インドア趣味:アニメ好き歴10年/ガンプラ購入数十種以上!
◆生活品:ソイプロテイン常用2年、試した数十数種

↑インドア多趣味の実際に試した内容の記事を紹介していきます。

※当サイトはリンクフリーですが「出展元」として記載をお願いします!

ファズをフォローする
wordpressのおすすめテーマ
WordPressのテーマ選びでお悩みの方必見!

【初心者におすすめの記事】

◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい

ファビコンが変わらない「4つの原因」

冒頭でも述べた通り、ファビコンが変わらない原因は下記の4つが関係している可能性が大きい。

  • ブラウザキャッシュが古い
  • ファビコンのリンクが正しくない
  • サーバーキャッシュのデータが古い
  • サイトが「noindex」になっていないか

それぞれどういった原因か解説します。

予測できる原因① ブラウザキャッシュが古い

1つ目は使っているブラウザにキャッシュしたデータが古い場合。

ブラウザはデータを高速で読み込む時に、一度読み込んだサイトデータを「一時ファイルとして保存」しています。

一時ファイルとしてデータを保存しておくことで、再度アクセスした際にキャッシュデータを使うと高速で読み込むことができる仕様。

しかしキャッシュデータが古いと変更前のデータが読み込まれてしまい、「新しいデータに変わらない」といったことになります。

予測できる原因② ファビコンのリンクが正しくない

2つ目はファビコンファイルのリンクが合っていない場合。

ファビコンのサイズは使用するデバイスによって推奨サイズが異なりますが、「png」や「gif」で作られることの多いファビコン。

WordPressでは「512px以上」の画像をアップロードするだけで自動生成されます。

基本的なサイズは「16px × 16px」と「32px × 32px」なので、この2パターンあればほぼ問題はでません。

「ファビコンサイズ一覧】

対応推奨サイズ
ブラウザファビコン「16px × 16px」
ブックマーク「32px × 32px」
ショートカット/アプリアイコン「96px × 96px」
Apple デバイス(iPad)用「180px × 180px」
Chrome 推奨ファビコンサイズ「192px × 192px」
Android ホーム画面表示用「256px × 256px」
ファビコン対応表

管理画面からアップロードして生成する場合、拡張子は「png」になります。

また、自身でサイズの異なるファイルを「ico」でひとまとめとして使用することもできます。

ico」は基本的に自分でコード記述することになると思います。記述時のミスが1番でやすいと思うので使用する方は注意が必要ですね!

icoファイルはアップロードできない仕様になっていることが多く、自身でfunctions.phpなどに書き込んでアップロード権限を付与する必要があります。

ここまでする方はあまりいないと思うので、この時WordPressのテンプレートファイルにファビコンのファイルリンクを直書きしている可能性はないでしょうか?

もし直書きしているとそれが間違っている可能性があるので要チェック!

予測できる原因③ サーバーキャッシュのデータが古い

3つ目はサーバーキャッシュのデータに古いデータが残っているというもの。

ブラウザのように、サーバー側でもより高速化を目的にキャッシュデータを保存しています。

ブラウザ同様、サーバーキャッシュデータが古いと同じように表示が変わらない可能性が出てきます。

しかもこれ!基本的にぼくら側からは対応できることがない・・・。そう、基本的には待つしかないんです。

具体的にいうと手段はあるんですが、結論を言うと個人ブログなどでは急いで対応する必要もないので気長に待って良いと思います。

サイトが「noindex」になっていないか

4つ目はサイト自体が「noindex」の設定になっていないか。

サイトを立ち上げたばかりでファビコンが反映されないという方の中には、デザインを触る段階でWordPressの設定から「noindex」の設定をしてしまっている可能性があります。

「noindex」を設定したままにしてしまうと、Google botがサイトにきてもクロールせずに帰ってしまう。

Googleからの評価はこのbotの回遊率が大きく影響するので、ファビコンだけでなくサイト全体の大きな問題になってしまうということ。

【ワードプレスを入れて最初にやること】絶対やってほしい5つの初期設定」の記事でnoindexの設定について書いてるので、一度チェックしてみてね!

変わらない3つの「解決方法」

上記では4が原因になる「理由」を解説してきました。

  • ブラウザキャッシュが古い場合の解決方法
  • ファビコンのリンクが正しくない場合の解決方法
  • サーバーキャッシュのデータが古い場合の解決方法

下記ではそれぞれの解決方法を紹介します!

おそらく紹介するいずれかを対応することで、ほとんどの場合ファビコン表示が修正されると思います。

1つずつ試して原因がどれなのか試して切り分けてみましょう!

ブラウザキャッシュが古い場合の解決方法

ブラウザキャッシュが原因の場合、1番簡単に修正することができます!

方法は簡単。

「キャッシュを削除、または強制的に最新のデータをサーバーからリロードする」です!

これは通常の「リロード(再読み込み・更新)」とは異なり、ちょっとしたショートカットキーの入力が必要になります。

【キャッシュ削除orリロード方法】

  • キャッシュの消去とハード再読み込み
  • スーパーリロード

いずれかの方法を試してみるのをおすすめ!

キャッシュの削除方法は下記事でまとめているので、より詳しい方法を見たい方は見て試してみてください!画像付きで解説してます。

WEB必須知識!キャッシュのクリアやスーパーリロードのショートカット紹介

ファビコンのリンクが正しくない場合の解決方法

ファイルに直書きしているとよくある失敗例。ファビコンリンクが正しくない可能性ですね!

まずリンクをチェックしてみるところから確認してみるとリンクが正しいかわかります。

【おすすめ2つ確認方法

  • 「デベロッパーツール」で確認する
  • 「ページのソースを表示する」で確認する

【方法① デベロッパーツール確認手順】

  • STEP①
    デベロッパーツールを開く

    【以下いずれかで開く方法】

    • ソースを見たいページ上で「右クリック」>「検証」
    • F12(ファンクションキー+12)
  • STEP②
    「Elementsタブ」のHTMLソースを選択して「icon」と検索

    タブを選択した状態で検索すると左下に入力されて、検索された文字にハイライトがかかります。

    デベロッパーツールでElementsタブを示す図
  • STEP③
    ファビコンのリンクにカーソルを合わせて右クリック
    デベロッパーツールでファビコンのリンクを示す図
  • STEP④
    「open in new tab」を選択

    「open in new tab」で無事画像が別タブで表示できていればリンクは正しいということ。
    逆に画像が表示されない場合リンクを正しく修正したらファビコンが変わる可能性が高いです。

 

【方法② ページのソースを表示手順】

  • STEP①
    右クリックorショートカットでソースを開く

    右クリックで「ページのソースを表示」を選択するか、下記のショートカットをページ上で実行。

    • Windows:Ctrl + U
    • Mac:Cmd + Option + U
  • STEP②
    ソース上で「icon」を検索

    ファビコンのリンクにハイライトされるので、リンクをクリックして画像がそれぞれ表示されるか確認できます。

    表示されない場合はリンクを確認し、正しくなければ修正して完了。

    リンクは正しいが表示されない場合はファイルに問題がある可能性があるのでまた別途調べた方がいいですね。

サーバーキャッシュのデータが古い場合の解決方法

サーバーにあるキャッシュデータの場合・・・正直な所、あまり自身でできることはなく、自然に更新されるのを待つしかありません。

しかも、ファビコンのキャッシュは強く、短期間では変わらなことも珍しくないので気長に待つしかありません。

ただ、1つ方法というほどでもありませんが、クロールをさせると新しいデータに更新してもらえる可能性はあると思います。

とはいえ、これも通常通りサイトを更新して待っていると非常に時間がかかってしまう。

そこでサーチコンソールを使用。

通常更新だとクロールされるまで時間がかかってしまいますが、「サーチコンソール」から更新を伝えてあげることで早めることができます。

①サーチコンソールを開く > ②トップページのURLを入力URL検査

サーチコンソールにURLを入力する例

④インデックス登録をリクエスト後キューに追加されればOK!

インデックスリクエストの位置を示す図

こんな感じでサイトへのクロールを促すことができるので、なるべく早く変更したい方は1度お試しを!

ファビコンが変わらない4つの原因と解決方法【まとめ】

以上、ファビコンの変わらない原因と解決方法についてまとめました!

上記はよくある原因を4つにしぼって解説しましたが、サイトの作り方、ファイルの作り方次第で他にも原因になることはあると思います。

その際、自分がやったことに区分をつけ、1つずつチェックしていくことで原因を見つけることができると思います。

・・・言うはやすし。

ファビコン設定は簡単ですが、以外と凡ミスしていることも多いので偉そうにいえません(笑)

この記事が参考になれば幸い!!

ファズ
ファズ

今回はこんな感じ!

ありがとうございました

コメント

タイトルとURLをコピーしました