Articles(Comments) / Total amount of posts:456
  1. 2009/08/17  ファビコン設置 (0)

ファビコン画像ブラウザのアドレスバーの左に表示される小さなアイコンをファビコンという。
オリジナルファビコンを設置するのが人気?、とも聞くが、遊びで設置した。
(追加補足:「遊びで設置した」という言い方は正確ではない。設置してみたいという興味と欲求があり、遊び心でもって設置してみたが正確な所。傲慢な表現を反省、訂正します(2009/08/24))

私は、2本の木材がダブテールジョイントで鯛工房の「T」型に組まれているようにした。
バックグラウンドカラーは、サイトのタイトルバックと同じに、「T」はイエローにした。
ちなみに、バックのグリーンは森林を、イエローは木材木地の色を意味させ、サイト設置当初からのイメージカラーとしている。

アイコンは大きなサイズで作成しても専用変換ソフトで縮小してくれるが、ボけるので、最初から16×16ビットで作り直し、「BMP」で保存(注:別にBMPでなくてもいい)。

この画像をファビコン用の形式に変換する必要がある。私は「FavIcon from Pics」というサイトで変換した。
変換後、ファイルは、zip形式でダウンロードすることになるので、それを解凍する。

解凍したフォルダーのファビコンファイル(favicon.ico)を、自分のウェブサイトのフォルダーにコピーし、サーバーにアップロードする。

サイトのindex.htmlファイル(どのページにも設置できるが、ここではトップページ(ホームページ)とする)のHTML記述の、
~ 内に、LINKタグを設定し、同様に上書きアップロードする。

以下は、「家具制作 鯛工房」での記述。

<link rel=”shortcut icon” href=”http://www.tai-workshop.com/images/favicon.ico” />

ファビコンファイルを含め、画像は全て「images」フォルダーに格納してあるので、パスを通してある。

IE6では、表示できなかった。IE7、IE8、FireFox3.0では、問題なく表示できた。
IEでは、表示できないといってHTMLを変更しても、履歴の消去を行わないと古いデータを表示するので注意。
(HTMLをアレンジし、アップロードできない無料ブログなどでは設置は無理ですね。多分?(あまり詳しくはないので何ともいえませんが・・))

Posted Comment

----- No Comment ------

Comment

* コメントフィード

トラックバックURL: http://www.tai-blog.com/2009/08/17/%e3%83%95%e3%82%a1%e3%83%93%e3%82%b3%e3%83%b3%e8%a8%ad%e7%bd%ae/trackback/