iPentec.com / Doc / HTML

ページに favicon を設定する - HTML

ページに favicon を設定するHTMLのコードを紹介します。

概要

faviconを設定するには headタグ内に link タグを利用しrel属性に "shortcut" を指定します。

補足

faviconはページのHTMLファイルがあるホストと同じホストに配置します。(別のドメインには配置しない)

サイトのルートにある 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以降で対応

著者

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。