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"が定義(www.w3.org)されました。

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"/>