HMVジャパン  シマンテックストア  スカパー! レンタルサービス  トレンドマイクロ・オンラインショップ

favicon

delicious はてな この記事をクリップ! | 2004年02月04日08:05 | 編集


faviconとはFavorite Iconの略で、webブラウザーの中には「お気に入り」欄やロケーションバー(ブラウザーによって名称が異なりますが、要はブックマークや表示中のページを示すバーです)にアイコンを貼り付けられるものがありまして、それをfaviconと呼びます。

どこに貼られる(記録される)かはブラウザーによってまちまちですので一概には言えませんし、faviconに対応していないブラウザーも存在します。

さて、faviconの作り方です。

favicon自体の仕様は

・16*16px

・32*32pxで作った場合は16*16に縮小される

・256色

・1bitマスク

・Windows Icon(拡張子:ico)

となってます。 16*16pxの(アニメ)gifファイルでも構いませんが、この場合表示されないケースがあります。

Windows上で作成するのであればicoファイルのエディターは山程あると思われますので(筆者は詳しくありません)、Mac OS Xで作成してみます。

ここではIconographer Xというアイコンエディターを使います。 これ以外にも、GraphicConverterを使っても良いかも知れません。 要はwindows Iconデータ(拡張子:ico)で書き出す事の出来るエディターならば何でも構わないのです。

Mac OS Xのアイコンエディターで作成するとなると、16*16px - 256色ですのでicnsリソースを使うのが良いでしょう。 マスクはics#(s1mk)リソースです。

アイコンを作成しましたら「Windows (XP) 形式(.ico ファイル)」で保存し、名称は「favicon.ico」とします。 これで完成。

★--

アイコンのアップロード方法は2つあります。

先ず、第1階層にアップロードする場合。 当サイトでしたら

http://www.desktopper.net/favicon.ico

にアップロードします。 この場合はHTMLへの追記は必要ありません。

2つ目は、第2階層以下にアップロードして表示させる場合です。

<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">

という記述をHTMLファイルのHEAD内に加えます。 favicon.icoへのパスは絶対パスでも相対パスでも構いません。

★--

faviconはブラウザーによって表示されるか否かわからない場合があります。 また、キャッシュをクリアしないと反映されない場合もあります。


Search

Archives

Contact

■Administrator
padmacolors@gmail.com

■Akane Miyashita
akane.padma@gmail.com
イラスト、デザインのお仕事を承ります!

フィードメーター - padma colors / 

スカウター : padma colors / 

(C) 1997-2008 padma colors All Rights Reserved. Powered by Movable Type. RSS feed