懸賞からインターネットのオトク情報まで、オトクをためすサイトためした。

懸賞からインターネットのオトク情報まで、オトクをためすサイトためした。　｜　▲トップ　 

favicon,ico ブックマークに自分のアイコンをつける

よくページをブックマークすると小さいアイコンが先頭につくアレである。ちなみにこのページをブックマークすると、が先頭に表示されると思う。それにしてもfaviconってファビコンって発音するのかな？Favourite Iconの略なんだろうけど、鼻詰まった子供がファミコンって言ってるみたい。ファビコン。

アイコンを作る

何はともかく、アイコングラフィックを作らなければならない。ためしたはPhotoShopで作ってみた。アイコンデータの解像度は１６ピクセルX１６ピクセルだ。うーん小さい。フリーの高機能グラフィックソフトとしてはＧＩＭＰあたりが良いと思う。ためしたは出来上がった画像をとりあえずgifフォーマットで保存した。

こんなのを作ってみた。

icoファイルを作成する

ためしたはここで引っ掛かった。icoファイルって何だ？要はWindows用のアイコンデータのファイルフォーマットということらしいが、この際そんなことはどうでも良く、“アイコンを作る”で作ったグラフィックデータをicoファイルに変換したいのだった。で、散々フリーの変換ソフトを探したあげく、ブリリアントなサイトを発見。

Favicon From Pics

このサイトではグラフィックファイルをアップロードすると、そのファイルをicoファイルに変換して、ドキュメントと共にZipファイル形式にして返してくれるイカしたサイトだ！
１．まず参照ボタンをクリックしてファイルをアップロードする。 ここで気づいたのだがグラフィックデータは１６ピクセルＸ１６ピクセルになっている必要はなく、正方形にさえなっていれば勝手にサイト側でリサイズしてくれるようだ。しかし縮小具合などもあるので、あらかじめ１６ピクセルＸ１６ピクセルにしておいた方が美しいアイコンを作ることができると思う。ちなみにJPGファイルも対応していた。未確認だけどBMPやPNGもOKだと思う。

２．“Generate Favicon.ico”をクリックすると下図のようなボタンが表示される。

３．“Download Favicon”をクリックすると、zipファイルをダウンロードすることができる。ダウンロードボタンの左にはブックマークアイコンのプレビューも確認することが可能だ。

設置する

zipの中にはReadMe.txt、プレビュー用にアイコンのPNGファイル、そしてお目当てのfavicon.icoファイルが入っている。

１．このfavicon.icoを名前を変えずにサイトのルートディレクトリにコピーする。

２．ブックマークアイコンを設定したいページのHTMLの<HEAD>と</HEAD>の間に下記のようなスクリプトを書く。

<link rel="shortcut icon" href="favicon.ico" >

<link rel="shortcut icon" href="サイトＵＲＬ/favicon.ico" >と書いても良いと思う。

総評

ブックマークしてみたら見事アイコンを表示することができた。簡単に作れるし、これはオススメ。