Bloggerにオリジナルなファビコンを作成して設置する

みなさん、こんにちは。

Bloggerのファビコンはデフォルト設定だとこのデザインが使用されます。

なので、そのまま使用すると

こんな状態で表示されかねません。

どのタブも同じファビコンなので一目では違いがわかりません。

これは極端な例ですが、やはり自分のサイトはオリジナルのファイビコンを設定し他のサイトとの差別化をはかりたいものです。

オリジナルのファビコンは、サイトの信頼度アップにもつながります。

ファビコンとは

favorite（お気に入り）とicon（アイコン）をくっつけて作られた造語です。

もともとはMicrosoft Internet Explorer 5のお気に入りの一覧に表示されたサイト提供のアイコンだったのですが、いまは一般的に使用されるようになりました。

GIF形式やPNG形式の画像ファイルもファビコンとして使用可能ですが、ICO形式がマルチアイコンに対応しているのでICO形式で作成しましょう。

ICO形式だと複数サイズのアイコンを1つのファイルにまとめることができます。

ファビコンの代表的なサイズは、16px、24px、32px、48px、64pxですが、16pxと32pxあたりをマルチアイコンとして作成しておけば十分だと思います。

アイコンを作成する

まずは元となるアイコン画像を作成します。

腕に覚えのある方は画像編集ソフトで、自信のない方はAKB48風ロゴジェネレーターや化け猫アイコンメーカー等のWEBサービスを利用しましょう。

アイコン ウィザードなどのフリーウェアもVectorなどでたくさんリリースされていますので利用するのも良いと思います。

私の場合、デフォルトのBloggerアイコンのオレンジと白の色相を入れ替えてお手軽に作ってみました。



背景の白色は透過処理しています。

この画像を16pxのものと32pxのものと2種類用意いたします。

ファビコンをICO形式で作成し、Bloggerに設置する

さていよいよファビコンをマルチアイコンに対応しているICO形式に変換して作成します。

これもファビコン favicon.icoを作ろう!というWEBサービスを利用すると簡単に作成できてしまいます。

用意した16pxと32pxの画像をアップして、favicon.ico作成ボタンを押すだけです。


続いて、できあがったfavicon.icoファイルをBloggerにセットします。

Bloggerのダッシュボードから「レイアウト」とすすみファビコンの編集をクリックします。

ここで先ほど作成したfavicon.icoファイルを選択すれば作業は終了です。

反映までに数時間かかるとヘルプに記載がありますが、私の場合数分で反映いたしました。

ではでは～☆ミ