wordpress WEB制作

【WordPress】ファビコンを設定する方法と変わらない時の対策

2021年7月9日

こんにちは、よしです。

me
悩んでいる人

WordPressのファビコンを設定したのに変わらない!

今回はそんな悩みを解決する記事を書きました。

僕も以前WordPressデフォルトのファビコンが変わらなくて苦労しました、、

cropped secondfavicon 1
よし

この記事で分かること

・WordPressでファビコンを設定する方法

・WordPressでファビコンが変わらない時の対処法

それではいきましょう!

チェック!
"独学でOK" 未経験でもWordPress案件を取れる学習方法
"独学でOK" WordPress案件を取れる学習ロードマップ

続きを見る

関連
WordPressの子テーマのメリットデメリット
【WordPress】子テーマの作成方法とメリットを解説

続きを見る

WordPressでファビコンを設定する方法

まずは簡単にWordPressでファビコンを設定する方法を画像と共に解説していきます。

PHPを直接いじる方法や、プラグインを使用する方法もありますが、管理画面で簡単に設定できるので、そちらを解説します。

WordPress ファビコン設定の手順1
WordPress ファビコン設定の手順1

WordPress管理画面の「外観」→「カスタマイズ」を選択。

WordPress ファビコン設定の手順2
WordPress ファビコン設定の手順2

この部分は使用しているテーマによって少し異なりますが、画像のような「サイト基本情報」を選択します。

WordPress ファビコン設定の手順3
WordPress ファビコン設定の手順3

画像を変更を選択し、ファビコンにしたい画像を選択しましょう。

以上です。

たったこれだけでファビコンを設定することが出来ました!

WordPressサイトのファビコンが変わらない時の対策

上で解説した方法でファビコンを設定すると、ホーム、タブのファビコンはすぐに変わるはずです。

WordPress ファビコン ホームタブ
WordPress ホームとタブのファビコン

しかし、うまく変わらない場合もあるようなので、少し解説します。

WordPress管理画面でファビコンを変更したにも関わらず変わっていない場合、大きく2つの原因があります。

チェック

・正しく設定されていない

・キャッシュが残っている

ファビコンが正しく設定されているかチェックする方法

まずはファビコンが正しく設定されているか、チェックツールを使用して確認しましょう。

Favicon checkerを使用するのがおすすめです。

ファビコンチェック手順
ファビコンチェック手順

使い方は簡単で、自分のサイトのURLを入力するだけです。

ファビコンチェック結果
ファビコンチェック結果

こちらは僕のチェック結果です。

エラーが起きている点もありますが画像のようになっていれば、Chromeの検索結果ホーム画面での表示ブラウザのタブには問題なく表示されています。

キャッシュを削除する方法

ファビコンが問題なく設定していることを確認できたら、キャッシュの問題の可能性が高いです。

キャッシュを削除してもう一度確認してみましょう。

キャッシュ削除方法

· WindowsCtrl + F5

· Mac :command + shift + R

また、検証ツール → Network のDisable cache にチェックを入れた状態でリロードしてもキャッシュをクリアできるので、念の為どちらも試してみましょう。

その後にタブが新しいファビコンに変わっていることを確認してみてください!

検索結果のファビコンが変わらない時の対策

WordPressでファビコンが正しく設定され、キャッシュが削除されていれば、タブやホーム画面のフォビコンはすぐに変わっているはずです

しかし、スマホのGoogle検索結果のファビコンはすぐに変わりません。

スクリーンショット 2021 07 09 19.11.44
スマホのGoogle検索結果のファビコン

自分もここにハマってしまい、「全然変わらないじゃん!!!」と一人で怒っていました。

検索結果のファビコンを変えるには、Googleにクロールされた結果変わるようです。

検索結果の横にファビコンを表示するには、次のガイドラインを遵守する必要があります。なお、すべてのガイドラインが満たされても、ファビコンが検索結果に表示されるかは保証されません。

・Google がファビコンのファイルとホームページをクロールできること(Google をブロックしないこと)。

・ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。

・ファビコンのサイズが 48 ピクセルの倍数になっていること(例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど)。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。注意: 16 x 16 ピクセルのファビコンは指定しないでください。

・ファビコンの URL は固定されている必要があります(URL は頻繁に変更しないでください)。

・わいせつな表現やヘイト表現に関連するシンボル(例: かぎ十字章)などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。

Search Consoleヘルプ ファビコンに関するガイドライン

少しややこしいので、ポイントをまとめます。

ポイント

・サイトがnoindex設定になっていないかを確認、なっていたら変更する

・48ピクセルの倍数の正方形 or 512×512の画像にする

・画像は頻繁に変更しないで待つ

・適切な画像をファビコンにする

僕はこれらの対策をして、クロールが完了したのに、「変わらない!!!!」

更新日はファビコンを変更した後になっているのに、変わらない状態が続きました。

もう変わらなくてもいいや!と一旦放置することにしました。

結果的に2週間ほどした所で検索結果のファビコンも変わってくれました。

まとめ 検索結果のファビコンを変えるには、正しく設定して「待つ」

いかがでしたか?

タブやホーム画面のファビコンはすぐに変えることが出来たと思いますが、検索結果のファビコンが変わるのには時間がかかります。

正しく設定したら何度も変えずに放置してみてください!

そのうち変わってると思います。

それでは!

no image

大学生

2021/10/18

【暇な大学生におすすめ】暇な時間を有効活用できる方法

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

WEB制作 ブログ運営 プログラミング

2021/10/16

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

211007アートボード 1 のコピー 42

ブログ運営

2021/10/7

【特化ブログ運営4ヶ月目】アクセス微増、収益4桁達成!!

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

プログラミング

2021/9/30

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

ブログ運営

2021/9/5

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

WEB制作

2021/9/30

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

簡単なサムネ、バナーの作り方!

WEB制作 ブログ運営

2021/8/19

【簡単】短時間でサムネ、バナーを作る手順!

no image

WEB制作

2021/8/18

webデザイナーはコーディングできないといけない??

no image

WEB制作

2021/8/19

【web制作は大変?】実際に経験した感想を語る

no image

WEB制作

2021/10/8

webデザイナーは絵が下手でもなれる?!

no image

WEB制作

2021/8/15

web制作案件に必要なスキルセット【初心者必見】

【文系もOK】レバテックルーキーの評判、口コミと使ってみた感想

プログラミング

2021/10/16

【文系もOK】レバテックルーキーの評判と使ってみた感想

【Udemy】web制作が学べるおすすめ講座  

WEB制作

2021/10/14

【Udemy】web制作が学べるおすすめ講座  

5149301 s

ブログ運営

2021/8/20

【特化ブログ運営2ヶ月目】アクセス数と収益は先月から変わった??

fv e1622358020615

ブログ運営

2021/8/13

ブログのコンタクトフォームの必要性と実装方法

【Local By Flywheel】WordPressのローカル環境構築手順

WEB制作 wordpress

2021/8/23

Local By FlywheelでWordPressローカル環境を構築する方法

undraw warning cyit

プログラミング

2021/8/23

プログラミングスクール卒業生が「使えない」と言われる理由と解決策

WordPressの子テーマのメリットデメリット

wordpress

2021/10/12

【WordPress】子テーマの作成方法とメリットを解説

undraw researching 22gp

プログラミング

2021/10/12

文系大学生が新卒でエンジニア就職する方法

【安い】大学生に本気でおすすめのwebデザインスクール4選!

WEB制作

2021/9/29

大学生におすすめのwebデザインスクール4選【安い】

-wordpress, WEB制作

© 2021 よしブログ Powered by AFFINGER5