ラウザのアドレスバー左に表示されるfavicon.icoを簡単に作成することができるサービスを紹介します。
DeGrave.comのFavicon Editorです。
このサービスは、faviconにしたいロゴ画像をアップロードすることで、自動で作成してくれます。もちろんすべて手動で色を生成することも可能です。早速弊社のロゴを用いて作成してみました。
1. 画像を準備
弊社のロゴ画像から、favicon.icoにしたい部分を抜き出し、別ファイルとして保存します。
2. 保存したファイルを、Favicon Editorにアップロードします。
3.取り込む範囲をマウスでドラッグし、決定します。
4. 背景を透過させたい場合は、グレーと白のチェックになっているピクセルで塗りつぶします。
5. Make Favicon! ボタンをクリックすると、faviconが表示されるので、それをローカルマシンに保存します。
6. WebサイトのドキュメントルートにFTPします。
7. HTMLに下記の通り記述します。
<head>
<link rel="shortcut icon" href="/favicon.ico">
...
</head>
以上で完了です。一度背景を透過させたバージョンを作成してみましたが、Firefoxのブックマークツールバーに表示しているときにマウスオーバーさせるとシャギーが目立ってしまったので、背景を白で塗りつぶしました。
256色で生成されるので、なかなかきれいにできました。
faviconがあるのと無いのでは、ほんの少しですが印象がよくなりますね！