正しいfaviconの設定方法を対応ブラウザ別にまとめる

サイト制作で忘れられがちな印象がある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">
参考リンク
私たちGlatchはコーポレートサイト制作を得意とするWeb制作事務所です。
お気軽にご相談・お問い合わせください。