“rel=icon”｜“rel”属性｜“link”要素:外部リソースと関連付ける｜HTML－havin' a coffee break

＃

“rel="icon"”

リンクの種類	外部リソースリンク
“body-ok”	No

“rel="icon"”が指定された“link”要素はウェブページもしくはウェブサイトを表すアイコンを指定します。

アイコンには視覚的なアイコンだけでなく、聴覚的なアイコンやそれ以外の形式を指定することもできます。ただし、一般的には画像のアイコンが指定され、ブラウザのアドレスバーやタブ、ブックマークリストに表示されるアイコンとして使用されます。

画像のアイコンのファイル形式は古いブラウザではICO形式にしか対応していない場合がありますが、現代の多くのブラウザではPNG形式や、GIF形式にも対応しています。アイコンのサイズは16px×16pxのものがあれば十分ですが、高解像度のデバイスでは32px×32pxや48px×48px、64px×64pxなどのより大きいサイズのものが使用できる場合もあります。

複数のアイコンが提供される場合は“type”属性や“media”属性、“size”属性を参考にブラウザが適切なものを選択します。

サンプルコード



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

“rel”属性の値に“icon”と併せて“shortcut”を指定する例が多くみられますが、これは歴史的な理由によるものであり、古いブラウザを考慮する必要がなければ不要です。



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

＃

属性と値

属性		値
属性	説明	値	説明
必須属性
rel=""	文書と外部リソースの関係	icon	リンク先は現在の文書を表すアイコン
rel=""	文書と外部リソースの関係	リンクタイプ	文書と外部リソースの関係
href=""	文書と関連付ける外部リソース	URL	ウェブページもしくはウェブサイトを表すアイコンのURL
任意属性
グローバル属性
crossorigin=""	外部リソースを読み込む時のCORSリクエストを設定	anonymous	CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
crossorigin=""	外部リソースを読み込む時のCORSリクエストを設定	use-credentials	CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
media=""	外部リソースが対象とするメディア	メディアクエリ	外部リソースが対象とするメディア条件
hreflang=""	外部リソースが記述されている言語	言語コード	外部リソースが記述されている言語
type=""	外部リソースのデータの種類	MIMEタイプ	外部リソースのMIMEタイプ
referrerpolicy=""	リファラーポリシーを指定	リファラーポリシー	リファラーポリシーを指定
sizes=""	アイコンのサイズ	any	サイズの調整が可能
sizes=""	アイコンのサイズ	横幅x高さ	アイコンのサイズのピクセル数
fetchpriority=""	外部リソースの読み込み時の優先度を指定する	high	同じ種類の外部リソースと比較して取得の優先度が高いことを示す
		low	同じ種類の外部リソースと比較して取得の優先度が低いことを示す
		auto	同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す
title=""	外部リソースに補足情報を付ける	テキスト	補足情報