ウェブZYCO'S > ウェブ・ツール> オリジナルアイコン

  FAVICON---オリジナルのブックマークアイコンを表示させよう!



アイコンを表示させる!

アイコンは意外に大穴的アイテムと言える。ポピュラーな企業だってアイコン表示されない方が多いんだ。もし君のサイトがブックマーク(お気に入り)用オリジナルアイコンを用意していれば、ブックマークされたIEアイコンが建ち並ぶその中で、君の特性アイコンが光って見えること請け合いだ。

作者の場合、頻繁につかうブックマークは使い易いように枠外へ移動させてリンク表示させている。他に、短期集中でつかう目的のブックマークはデスクトップにも貼り付けてしまえ!とにかく我輩のブラウザーは整理できないブックマークがぎっしりつまって大変なのだ。


BookmarkからDeskTopに貼り付けたShortcut ICON

ところで、マルチアイコンって知ってる?

サイズの違うアイコンをひとつのicoファイルにまとめてくれるんだ。ブックマークに登録されるサイズは16X16pxだよね。そのアイコンをずるっとデスクトップに貼り込むと、32X32pxのショートカットアイコンを表示してくれるんだ。もちろん、この場合2種類のアイコンを作っていないとクールには決まらないよ。

じゃあ、どうやって作るのかって。
作者のアイコンの作り方の概略は次の通り。フォトショップでサイズ別にイメージを作成。透過にしたい部分を忘れずに作り込むんだ。そして大変お世話になるツールの登場だ。以下のアドレスをクリックしよう。

http://towofu.s5.xrea.com/soft/ 「@icon変換」 v1.07

作成したイメージファイル(BMP、PSD、GIFなど)を簡単にicoファイルに変換してくれるんだ。マルチにする場合はイメージファイルを複数読み込んでマルチアイコンとして保存させるだけだ。

いくつかツールをダウンロードしたけど、結局使い易い「@icon変換」 に落ち着いた。だけど他にもたくさんのアイコン作成ツールがあるのでネットで自分に合ったツールを漁ってみてくれ。

たぶん、この作業で一番苦労を強いられるのは、イメージ作成だろうね。縮小拡大を際限なく繰り返し、肉眼で確認できるところまでイメージを作り込むことはかなりきつい、こだわり派ならなおさら、でも負けるんじゃない、ファイトだ!

さてアイコンさえ作っちまえば、こっちのもの。アイコン表示させたいフォルダにアップロードするだけでOKだけど、でももうちょっと完璧にやり遂げて完成としよう。次のPOINTの記述を加えるだけでちゃ〜んとうまくいく。

(POINT)
まず、ここにアイコンがあるんだよということを知らせる記述を<head>の中に加える。トップ以外の別のページで設定する場合も同様、アイコンの場所を指定してあげるとうまくいくよ。

<LINK REL="SHORTCUT ICON" HREF="http://members.jcom.home.ne.jp/cozy.o/favicon.ico">

そして、アイコンをサクッと読み込ませるために以下JavaScriptを<head>の中に加える。

<SCRIPT language="JavaScript">
da_image = new Image();
da_image.src="favicon.ico";
</SCRIPT>


これでお終い。

| JavaScript indexBack