ブラウザに依存する仕様ですが、ファビコン(Favicon)をHTML内で指定すると、
そのアイコンがブックマーク(お気に入り)リストやブラウザアドレス表示欄に表示されます。
以下の矢印部分が、IE(Internet Explore)のアドレス表示欄のファビコン例です。
また、タブブラウザではタブに表示されたページタイトルと一緒にこのアイコンが表示されます。
またシステム依存ですがローカルで別名保存した場合や
ショートカットのリンクファイルにもこのアイコンが使われます。
HTMLでファビコンを指定すには、head要素の中でlink要素を 次のように書きます。
単独でも効果があるようですが、ブラウザ発展の経緯から両方指定するのが望ましいとされています。
<link rel="shortcut icon" href="favicon.icoのパス" type="image/vnd.microsoft.icon" > <link rel="icon" href="favicon.icoのパス" type="image/vnd.microsoft.icon" >
ファイル名は必ずfavicon.icoにしなければならないという規則はありませんが、
ドキュメントルートのディレクトリにfavicon.icoという名称のファイルを
設置しておくだけで、
上記タグを書かなくても表示できるブラウザが多くなっています。
このサイトでは、ルートディレクトリに (favicon.ico)のアイコンを置いて、
このページだけ 後述するファビコンの指定をheadでしています。
この仕様はマイクロソフトによって提案され、お気に入りに登録しなければアイコンを読み込まないものでした。
それを利用してお気に入りに登録数の計数を行う使われ方をしていました。
その後でお気に入りに登録しなくても読み込むブラウザの出現により、この使われ方が無くなりました。
また、rel属性値に半角を含む"shortcut icon"の表現が、W3Cの勧告に従わない形式であるため
rel="icon"の表現を使うブラウザがありました。
現在では iconフォーマットがIANAにimage/vnd.microsoft.iconで登録され、他にtype="image/png"やtype="image/gif"も可能になっています。
ブラウザのバージョンによっては対応してないものもあり、
現時点(2012年3月)では、上記2行を記述するのが良いとされています。
1行目がIE用で、2行目はFireFoxに使われます。なお 使われる画像のファイル拡張子を簡単に紹介します。
このページの記述例を以下に示します。(IE7では画像の形式がWindowsのicon形式ファイルでないと表示されません。
IE7ではローカルに置いたアイコンファイルに対応せず、サーバに置いた場合だけ可能でした。
また、FireFoxではアニメーションGIFも対応します。それに対応した書き方です。)
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" href="favicon.gif" type="image/gif">
このページだけ、上記のファビコン指定をしています。
そこで使っている2つのファイルを示します。
favicon.icoがで、 favicon.gifが
のアニメーションGIFです。
ドキュメントルートには、別途のfavicon.icoが置いてあるので、このページだけこのアイコンが使われるようになります。