Blogger ブログにファビコンを設定する方法

ファビコン(favicon)は、ブラウザーのタブやブックマーク、アドレスバーなどに表示される小さなサイトアイコン画像のことです。
専用のファビコンをサイトに設定すると、ちょっとしたアクセントになります。ファビコンは、ユーザーにサイトのロゴのイメージを与えるようなブランディング効果もあります。
[post_ads]

検索結果デザイン変更により高まるファビコンの重要性

2019年5月22日、Googleは検索結果の新デザインを発表 しました。新デザインでは、ウェブサイトのブランディングを代表するサイト名とサイトアイコン（ファビコン）がトップに表示されます。2019年5月25日から、モバイル端末での検索結果は、新デザインに移行しました。これからパソコンでの検索結果ページも同様にファビコン（サイトアイコン）が、検索結果のトップに表示されるようになります。

サイトアイコンは、サイズは小さくても視覚的に与える印象は強いです。特に検索結果のカードの上部左に位置することで、更に印象は強まります。

新しいデザインの検索結果によって、今後、ブランディング要素を持つサイトアイコンやサイト名の重要性が高まってくることは、ほぼ確実です。

本件につきまして、詳しくは以下の記事をご参照下さい。

ファビコンについて

ファビコンは、各種ブラウザとの互換性を持つICOのファイルフォーマットが普及しています。サイズは、16x16, 32x32, 48x48, 64x64等があります。Appleの製品で使用されるアップルタッチアイコンではさらに大きいサイズも使用されています。

各種サイズや端末に合わせてファビコンをマニュアルで設定するのは、ちょっとした手間がかかります。なれていない人、サイト運営の初心者の方がご自分で設定するのは大変です。

幸いなことにBloggerでは、簡単にサイトオリジナルのファビコンを設定する機能を備えています。（WordPressでもファビコンは簡単に設定できます。）

Blogger ブログサイトでのファビコンの設定手順

1. ファビコン画像ファイルの作成

予めファビコン用の画像を用意します。ファビコンは、正方形でサイズは100KB未満の画像ファイルを作成します。

2. Blogger レイアウトページを表示

Blogger 管理メニューのレイアウトをクリックして、レイアウトページを表示します。レイアウトの最上部左に表示されている「ファビコン」のガジェットエリアの「編集」をクリックします。

3.  ファビコン画像ファイルのアップロード

「お気に入りアイコン（ファビコン）を設定」のウィンドウが開かれます。[Choose File]のボタンを押して、1で用意したファビコン用の画像ファイルを選択して、アップロードします。

4. アップロードしたファビコンの確認

アップロードされたファビコン画像がプレビュー表示されます。問題ないことを確認の上、［保存］ボタンを押します。


画像がファビコンに適さない時は、アップロードした画像を削除し、代わりの画像をアップロードします。

5. レイアウト画面での設定確認

ファビコン設定ウィンドウが閉じ、Bloggerのレイアウト画面に戻ります。レイアウトページのファビコンガジェットエリアには、デフォルトのBloggerのアイコンに代わって、アップロードしたオリジナルのファビコンが表示されます。設定されたアイコンの確認をします。

6. ブラウザーでファビコン表示の確認

ブラウザーでファビコンの設定を行ったBloggerのサイトのページを表示します。ブラウザタプに設定したファビコンが適切に表示されていれば、設定作業完了です。


上の画像と下の画像でのファビコンの表示は、ちょっとした違いですが、デフォルトのBloggerのファビコンからサイトオリジナルのファビコンに変わると、視覚的に受ける印象は異なります。


Bloggerでは、簡単にファビコンを設定できるので、是非、オリジナルのファビコン画像を設定なさることをお勧め致します。