『Favicon.icoの作り方』20030201

わたしは普段Macを使っているのだけど、たまに、WINDOWSのIEなどを使うとURLの「http://」の頭アイコンがつく画像が羨ましくて、しょうがなかった。

一般にそれを『Favicon.ico』といい、お気に入りなどを目立たせるためのアイコンだ。
Macも2003年に発表されたApple純正のブラウザ「Safri」からこの『Favicon.ico』をMacでも表示できるようになったのだ。

※その前に、Netscape7.0からMac（OS 9でも）でも『Favicon.ico』を使っているサイトは見られるようになっていたんだけど、どういう訳か、話題にもなっていない。なぜ？

という訳で、Mac系のコミュニティサイトでは、『Favicon.ico』の情報が少なくて、どういうルールで作ればいいのかをわからないので、googleの検索から『Favicon.ico』の作り方を探してみた。

そもそも、『Favicon.ico』の『.ico』なんて拡張子は、どういう拡張子なのかはじめてみるが、多分『.ico』って、見るからに『ICON』の上三文字だというのはわかるが、作り方がわからない。

まず調べてみて、作り方以前で『Favicon.ico』についてわかったことは、

ということ。
う～～ん、個人的には、視覚的にどのサイトのブックマークかがわかっていいと思うんだが、あんまりいいこと書いてないなぁ。

ところで『Favicon.ico』はどういうふうに作るのか、検索した。
画像データなので、多分、GIFで作るんだろうと思っていたら、それだけじゃなかった。

『Favicon.ico』を作る場合の注意点

ということはつまり、ちゃんとしたアイコンエディタでアイコン形式で保存する必要があるということがわかった。
ちなみにMacの方は、一番参考になるWEBページは下記（WINDOWSの方も参考になる）

ここを読むと『Favicon.ico』は「16×16ピクセルで256色、1bitマスクのWindows Iconデータ」にしなければいけないということがわかった（あとOS Xでの作り方もネ）。

でも、私の環境はOS 9なので、OS 9で使用可能なアイコンを作成するソフトを探すことにした。

探し場所は『Vector(ベクター)』のMacソフトのグラフィックのところ。
探すと『IconParty』というソフトがあり、早速セレクトし使用してみた。

『IconParty』は、色々なサイズのアイコンを直接作ることができる他、BMPやGIFファイルの読み込み、WINDOWS用のアイコン画像の書き出しもできる。

そこで早速、『Favicon.ico』を作成する。
素材は、使い慣れた『FIREWORKS』で16×16ピクセルのサイズで作成し、作成したものを『IconParty』で読み込み、そしてすぐに書き出しを選択する。

以上の行程で簡単に、『Favicon.ico』を作ることができた。『Favicon.ico』ができた。

次はいよいよ、ブラウザ表示させるための準備。
『Favicon.ico』をブラウザで表示させる準備は検索すると様々でてくる。

簡単にいえば、『Favicon.ico』を表示させたいページに以下のタグを書き込めば、あとはブラウザ側で表示してくれるのだ。

なんだ。簡単じゃん。
という以上の手順で、Webmagazine"be"の表紙には、『Favicon.ico』を設定した。
Netscape7.0では問題なく見えるが………さて、WINDOWS環境ではちゃんと見えるだろうか‥‥ちょっと心配。

【文章・ムラヒデ20030201】