JINカスタマイズ

【WordPress】【JIN】サイトアイコン(ファビコン)を設定する方法とGoogleの変更点

こんにちは😀広瀬ユキです。

今回は、サイトアイコン(ファビコン)を設定する方法について解説します。

当ブログは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についての記事を更新しました。参考になれば幸いです。

【WordPress】プラグイン「BJ Lazy Load」の設定方法【ブログを高速化しよう!】【WordPress】プラグイン「BJ Lazy Load」の設定方法について書きました。ブログカードの表示やGoogle botの対策についても書いています。...
【WordPress】親テーマから子テーマにファイルを追加する方法【JIN】【Xserver】親テーマから子テーマにファイルを追加する方法について書きました。サーバーからWordPressにファイルをアップロードする方法としてもご覧いただけます。...
【WordPress】プラグイン「PS Auto Sitemap」表示順序を並び替える方法【図解】【WordPress】プラグイン「PS Auto Sitemap」表示順序を並び替える方法【図解】を書きました。図もつけて解説しています。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ