このようなことでお困りでしたら、このまま読んでいってください。
私も経験したサイトアイコン（ファビコン）が反映されない問題をこの記事で解決に導きます。
サイトアイコン（ファビコン）の変更方法
まずはサイトアイコン（ファビコン）の更新方法をおさらいしましょう。
WordPress（Cocoon）の場合の変更手順です。
WordPressのバージョンや使用しているテーマによって、メニューの名称や設定場所が異なる場合があります。
- WordPressのトップページ（ダッシュボード）を開く
- 左側メニューの「設定」→「一般」を開く
- 「サイトアイコン」の「サイトアイコンを変更」をクリック
- 変更する画像を選択
- 画面一番下の「変更を保存」をクリックして完了
「変更を保存」を押すとエラーが出る場合
「変更を保存」を押すと「403 Forbidden」というようなエラーが出る場合は、セキュリティが過剰に反応している可能性があります。
サーバーのセキュリティ機能を一時的にOFFにするか、契約しているレンタルサーバー会社に問い合わせてみてください。
サイズや形式にも注意
サイトアイコン（ファビコン）に設定する画像は、下記の条件であることが推奨されています。
WordPressでサイトアイコン（ファビコン）が反映されない主な原因
WordPressでアイコンが反映されない場合、まずは原因を整理しましょう。
主な原因は次の５つです。
- 「変更を保存」を押していない
- ブラウザやWordPressのキャッシュが残っている
- CSSやJavaScriptが正しく動作していない
- アイコンの読み込み先やファイルに問題がある
- テーマやプラグインが影響している
加えて、私が経験した原因も載せておきます。
CSSとは、Webページの文字や色、配置などの見た目を調整する仕組みです。
JavaScriptは、ボタンの動作や表示の切り替えなどを実現するために使われます。
ただし、原因はアイコンの種類によって異なります。まずは、どのアイコンが表示されないのかを確認することが大切です。
「変更を保存」を押していない
意外と多い原因がコレです。
【サイトアイコン（ファビコン）の変更方法】で解説したとおり、
サイトアイコン（ファビコン）を変更した後に「変更を保存」を押さないと処理は保存されません。
変更方法を再度見直してみましょう。
ブラウザやWordPressのキャッシュが残っている
WordPressでアイコンの変更が反映されない場合、最初に試したいのがキャッシュの削除です。
キャッシュとは、一度表示したWebページや画像などの情報を一時的に保存して、次回以降の表示を速くする仕組みです。
便利な機能ですが、アイコンを変更したあとも古い情報が残っていると、変更前のアイコンが表示されることがあります。
ブラウザのキャッシュを更新する方法
WindowsのChromeなどでは、次の操作を試してください。
- アイコンを変更したページを開く
- キーボードの「Ctrl」キーを押しながら「F5」キーを押す
- ページが再読み込みされたら、アイコンを確認する
通常の再読み込みではなく、キャッシュを利用せずにページを読み込み直す方法です。
それでも改善しない場合は、ブラウザのキャッシュを削除して再確認しましょう。
キャッシュを削除する方法
ブラウザ（Chrome）のキャッシュを削除する方法は下記の通りです。
- Chrome右上の「…」→「閲覧履歴データを削除」を開く
- 右下の「データを削除」をクリック
WordPressやサーバーのキャッシュも確認する
キャッシュ系プラグインやレンタルサーバーのキャッシュ機能を利用している場合は、そちらのキャッシュも削除してください。
CDN（コンテンツ配信ネットワーク）を利用している場合も、古い画像などが配信されている可能性があります。
CSSやJavaScriptが正しく動作していない
キャッシュや設定に問題がない場合は、CSSやJavaScriptの影響も考えられます。
例えば、CSSでアイコンを非表示にする設定が追加されていたり、アイコンの色が背景色と同じになっていたりすると、実際には読み込まれていても見えないことがあります。
また、JavaScriptのエラーによってアイコンの表示処理が動かない場合もあります。
初心者が確認する方法
まずは、最近追加したCSSやコードを確認してください。
特に「追加CSS」や、テーマのカスタマイズでコードを変更した場合は、その変更が影響している可能性があります。
ブラウザの開発者ツールを使うと、エラーや読み込み状況を調べることができます。
開発者ツールとは、Webページの内部構造やエラーを確認できるブラウザの機能です。
ただし、専門的な情報が表示されるため、初心者の場合は無理に変更せず、エラーの内容を確認するだけでも十分です。
アイコンの読み込み先やファイルに問題がある
画像ファイルを使ったアイコンや、アイコンフォントを使用している場合は、読み込み先に問題がないか確認しましょう。
アイコンフォントとは、文字の代わりにアイコンを表示できるフォントのことです。
例えば、Font Awesomeなどの仕組みを利用している場合、必要なファイルが読み込まれないと、アイコンが表示されないことがあります。
確認したいポイント
特に、以前は表示されていたアイコンが突然表示されなくなった場合は、テーマやプラグインの更新によって読み込み方法が変わっていないか確認しましょう。
テーマやプラグインが影響している
WordPressのテーマやプラグインが原因で、アイコンが正しく表示されないこともあります。
テーマとは、サイト全体のデザインやレイアウトを管理する仕組みです。
プラグインは、WordPressに便利な機能を追加するための拡張機能です。
例えば、アイコン表示に関係するプラグインと別のプラグインが干渉すると、表示が崩れる可能性があります。
対処法
まずは、アイコンに関係するプラグインの設定を確認しましょう。
（プラグインの設定は、WordPressトップページの左側メニューから確認できます）
原因がわからない場合は、次の方法で確認しましょう。
- WordPressとテーマ、プラグインを最新の安定版に更新する
- 最近追加・更新したプラグインを確認する
- バックアップを取得する
- テスト環境などでプラグインを一つずつ停止し、原因を調べる
プラグインを停止すると、サイトの表示や機能に影響する場合があります。特に公開中のサイトでは、いきなり複数のプラグインを停止しないようにしましょう。
また、原因を切り分けるためにテーマを変更する場合も、先にバックアップを取得してください。
WordPressをサブフォルダにインストールしてしまっている
最後に、コレは私が経験した原因です。
WordPressはドメイン直下にインストールするのが正しいのですが、私はその下にサブフォルダを作って、そこにインストールしてしまっていました。
【例】
○：https:example.com/ ←ここにインストールするべき
×：https:example.com/ex/ ←ここにインストールしてしまっていた
初めてサイトを立ち上げた際、WordPressのインストールに失敗したため、よくわからずゴソゴソやってしまったのが原因でした。
私はサーバー会社に問い合わせて解決しましたが、同じような状態なら早めに対処することをおすすめします。
なぜならサイトアイコンだけの問題ではなく、ブログサイトの運営にも関わるからです。
このまま放置すると、アクセス解析や収益化などが難しくなるので覚えておいてください。
WordPressのアイコンが反映されないときの確認順
原因がわからない場合は、次の順番で確認すると効率的です。
- WordPressをサブフォルダにインストールしている場合は、サーバー管理者に問い合わせる
- アイコンを再設定する（「変更を保存」を忘れずに）
- ページを再読み込みする
- ブラウザのキャッシュを削除する
- WordPressやサーバーのキャッシュを削除する
- アイコンの設定と画像ファイルを確認する
- テーマやプラグインの影響を調べる
- CSSやJavaScriptのエラーを確認する
最初から難しい設定を変更する必要はありません。簡単に試せる方法から順番に確認しましょう。
まとめ：WordPressのアイコンが反映されない原因を一つずつ確認しよう
WordPressでアイコンが反映されない場合、キャッシュの影響や設定ミス、テーマ・プラグインの競合などが原因として考えられます。
まずは、WordPressのインストール先確認やブラウザの再読み込み・キャッシュの削除を試してみましょう。
それでも改善しない場合は、アイコンの設定、画像ファイル、テーマやプラグインの状態を確認してください。
原因を一つずつ切り分けていけば、問題を解決できる可能性が高まります。
焦って設定を大きく変更するのではなく、簡単な対処法から順番に試すことが大切です。
アイコンが直ったら、ついに待ちに待ったブログを開始しましょう！
ブログを始める手順は下記記事にわかりやすくまとめておりますのでご参考ください。
