こんにちは😀広瀬ユキです。
今回は、サイトアイコン(ファビコン)を設定する方法について解説します。
当ブログはWordPress有料テーマ【JIN】を使っています。
もくじ
サイトアイコン(ファビコン)て何???
そもそも、サイトアイコンとは何なんでしょうか。
サイトアイコンとは、「Web上でサイト名の横などに表示される独自アイコンのこと」です。
サイトアイコンとファビコンは同じ意味です。
ファビコンとは、英語でfaviconと表記し、これはfavorite iconの略です。

サイトアイコンは、スマホやタブレット上でショートカットアイコンとしても表示されます。

サイトの個性が出て、オリジナリティが上がるので、サイトアイコンの設定をするのがオススメです❗
サイトアイコン(ファビコン)の設定方法
サイトアイコンの設定方法はJIN MANUALに記載してあります。
WordPress有料テーマ【JIN】をお使いの方は、簡単な設定で表示できるようになるので、是非設定してみてください。
サイトアイコンの画像サイズは「512px × 512px」の正方形が推奨されています。
※px=ピクセル
サイトアイコンを設定しない場合は、デフォルト(初期設定)の「J」マークが自動的に表示されます。
Googleが検索結果にサイトアイコン(ファビコン)を表示すると発表!
2019年5月22日、Googleがサイトの見た目(デザイン)を変えると公式発表しました。
その変更の中に、サイトアイコンを検索結果に表示するとの記載があります。
(前略)
(中略)
The name of the website and its icon appear at the top of the results card to help anchor each result, so you can more easily scan the page of results and decide what to explore next. Site owners can learn more about how to choose their prefered icon for organic listings here.
(後略)
引用元:https://www.blog.google/products/search/new-design-google-search/
検索結果にサイト名とサイトアイコンを上部に表示することで、ページをより探しやすくできるようになり、サイトの運営者は検索結果上でどのようなサイトアイコンを選ぶと好まれるか、学ぶことができる・・・というようなことが書いてあります。
また、その下の文章には「広告(Ad)」の文字を上部に表示して、太文字で表示するというようなことも書いてあります。上記の画像をよく見てみると、「Ad」が緑色から黒の太文字に変わっていることが分かりますね!
Googleが推奨するサイトアイコン(ファビコン)のサイズは?
Googleの検索結果に表示されるサイトアイコンにはガイドラインがあり、推奨されているサイズがあります。一部、抜粋してご紹介します。
・ファビコンのサイズが 48 ピクセルの倍数になっていること(例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど)。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。
引用元:https://support.google.com/webmasters/answer/9290858?hl=ja
つまり、サイトアイコンのサイズが48pxの倍数であることが推奨されています!!!
WordPress有料テーマ【JIN】が推奨しているサイトアイコンを使うときの最低サイズ「512px × 512px」は、48pxの倍数ではありません。
近い数値だと「528px × 528px」ですね。
当ブログは「512px × 512px」でサイトアイコンを登録していますが、問題なく表示されているので、最低サイズさえ合っていれば、特に細かくピクセルを気にする必要はないでしょう。ただし、正方形で設定しましょう。
サイトアイコン(ファビコン)を見つけるのに最適なサイト!
自分のサイトにオリジナリティを出すために、サイトアイコンを設定したい。しかし、自分では作れない!めんどくさい!
そんな方に、オススメしたいのが、フリーアイコン素材を提供しているサイトを利用すると良いです。
コチラ↓のサイトでは、フリーアイコン素材を扱っているサイトの一覧が見られます。
ご自身のサイトに最適なサイトアイコンを見つけてみてください!
編集後記
食レポが続いたので、今回はWordPressについての記事を更新しました。参考になれば幸いです。


