ページタイトルのタブの左にある小さなアイコンっぽいイラスト(ファビコン:favicon)を付けたよ!

ページタイトルのタブの左にある小さなアイコンっぽいイラスト(ファビコン:favicon)を付けたよ!






メジャーなサイトや人気ブログのページをたくさんタブで並べて表示しながらネットサーフィンをしていると、さっきまで 見ていたページがどれだったっけ? と迷いがちですよね。

そんな時に一つの目印になるのが、ページタイトルのタブの左側にある小さなアイコンのようなイラストです。

当ブログの場合、当初から Blogger 公式の   マーク(オレンジ色に白地で B) がついていました。

ところが Blogger ユーザーのページを見ていると、人によってはオリジナルのイラストが付いています。

不思議に思って調べてみたら、ちょっぴりブログへの愛着がましたので、イラストを含め付け方をシェアしたいと思います。






ページタブの左にある小さなアイコン「ファビコン:favicon」ってなに?


さて、ページタブの左にあるこの小さなアイコンは、 ファビコンと言います。

英語で favicon  と表記するこちらは、Favorite と icon を組み合わせた造語です。

ページタブだけではなく、ブックマークバーにも反映され、スマホのお気に入り一覧なのでも反映される場合もあります。

効果自体は微妙なところ。

ブランディングや愛着の問題でついてるとちょっと気持ち的にプラスかな? という程度で、 SEO 対策などでは特に影響はないようです。


ファビコンに使える画像


一般的なファビコンの作り方


ファビコンは小さな小さな画像です。

使っているブラウザによって、16×16、32×32など様々なサイズがあります。

画像の形式は主にpngですが、使っているブラウザに適切に反映させるために複数のサイズを一つのファイルにした「.ico」というファイルを作成している人もいます。

参考サイト: ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます



Blogger でのファビコンの設定の仕方


レイアウト→ファビコン(最上部左方)の「編集」をクリック。



すると、





こんなページがポップアウトで出てくるので、アップロードしたい画像を選んで終了。



作業はたったこれだけです。

反映されるまで数分~数時間かかる場合があるそうですが、無事にアップロードできているものはじきに反映されるのでご心配なく!



Bloggerでファビコンを使う場合の画像形式、サイズ


Blogger でファビコンを設定する場合、100KB以内の正方形の画像(pngで用意)があれば十分です。

もちろん他のサイトのように「.ico」形式のファビコンも使えるのですが、確認してみたところどちらも画質が大幅に変わるようには見えなかったので、

シンプルに100KBの画像だけを用意してみました。

※ファビコンの元画像



まとめ:ファビコンを付けて、素敵なブログライフを送ろう


今回の記事のまとめです。

ファビコンとは、ブラウザのページタブやブックマークバーの左側についている正方形のアイコン風イラストのこと。

 Blogger でファビコンを設定する場合はレイアウトから簡単に設定が可能。


以上、今回はちょっとしたブログの設定の変更のお話しでした。

記事一覧

もうひとつオマケにいかがですか? 「ご飯の用意ができました」記事一覧ページはこちらからどうぞ♬