ファビコン（Favicon）とは、ブラウザで閲覧すると、アドレス欄に左横に表示しているアイコンのことで、普通はブラウザのアイコンだったりしましが、最近は独自のアイコンを表示しているサイトを多く見かけます。
このページのアドレス欄の左に付いているクマさんのアイコンがそれです。
特に最近はInternet Explorer７をはじめタブブラウザが主流になってきて同時にたくさんのページを開いて閲覧できるのは便利ですが、 開きすぎると、どこに何のページがあるかがわかりにくいです。
そんなとき、独自のファビコンが表示されていれば、目印になり便利です。
「ファビコン（Favicon）」とは、「Favorite Icon（お気に入りアイコン）」の略です。 元々はInternet Explorerの独自機能でIE6では、ただウェブページにアクセスしただけではファビコンは表示されず、「お気に入り」に登録して、はじめて表示されるものでした。
またバグのせいかたまにうまく表示されない場合もありました。
しかし現在はFirefox・Opera・Safariなど、メジャーな最新ブラウザのほとんどがサポートしていて、Internet Explorer7では、他のブラウザに追従して、アクセスしただけでファビコンを表示するようになりました。
このページのアドレス欄の左に付いているクマさんのアイコンがそれです。
特に最近はInternet Explorer７をはじめタブブラウザが主流になってきて同時にたくさんのページを開いて閲覧できるのは便利ですが、 開きすぎると、どこに何のページがあるかがわかりにくいです。
そんなとき、独自のファビコンが表示されていれば、目印になり便利です。
「ファビコン（Favicon）」とは、「Favorite Icon（お気に入りアイコン）」の略です。 元々はInternet Explorerの独自機能でIE6では、ただウェブページにアクセスしただけではファビコンは表示されず、「お気に入り」に登録して、はじめて表示されるものでした。
またバグのせいかたまにうまく表示されない場合もありました。
しかし現在はFirefox・Opera・Safariなど、メジャーな最新ブラウザのほとんどがサポートしていて、Internet Explorer7では、他のブラウザに追従して、アクセスしただけでファビコンを表示するようになりました。
使い方は簡単です。
favicon.icoという画像を作り、ウェブサーバーのドキュメントルート（index.htmlなどのhtmlファイルがある場所）にアップロードするだけです。
ウェブサーバーのドキュメントルートに favicon.ico というファイル名で置けば、 そのサイト内のすべてのページに対して有効なファビコンになります。
HTMLに一切記述を加えることなく、ただ favicon.ico というファイル名でアイコンファイルを置くだけでファビコンを表示されます。
※この方法で表示確認を行う場合はサーバにアップロードして下さい。
また、表示されなかったり、以前のアイコン画像が表示されてしまう場合はブラウザのキャッシュをクリアしてください。
またページごとにアイコン画像を変えたいとか上記の方法でうまく行かない場合は
各HTMLファイルのheda内に
<link rel="shortcut icon" href="favicon.ico">
のように記述してください。
もちろん異なる画像を使い場合はfavicon.icoの部分を対応する画像名にしてください。
画像はFirefoxやOperaなどでは、GIF画像・PNG画像・JPEG画像・BMP画像を指定してもファビコンとして機能します。 しかし、IEでは拡張子「.ico」のアイコンファイルでないと機能ないようです。
ファビコンは拡張子が"ico"という特殊なアイコンファイル（マルチアイコン）で、16ピクセルと32ピクセルの画像を両方もっている場合は、それぞれの大きさのものが使用され、ない場合は拡大または縮小されて表示されます。
それで16ピクセルの小さなアイコンだけだと、デスクトップなどに置かれた際に、拡大されて粗く見えてしまい、32ピクセルの大きなアイコンだけだと、ブラウザ上で表示される際には自動的に縮小されるため、場合によっては内容がつぶれて見えることもあります。
で、画像は16×16ピクセルの物とサイズは32×32ピクセル物と２種類用意する事がのぞましいです。
まずは画像を作成しましょう。
画像の作成はふだん使っているアプリケーション可能です。
私はドット絵に適したD-Pixed （作者のページはリンクが切れているようですが、vectorにはまだあるようです。）を使っています。
ウェブ上には、任意の画像ファイルをアイコンファイルに変換してくれるサービス「FavIcon from Pics」を利用するか、「＠icon変換」というフリーソフトを使えば、任意の画像を簡単にアイコンファイルに変換することができます。
「FavIcon from Pics」は32×32ピクセルの物だけを作っておけば自動的にマルチアイコンに変換してくれて便利です。
「＠icon変換」では16×16ピクセルの物と32×32ピクセル物をドラッグ＆ドロップして「マルチiconとして保存を選びましょう。
あとは出来たfavicon.icoをサーバーのドキュメントルートにアップロードするだけです。
favicon.icoという画像を作り、ウェブサーバーのドキュメントルート（index.htmlなどのhtmlファイルがある場所）にアップロードするだけです。
ウェブサーバーのドキュメントルートに favicon.ico というファイル名で置けば、 そのサイト内のすべてのページに対して有効なファビコンになります。
HTMLに一切記述を加えることなく、ただ favicon.ico というファイル名でアイコンファイルを置くだけでファビコンを表示されます。
※この方法で表示確認を行う場合はサーバにアップロードして下さい。
また、表示されなかったり、以前のアイコン画像が表示されてしまう場合はブラウザのキャッシュをクリアしてください。
またページごとにアイコン画像を変えたいとか上記の方法でうまく行かない場合は
各HTMLファイルのheda内に
<link rel="shortcut icon" href="favicon.ico">
のように記述してください。
もちろん異なる画像を使い場合はfavicon.icoの部分を対応する画像名にしてください。
画像はFirefoxやOperaなどでは、GIF画像・PNG画像・JPEG画像・BMP画像を指定してもファビコンとして機能します。 しかし、IEでは拡張子「.ico」のアイコンファイルでないと機能ないようです。
アイコンファイルを作る
実際にアドレスバ欄の左に表示される時の画像サイズは16×16ピクセルで、デスクトップ上に表示させると時のサイズは32×32ピクセルと小さいものです。ファビコンは拡張子が"ico"という特殊なアイコンファイル（マルチアイコン）で、16ピクセルと32ピクセルの画像を両方もっている場合は、それぞれの大きさのものが使用され、ない場合は拡大または縮小されて表示されます。
それで16ピクセルの小さなアイコンだけだと、デスクトップなどに置かれた際に、拡大されて粗く見えてしまい、32ピクセルの大きなアイコンだけだと、ブラウザ上で表示される際には自動的に縮小されるため、場合によっては内容がつぶれて見えることもあります。
で、画像は16×16ピクセルの物とサイズは32×32ピクセル物と２種類用意する事がのぞましいです。
まずは画像を作成しましょう。
画像の作成はふだん使っているアプリケーション可能です。
私はドット絵に適したD-Pixed （作者のページはリンクが切れているようですが、vectorにはまだあるようです。）を使っています。
アイコン変換する
作った画像をアイコンファイルに変換します。ウェブ上には、任意の画像ファイルをアイコンファイルに変換してくれるサービス「FavIcon from Pics」を利用するか、「＠icon変換」というフリーソフトを使えば、任意の画像を簡単にアイコンファイルに変換することができます。
「FavIcon from Pics」は32×32ピクセルの物だけを作っておけば自動的にマルチアイコンに変換してくれて便利です。
「＠icon変換」では16×16ピクセルの物と32×32ピクセル物をドラッグ＆ドロップして「マルチiconとして保存を選びましょう。
＠icon変換
あとは出来たfavicon.icoをサーバーのドキュメントルートにアップロードするだけです。
コメントする