2011年5月14日

ファビコンを作ってみる

今更ながら、MASAa.blogのファビコンを作ってみました
※ファビコンとは、ウェブサイトやウェブページに関連付けられたアイコンのことで、ウェブブラウザではURLの左横に、また、お気に入りに登録するとブックマークアイコンとして表示されます。今回ファビコンのデザインは、無難にMASAa.blogのタイトルイメージから取ってきた「M」を表示することに(^^;)
pngで作成した画像を、FavIcon from Picsと言う海外のサイトを利用させて頂いて、favicon.icoデータを作成することに成功。
このfavicon.icoデータを開いてみると、大きさ32×32ドットで作成されていました。このfavicon.icoデータをサーバーにアップロードして、

<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" type="image/gif" href="animated_favicon1.gif" />

のLINKタグを、<HEAD> ~ </HEAD> 内に設定し、後は再構築して完了です。
しかーし、何故かウェブブラウザのファビコンが乱れて(汚くなって)しまいます( ̄~ ̄;)
どうも原因は、大きさ32x32ドットで作成された、ファビコンを16x16ドットに表示してしまうので乱れるみたいです。
このファビコンをデスクトップに持って行くと、綺麗に32×32で表示されます。
最初から大きさ16×16ドットで作成したfavicon.icoデータを使うと、デスクトップに置いた場合、ファビコンが小さく表示されてしまうですね。とりあえず、これで諦めかけていたときに、favicon.icoを作ろう!と言うサイトにたどり着きました。このサイトでは、同時に複数画像を指定することで、マルチアイコンを作成することができます。
大きさ16x16ドットと大きさ32x32ドットの画像を同時に指定すると2サイズのマルチアイコンを作成することが可能です。
このサイトでは、3サイズまでのマルチアイコンを作成することができるので、ウェブブラウザ用の大きさ16x16ドット、デスクトップ用の大きさ32x32サイズ、エクスプローラー用の大きさ48x48サイズに対応させることが可能です。
と言う事で、それぞれの3種類のサイズ(16x16ドット、32x32ドット、48x48ドット)の画像をPNGまたは、GIFで作成します。

それをfavicon.icoを作ろう!のサイトで指定して、favicon.icoを作成します。
このfavicon.icoをサーバーにアップロードして、

<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon" />

のLINKタグを、<HEAD> ~ </HEAD> 内に設定し、再構築して完了です。
これで、乱れることなく、その場所に合ったサイズのファビコンが綺麗に表示されるようになりました(^。^)

Clip to Evernote
このエントリーをはてなブックマークに追加



トラックバックURL

このエントリーのトラックバックURL:
http://masaa.me/cgi-bin/mt-tb.cgi/616

コメントする