2008.09.06.

ファビコンを付けてみた

ブラウザのアドレスバーとかタブの頭に付く小さいアイコンです。
ファビコン ←アドレスバーに表示されてるかな。対応していないブラウザもあるみたいだけど。
作り方をメモしておきます。

まずは、16×16 サイズの画像を作ります。小さいから複雑なものを作ろうとしてもきれいに見えません。大きめの画像を作ってから縮小する方法もありますが、あまりおすすめしません。どうしてもつぶれてしまって何の絵なのかわからなくなったりします。それならいっそ、最初から16×16 サイズで作っちゃった方がいいと。
ブックマークなどで他のサイトと一緒にたくさん並んだときに、一目で見分けられるようにシンプルで特徴的なデザインにします。
画像が出来たら GIF か JPG 、あるいは PNG で一旦保存します。

次にこのファイルを favicon に変換します。今は大抵のブラウザが GIF でも PNG でもファビコンとして認識してくれるようですが、IE は、favicon 形式の ICO フォーマットじゃないと認識しないので、ICO に変換しておきます。
変換方法については、ソフトやネットサービスなどいろいろあるようですが、私は Favicon Japan というサイトの「Favicon自動生成」を利用させていただきました。非常に簡単で便利です。
アップロードして作成するボタンを押すだけ。ファイル名.ico の拡張子付きでダウンロードできます。

今度は、この favicon を自分のサイトにアップしてから、HTML の head 部分に

HTML<link rel="shortcut icon" href="アップした場所/ファイル名.ico" />

を書き込んだら終わり。

参考サイト

  • IDEA*IDEA より:favicon.ico(ファビコン)の作り方
    favicon を作るためのいろいろなサービスをまとめてくれています。
  • Favicon Japan:favicon のサイト。favicon 用に手軽に変換もしてくれる。いろんなファビコンも集めているので、作るときの参考になります。

と、ここまで来ていまさら気が付いたんだけど、Firefox の Google ツールバーからブックマークを開いてみると、favicon が表示されていない。
ブラウザに入っているブックマークでは、Firefox も Safari も Opera もみんなちゃんと表示されてるのに、Google のブックマークだけ出てこない。
よく見ると、他のサイトでもGoogle ブックマークで表示されているところと、されていないところがあるみたいだ。なんでだろ?
また謎が増えた。