サイト制作で忘れられがちな印象があるfaviconの設定ですが、とっても重要なので正しい書き方で設定しましょう！

<link>でfaviconを指定することがありますが、以下の記述をよく見かけるかと思います。

<link rel="shortcut icon" href="/path/favicon.ico">

rel属性にshortcutの記述が必要なのは、IE8以下の対応が必要なときのみです。

shortcutは非準拠ですので使わないようにしましょう。

古いブラウザに対応する必要がないサイトであれば、rel属性にshortcutは不要ですし、ファビコンの画像もpngやgifが問題なく使用できます。

そこで、どのブラウザまで対応するかによりどう記述すればよいかが変わってくるので、一覧にまとめました。

IE8以下も含めたIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法

• 拡張子は.icoのみ使用可能
• rel属性にshortcutが必要

<link rel="shortcut icon" href="/path/favicon.ico">

IE9以上のIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法

• 拡張子は.icoのみ使用可能
• rel属性にshortcutは不要
• type属性に以下どちらかの記述が必要

<link rel="icon" type="image/x-icon" href="/path/favicon.ico">
<!--もしくは-->
<link rel="icon" type="image/vnd.microsoft.icon" href="/path/favicon.ico">

IE11以上のIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法

• 拡張子は.icoの他にpngやgifも使用可能
• rel属性にshortcutは不要
• pngやgifを使用する場合はtype属性にimage/pngのような記述が必要

icoを使用する場合

一番シンプルで短い記述になります。

<link rel="icon" href="/path/favicon.ico">

pngやgifを使用する場合

type属性にimage/pngやimage/gifの指定が必要です。

<link rel="icon" type="image/png" href="/path/favicon.png">

<link rel="icon" type="image/gif" href="/path/favicon.gif">

サイズごとに指定する場合

sizes属性が使えます。

<link rel="icon" type="image/png" href="/path/favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/favicon-32.png" sizes="32x32">

参考リンク