ファビコンを作成しよう

まず、ファビコンとは何か。

favicon(ファビコン)とは「favorite icon(お気に入りのアイコン)」の略称で、WEBサイトのシンボル・イメージとして用いられるアイコンのことです。

  • ブラウザのアドレスバーやタブ
  • ブックマークバー
  • 検索結果画面

などに表示されます。

このサイトを開設したとき、なかなか良い図案が思いつきませんでした。そこで、いずれ変更することを前提に、別の画像を貼り付けたのです。

つまり、今までこのサイトを開いたときに表示されていたのはファビコン(仮)。

このままでは良くないと、長い間あれこれ考えていました。

デザインのセンスがほしい……

何とかそれらしいものができたので、今回の記事を書いた次第です。

基本的に、16ピクセル x 16ピクセル、32ピクセル x 32ピクセルなど、正方形で作成するのが望ましいそうです。

今回は32ピクセル x 32ピクセルで作成しました。

やはりサイトの内容と合うものが良いだろうと「本と羽根ペン」の図にしました。

作成してみて実感したのが、様々なサイトでも書かれている以下の点です。

  • 複雑な図は潰れてしまう。  
  • 淡い色のみだと見えにくい。
  • ほかのサイトとかぶらないように注意する。
  • とても小さなアイコンなので、あまり複雑な図はNG。

最初は本の図を中心にして、上下に「NOVEL SITE」「シダー文庫」の文字を入れてみました。

しかし、これだとタブに表示されたときに図や文字が潰れてしまいます。

そこで今度は、小さくなっても図が見えるよう、文字をすべて削除。その分、本の図を大きくしました。

さらにさらに、

薄茶色と白色だけでは見づらい! 

本の図だけではほかのサイトとかぶりそう! 

と気づきました。

というわけで、灰色の羽根ペンを追加して完成です。

(本当は羽根ペンを緑色にして葉っぱのように見せたかったのですが、色の変え方がわからず。サイトのアクセントカラーである灰色になりました)

「本と羽根ペン」の図もかぶりそうですが……。

ま、まあ、作成のコツは掴めたので。

そのときは、また新しいファビコンを考えます。