やまだ系

コンピューターやWEB関連の情報収拾と整理、資格取得に関することを目的にしたブログ

ファビコンを作成する

favicon=ファビコン。はてなによると

FAVorite ICONの略で、ウェブブラウザのお気に入りリストやタブに現れることのある、ウェブサイト独自のアイコン。
独自のico形式の画像ファイルを用意して、サイトの「/favicon.ico」に置くか、あるいはそれ以外の場所に置いた上で、ウェブページのヘッダに

と書くことによって指定することができる。
もともとはInternet Explorerの独自拡張として実装されたが、FirefoxSafari, Operaなどの他のブラウザも追従したので、事実上ウェブにおける標準のような扱いになっている。

だそうです。はてなでは管理画面にこのファビコン用の画像を登録させると出る仕組みなので何も考えなくても簡単に画像を登録すれば表示される仕組みに。
ただし、IEだけはただそのページを開いただけでは残念ながら見ることができず、一度お気に入りに登録させないと表示されないという残念なことになっています>それ以外のブラウザでは設定すれば大体見ることができるようになってる。試したい方はIEのお気に入りに登録させてからもう一度このページを開いてみればわかると思います。
追記:それでも見えないという場合は一度IE自体を一度閉じて、開きなおしてください。それでたぶん出るのでは?


んで、作り方は。
web用の画像を作るのと同じですが保存形式をその形式(.ico)になくてはいけない。なので、それようのツールを探して利用したり、webサービスとしてFavIcon from Picsを利用するかというのが有名どころ。通常小さい正方形サイズ16×16や32×32のサイズを用意して変換をさせます。


しかし、せっかくPhotoShopがあるならPhotoShopを使用するとPhotoShopで作成後保存するときに保存形式を選択するだけで簡単に作成できる。
その紹介ページがこちら↓
Photoshop で背景透過の美しい favicon (ファビコン) を作成する
です。
紹介されているプラグインPhotoShopのプログラムの入っているフォルダ:「プラグイン」フォルダに入れるだけです(よく使われているPhotoShopエレメンツでも使えるのかは試していないのでそちらでも、使えるのかどうかは不明。ふつーのいや高いほうのいや昔からあるほうのPhotoShopで確認)。

あとはhtmlのヘッダー部分に

このタグを入れれば完成。ちなみにicoファイルの位置は通常サイトルート上においておくことが多いそうですが、サイトルート上に置かない場合はhref="img/favicon.ico"のようにフォルダ名とともに指定する必要あり。
ファビコンは最終的に32×32のサイズに落とされるそうなので、PhotoShop上で縮小化して調整するときっとなお良し(笑)サイトは当然できるとしても、ブログでもhtmlをカスタマイズできるところだったらHTMLのヘッダー部分に組み込むと表示されるはず。