2015年3月18日水曜日

ホームページに「ファビコン(Favicon)」を追加しよう

 1、ファビコンとは?
・ブラウザのアドレスバーの端
・タブ
・ブックマーク(お気に入り)項目
・デスクトップのショートカットアイコン
などに使われてるアイコンを「ファビコン(Favicon)」といいます。
この「favicon(ファビコン)」とは、「favorite(お気に入り)+icon(アイコン)」の造語です。
ファビコンは、ファイル拡張子が「.ico」の、Windows等で一般的に使われているアイコンファイルで作成します。
※GIF・PNG・JPEG形式の画像でもファビコンとして指定できますが、古いIEでは表示出ないなどあるので、icoファイルの方が無難です

「デスクトップのショートカットアイコン」は、ブラウザの「アドレス欄に表示されているアイコン」や「ブックマーク項目」を、デスクトップ上にドラッグ&ドロップするなどの操作で作成できます。

 また、Windows+IEの「ピン留め」機能のアイコンとしても使えます。

2、設定方法
HTMLのhead要素内に以下のようなlink要素を1行記述するだけです。
「rel="shortcut icon"」の部分は必須で、そのまま記述 します。
<link rel="shortcut icon" href="favicon.ico">

実際は、ファビコンを認識させるためには上記のHTMLなどを記述する必要はありません。
ウェブサイトの最上階層に「favicon.ico」というファイル名でアイコンファイルを置いておけば、HTMLに何も記述することなく、サイト内の全ページで有効なファビコンとして認識されます。
favicon.icoという名前出ない場合やpngファイルを使う場合などは、HTMLを記載します。
もしくは、各ページごとに違うファビコン表示したい場合に、HTMLに記載しましょう。

3、アイコンの作成
フリーのアイコン変換フリーソフトを使って、icoファイルを作成します。
・複数サイズのアイコンを簡単作成「x-icon editor」
・任意の画像ファイルをアイコンファイルに変換「FavIcon from Pics」
・画像をアイコンに変換できるフリーソフト「@icon変換」


【参考URL】
http://allabout.co.jp/gm/gc/23917/
http://allabout.co.jp/gm/gc/390598/
http://allabout.co.jp/gm/gc/390854/2/
  ⇒x-icon editorの説明

0 件のコメント:

コメントを投稿