ページに favicon を設定するHTMLのコードを紹介します。
faviconを設定するには headタグ内に link タグを利用しrel属性に "shortcut" を指定します。
サイトのルートにある favicon.ico ファイルを指定する場合は下記のタグを記述します。
<html>
<head>
<link rel="shortcut icon" href="/favicon.ico"/>
</head>
<body>
<p>Test Page</p>
</body>
</html>
画像の形式はアイコン形式 (ico形式) がもともと利用できる形式でしたが、最近のWebブラウザでは、gif, png などの画像ファイルも利用できます。
ico形式の場合は16ピクセル×16ピクセルが基本ですが、より大きな32×32, 48×48, 64×64 サイズの画像を指定することもできます。Googleクローラーに対応するため、48ピクセルの倍数のサイズを設定するのがおすすめです。
| 形式 | サイズ | 補足 |
|---|---|---|
| ICO | 16×16, 32×32, 48×48, 64×64 | |
| PNG | 16×16, 32×32, 48×48, 64×64 | |
| GIF | 16×16, 32×32, 48×48, 64×64 | |
| アニメーションGIF | 16×16, 32×32, 48×48, 64×64 | 対応していないWebブラウザあWebり |
| JPEG | 16×16, 32×32, 48×48, 64×64 | Internet Explorerは対応していない |
| APNG | 16×16, 32×32, 48×48, 64×64 | 対応していないWebブラウザあWebり |
| SVG | サイズ指定なし | Internet Explorerは対応していない, Google Chrome はバージョン80以降で対応 |
