<link rel="icon" href="">

更新日
仕様 HTML Living Standard
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素
内容 無し(空要素)

link要素で、オリジナルのファビコン(Favicon)を指定することができます。

TAG indexでは「Ti」というシンプルなファビコンを使用しています。

  • ファビコンとは、ブラウザのタブやブックマーク一覧などに表示される小さなアイコンのことです。

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

属性
必須属性(この設定を行う場合)
rel="" 現在の文書から見たリンク先の関係 icon アイコン
href="" リンク先の指定 URL アイコンの画像ファイルを指定
任意属性
type="" リンク先のMIMEタイプ image/vnd.microsoft.icon ICO形式の画像を使用する場合
image/gif GIF形式の画像を使用する場合
image/png PNG形式の画像を使用する場合
sizes="" アイコンのサイズ any 可変サイズ (SVG等、ベクター形式の画像向け)
横幅x高さ ピクセル数で指定、半角スペース区切りで複数指定可能

基本、次のようにファビコンを設定しておけば、link要素による指定は不要となります。

  1. ICO形式でファビコン用の画像を作成する。
  2. ファイル名を favicon.ico にする。
  3. favicon.ico をルートディレクトリにアップロードする。

これで、ファビコンが自動的に認識されるようになります。

上記のような設定が行えない場合、または念のため指定しておきたい場合には、link要素に次の内容を記述します。

<link rel="icon" href="favicon.ico">
  • link要素で指定する場合は、任意のファイル名 + 任意の場所にアップロードすることができます。

rel="shortcut icon" としているケースも見られますが、よほど古いブラウザを対象にするのでなければ shortcut の記述は不要です。

type属性は省略可能ですが、指定する場合は画像形式に合わせて次のように記述します。

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="favicon.gif">
<link rel="icon" type="image/png" href="favicon.png">
  • ファビコンで使用する画像は、ICO形式で作成するのが一般的です。(ICO形式に対応しているソフト、またはWeb上のツール等を使用して作成します)
  • GIF形式PNG形式に対応したブラウザも増えてきてはいるようです(?)。

sizes属性の値には、アイコンのサイズをピクセル数で指定することができます。(px の記述は不要)

sizes="32x32"

上記のように、x(エックス)で区切って横幅x高さの形式で記述します。(エックスの部分は大文字でも構いません)

複数のサイズが存在する場合(マルチアイコンの場合)は、半角スペースで区切って次のように記述します。

sizes="16x16 32x32 48x48"

サイズ調整が可能なベクター形式の画像(SVG等)の場合は、値に any を指定します。

sizes="any"

使用例

ICO形式のファビコンを指定した例

<!DOCTYPE html>
<html>
<head>

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

<title>文書のタイトル</title>

</head>
<body>



</body>
</html>

マルチアイコンのサイズを指定した例

<!DOCTYPE html>
<html>
<head>

<link rel="icon" href="favicon.ico" sizes="16x16 32x32 48x48">

<title>文書のタイトル</title>

</head>
<body>



</body>
</html>