ブックマークに独自のアイコンを表示する方法【ファビコンは必要です】

『自分のブログをブックマークしたけど、アイコンがなくて分かりにくいな』

『そもそもこのアイコンって必要なの？』

そんな悩みを解決します。

この記事でわかること

ブログのアイコン（ファビコン）って必要？
アイコン（ファビコン）の作り方
自分のブログにアイコンを表示させる方法

Favicon（ファビコン）とは？

Favicon（ファビコン）は、「Favorite icon」の略です。

赤い四角で囲んだ部分がファビコン。

このようにタブやお気に入りバーに表示されます。

ファビコンって必要なの？

結論から言うと、あった方がいいです。

ファビコンを設置することで、タブをたくさん開いてWebサイトを閲覧しているときでも、サイトを判別しやすくなります。

たとえばこのように、ファビコンがついていないと、ブックマークしたサイトがどういうサイトかわかりにくくありませんか？

大抵の読者は、ブックマークしたサイトのアイコンを見てクリックするので目印がないと不便ですよね。

大手の企業さんのアイコンは見ただけでどんなサイトなのかがわかります。

ブックマークに登録したサイトが多いときは、画像だけで何のサイトかわかるとブックマークバーが短く見やすくなります。

ファビコンが表示される場所

ブラウザのタブ
ショートカットを作成した時のアイコン（スマートフォン）
ブックマーク
検索エンジンに表示されるタイトル

最適なファビコンとは？

Googleでは「最適なファビコン」についてこのように述べています。

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

ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）
Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。

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

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

［出典］SearchConsoleヘルプ

簡単に言うと、画像だけでサイトがわかる48ピクセルの倍数のサイズが理想的です。