favicon.ico は link 要素で明示的に指定するべきか

投稿

ウェブサイトですっかりお馴染みとなったファビコンですが、今まで読み込みタイミングのことをあまり考えていなかったので調べてみました。

ファビコンはICO形式のファイルを favicon.ico というファイル名でウェブサーバーのルート直下に配置することでブラウザが自動的に読み込みます。

  • 逆に言うと、今どきのブラウザはウェブページを読み込む際は favicon.ico へのアクセスも試みるので、ファビコンを設置していないサイトは裏で404レスポンスが発生していることになります。

また、link要素で明示的に指定することもできます。ファイル名や格納パスを変えたい時やPNGなど別の画像フォーマットにしたい場合はこの指定を行う必要がありますね。

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

link要素で明示的に指定するべきか

§

では、ファイル名が favicon.ico でよい場合にもlink要素での指定はするべきなのでしょうか。埋め込み画像、外部CSS、JSを含むこんなHTMLで試してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>favicon.ico はどのタイミングで読み込まれるか</title>
<link rel="stylesheet" href="style.css"/>
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/>
</head>
<body>
<p><img src="image.png" alt="画像"/></p>
<script src="script.js"></script>
</body>
</html>

ファビコンは描画に必要なスタイルシートより後に読み込ませたいため、 </head> 直前に配置しています。本当は </body> 直前にしたいところですが、link要素はhead内にしか書けないのでこのようにしています。

このとき、ファビコン指定より後ろにある画像（img）やスクリプト（script）も含めて、どういう順番で読み込みが行われるかを調べました。

ブラウザ link要素を記述しないとき link要素で指定したとき
Chrome 29 常に最後に読み込み 常に最後に読み込み
Firefox 23 常に最後に読み込み 概ねソースコード上の順番で読み込み
IE 7 〜 11 常に最後に読み込み 常に最後に読み込み
Opera 12.1 常に最後に読み込み 概ねソースコード上の順番で読み込み
Opera 16 常に最後に読み込み 常に最後に読み込み
  • IE 11 は Preview 版で確認

意外にも、多くのブラウザではソース上の順序にかかわらずファビコンは最後に読み込まれるようです。一方で Firefox と Opera 12系は、link要素の記述の有無で読み込み順序が変わりました。

気にするほどのものかと言われると微妙な気もしますが、少しでもコンテンツの読み込みに影響を与えたくなければ、ファビコン用のlink要素はあえて書かないのがよいのかもしれません。

rel属性値は icon か shortcut icon か

§

link要素で明示的に指定する場合のrel属性値は shortcut icon と icon がよく使われます。もともと、最初にファビコンを実装した IE 5 では前者の値で規定されていました。

これは Microsoft の独自仕様なわけですが、後に他ブラウザで icon を認識するような実装が行われ、HTML5では正式にiconが定義(W3C)されました。

IEについては、MSDNのドキュメント(msdn.microsoft.com)には相変わらず Shortcut Icon の記載しかありませんが、 IE 11 の Preview 版では icon も対応していることを確認しました。あわせてPNGなど他フォーマットのサポートも成されているようです。

そのため、採用する画像フォーマットやサポートするIEバージョンによって次のいずれかの対応をするとよいでしょう。

  • IE 10 以前もサポートする必要がある場合はICO形式とし、link要素を記載するなら rel="shortcut icon" とする
  • ICO以外の画像を採用する場合はlink要素の記載は必須で、 IE 10 以下はサポートできないことになるので rel="icon" とする

また、PNGを採用したいが IE 10 のサポートも続けたいという場合などは、こんな感じで2つのフォーマットを用意するのも手かと思います。

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