ブログ

モバイル(スマートフォン)の検索結果にファビコンが表示されなくなったときの対処法【モバイル対応favicon.icoの作り方も!】

https://hashikan.net

本記事では、突然表示されなくなったモバイル検索結果のfaviconを再び表示させるために筆者が実施したことをまとめています。同じトラブルに見舞われた方の参考になれば嬉しいです。

 

はしかん
こんにちは。ガジェットレビューブログを営んでいるはしかんです。

 

ふとモバイルの検索結果にfaviconが表示されなくなっているのに気づいたのですが、ある手段を講じることで解決しました

 

サイトの運営歴が長い方のほうが表示されなくなっている可能性が高いので、同じ悩みで困っている方がおられたら参考になれば嬉しいです。

 

突然モバイルの検索結果にファビコンが表示されなくなった

最近ではPCよりもスマートフォンを使って検索される頻度のほうが高くなってきており、その分、モバイル(スマートフォン)の検索結果は重要度が高まってきています。

 

私も定期的に自分の記事の検索順位をチェックしていますが、ある時ふとモバイルの検索結果にfaviconが表示されなくなっているのに気付きました。

 

モバイルの検索結果にfaviconが表示されなくなっている様子

 

はしかん
あれ?ちょっと前はちゃんと表示されていたはずなのだが?

 

最初はあまり気にならずしばらく放置していたのですが、何度もモヤッとした地球アイコンを見ているうちに段々と気になり始め、本腰を入れて原因調査と対策を講じることにしました。

 

favicon.icoが表示されなくなった原因を調査

最初は手当たりしだいにプラグインのキャッシュを削除したり、サーバーキャッシュを削除してみたりしましたが全く改善される様子がなく、

 

はしかん
なんでや~・・・

 

と頭を抱えていたのですが、少し調べるとGoogleのこのようなページにたどり着きました。

 

 

この内容をよーく呼むと、「ガイドライン」のこのような記述が目に止まりました。

 

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

~ 中略 ~

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

出典:検索結果に表示されるファビコンを定義する

 

はしかん
48ピクセルの倍数?・・・そんな大きさのfaviconを作った記憶はないぞ・・・。たしか外観のカスタマイズで512 x 512サイズの「サイトアイコン」を設定しているだけのような気が・・・。

 

これが原因の可能性が非常に高いと思ったので、ひとまずガイドラインに沿ったfavicon.icoを作って設定してみることにしました。

 

対策:48 x 48 サイズ1つだけのfavicon.icoを作ってみる

step
1
アイコン画像を用意する

Canvaでアイコンを作成する様子

 

まずはfaviconの元になる画像を用意します。

私が自作のアイキャッチ画像やアイコンを作るときは「Canva」を使っています。

 

Canva」でアイコンを作成したあと、エクスポートしてもよいのですが、面倒なときはスクリーンショットツール「Screenpresso」で四角く囲ってキャプチャーしちゃいます。

 

アイコンの大きさは、素材の段階では150 x 150 ピクセルくらいでOK。後で正方形に整形するので、この段階では適当に大きめに切り取っておいて大丈夫です。

 

step
2
キャプチャーした画像を正方形にする

Windows標準のフォトアプリで正方形にトリミングする様子

 

画像をダブルクリックしてWindows純正のフォトツールで開き、「トリミング」をクリックし、縦横比を正方形にしてアイコンが綺麗に正方形の中に収まるように範囲を決めて「保存」をクリックします。

 

 

step
3
必要に応じてフチを透過させる

続いて、フチを透過させたいときの手順を解説しますが、フチの透過が不要な場合は「favicon.icoに変換する」に進んでください。

 

faviconのフチの透過を簡単に済ませたい方

こちらのサイトがめっちゃ簡単にフチを透過させることができます。

 

元画像をキャンバスにドラッグアンドドロップして読み込ませ、透過させたい色をクリックするだけ。

faviconのPNG画像を読み込み、透過させたい色をクリックする

 

このようにあっという間に透過pngができます。

透過処理後のfaviconアイコン

 

はしかん
超簡単!

 

フチの白いブツブツを取って綺麗な透過アイコンを作成したい方

元画像のアンチエイリアスの背景色が白色の場合、透過させてもフチに白いラインが入って汚く見えるときがあります。

 

そんなときは少し内側までエグッて透過処理することで、白いラインが残るのを防ぐことができます。

 

GIMP」という無料の画像編集ソフトを使います。

 

詳しい手順はこちらのサイトで非常にわかりやすくまとめられています。

 

これで正方形のfaviconの元画像ができました!

 

step
4
favicon.icoに変換する

こちらのURLにアクセスします。

 

 

「48 x 48用画像ファイルを選択」をクリックして、作成したアイコン画像を選択します。

48 x 48サイズのfavicon画像用ファイルを読み込み、favicon.icoを作成する

 

他の大きさは選択せず、そのまま「favicon.ico 作成」をクリックします。

 

ポイント

「48 x 48」サイズ1つのみで作るのがポイントです。

 

これで48 x 48 サイズの favicon.ico の完成です!

 

48 x 48 サイズの favicon.ico を設定してみた結果・・・

faviconの設定の仕方は、使っているテーマによって違いますのでご注意ください。

 

まずは「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」で古いファビコンを削除。

Wordpressのサイトアイコンを指定する設定箇所

 

続いて新しいfavicon.icoを設定します。

 

私の使っている「Affinger5」では、Affinger管理画面から設定可能でした。

Affinger5のfavicon.ico設定画面

 

ついでにiPhoneの「ホームに追加」をしたときに表示されるアイコン「apple-touch-icon」も作って設定。

 

設定反映後しばらくしてモバイルの検索結果を見てみると・・・。

 

無事にモバイルの検索結果にfaviconが表示された様子

 

はしかん
キター!

 

無事にモバイルの検索結果にファビコンが表示されました!

 

まとめ favicon.ico が48ピクセルの倍数になっているかチェック!

WordPressの場合は、「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」で512サイズのアイコンを指定していたり、古いサイトだと 16 x 16サイズのfaviconを設定されたままのサイトもあると思います。

 

はしかん
faviconって普段あまりいじらないので、どんな設定にしていたか結構忘れがちですよね・・。

 

モバイルでの検索が重要になっている状況で、ファビコンが目を引く一つのポイントになっていますので、もし同じようにファビコンが表示されなくなってお困りの方がいらっしゃれば、これが参考になると嬉しいです。

 

以上、はしかん(@hashikan3)がお伝えしました。

 

Amazonでお得に買い物する方法

Amazonでお得に買物をするなら、Amazonギフト券チャージがおすすめです!

今なら初回購入時に5,000円以上チャージすると1,000ポイントもらえます!

Amazonファンなら知らないと損!

Amazonギフト券初回購入限定キャンペーンにエントリー

まだの方はお早めに!

はしかん
プライム会員ならポイント還元率UPでさらにお得!

※具体的なチャージ方法や注意点はこちらの記事からどうぞ。

Amazonが5,000円分で1,000ポイント還元キャンペーンを実施中 お得にお買い物をするチャンスです プライム会員はさらにお得に!

この記事も読まれています

この記事が良かったらクリックのご協力よろしくお願いします!



ガジェットランキング

にほんブログ村 PC家電ブログ デジモノ・ガジェットへ
にほんブログ村
  • この記事を書いた人
  • 最新記事
はしかん

はしかん

ガジェットが大好きな会社員。生活や仕事を効率化できるガジェットへの投資は惜しみません。ディスプレイ・イヤホンなどの映像や音が出るものが特に好きです。趣味はランニングと新しいガジェット探し。

-ブログ
-, ,

© 2020 ガジェットランナー