<link rel="icon" href="">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | メタデータ・コンテンツ |
| 利用場所 | メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素内 |
| 内容 | 無し（空要素） |
link要素で、オリジナルのファビコン（Favicon）を指定することができます。
- ファビコンとは、ブラウザのタブやブックマーク一覧などに表示される小さなアイコンのことです。
<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要素による指定は不要となります。
- ICO形式でファビコン用の画像を作成する。
- ファイル名を favicon.ico にする。
- 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"
使用例
<!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>