【ブラウザ・バージョン別】HTMLのfaviconの書き方まとめ

今回はHTMLのfaviconの書き方をブラウザ別にまとめてみました。faviconは書き方が色々あって結局どうすればいいのかよくわからなくなりがちですからね…

 

非推奨のrel=”shortcut”

時々以下のコードを見かけることがあると思います。

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

 

rel属性にshortcutが入った指定です。

しかし、これはIE8以下に対応する必要があるときのみ指定するものです。shortcutは非推奨になっているので、基本的に書かないようにしましょう。

他のIEのバージョンやブラウザならshortcutがなくても全然問題ありません。

 

IE8以下を含めたIE、Chrome、Firefox、Safari、Opera、Edgeの場合

書き方は以下の通り。

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

 

ポイントは2つです。

  1. 拡張子は.icoのみ有効
  2. shortcutが必要

 

pngなどは使えないので注意しましょう。

 

IE9以上のIE、Chrome、Firefox、Safari、Opera、Edgeの場合

書き方は以下の通り。

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

 

どちらの書き方でも同じです。

ポイントは3つ。

  1. 拡張子は.icoのみ有効
  2. shortcutは書かない
  3. type属性に上の2つのどちらかが必要

 

shortcutはIE8の場合のみに記述するので、それ以外の場合は書かないようにします。

type属性は上の方が短いので個人的にこっちがおすすめです。まあ好きな方を書けばいいんですけどね。

 

IE11以上のIE、Chrome、Firefox、Safari、Opera、Edgeの場合

この場合は.pngや.gifもファビコンとして使うことができます。

拡張子によって書き方が少し違うので注意しましょう。

 

.icoの場合

書き方は以下の通り。一番シンプルです。

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

 

.pngや.gifの場合

「type=”image/拡張子”」という記述が必要になります。拡張子は.pngか.gifのどちらかを指定します。

.pngの場合↓

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

 

.gifの場合↓

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