グラフィックデザインを軸に愛とロックンロールで世界平和のために邁進するクリエイティブプロダクションのスタッフがつづる汗と涙と涎の物語。

2007年10月22日

ファビコンを投稿です!

■ファビコンとは?
お気に入りアイコン - favicon.ico(ファビコン)とは、ブラウザのアドレスバーやお気に入りのリストに表示される、16×16 の小さなアイコンのことです。 この、ウーマのサイトもアドレスバーの中にウーマくんがいますよね?これです。


■ファビコン作成の流れ

1. ファビコン用の画像を作成する
ファビコンで使用する画像を作成します。サイズは問いませんが、正方形である必要があります。作成した画像は、GIFやPNG形式等で保存しておきます。

2. ファイル形式を変換する
作成した画像は、ファビコン用の形式に変換する必要があります。アイコン作成ソフトでも変換できますが、ここではFavIcon from Pics(変換サイト)を利用して変換することにします。このサイトで変換したファイルはzip形式でダウンロードすることになるので、それを解凍して使用します。

3. ファビコンファイルをアップロードする
作成されたファビコンファイル(favicon.ico)を、サーバーにアップロードします。こんかいはこのブログの中に記事として投稿します。画面に反映されたら画像の上で右クリックし「画像を表示」します。ブラウザが切り替わりURLを確認することができます。

4. タグの設定
ページの HEADHEAD 内に、LINKタグを設定します。
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">


HREF="" に、favicon.ico ファイルへのパスを指定します。http:// で始まる絶対パス、または相対パスで指定することができます。

今回の場合は、この投稿に貼り付けてある画像がhttp://umadesign.t-galaxy.com/usr/umadesign/uma_fabi.gifなので、これをそのままリンク先にします。

IEなどでは、この設定がない場合でもファビコンを表示してくれるみたいですが、ブラウザにより挙動が異なる可能性がありますので、念のため設定しておくことをお勧めします。

※LINKタグについての詳細は、「お気に入りアイコン(ファビコン)を指定する」をご覧ください。

PageTop▲


以上で完了です。

U-MA

この記事へのトラックバックURL

http://umadesign.t-galaxy.com/t860
※このエントリーではブログ管理者の設定により、ブログ管理者に承認されるまでコメントは反映されません