rel="icon" リンクタグの解説
ページの <head> にある <link rel="icon"> タグは、どのファイルをファビコンとして使うかをブラウザに伝えます。href は画像を指し、type はその MIME タイプを与え、sizes はブラウザが最適なものを選べるようファイルが保持するピクセル寸法を列挙します。icon の link タグは（サイズやフォーマットごとに）複数含めることができ、ブラウザが最も適したものを選びます。
このタグが運ぶ四つのもの
rel="icon" は関係を宣言します。すなわち、このファイルはこのドキュメントのアイコンだ、ということです。href は画像へのパスです。type は MIME タイプ（image/x-icon、image/png、image/svg+xml）で、使えないフォーマットをブラウザがスキップできます。sizes は "32x32" のようにファイルが含む寸法か、スケーラブルな SVG では "any" を列挙します。
ブラウザは head 内のすべての icon リンクを読み、それから描画する表示面（タブ、ブックマーク、より大きなタイル）に最も合うものを選びます。だからこそ実際の head には一つではなく複数のタグが並び、それらはすべて body の前、head に属するのです。
モダンなアイコンリンクのセット
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />5 つのタグが、それぞれ別の利用側を狙っています。ブラウザは理解できないものを無視し、残りから最良のものを選びます。
各属性の役割
| 属性 | 目的 |
|---|---|
| rel | 関係：ファビコンなら "icon"、iOS なら "apple-touch-icon" |
| href | 画像ファイルへのパス |
| type | MIME タイプ。描画できないフォーマットをブラウザがスキップできる |
| sizes | ファイルが保持する寸法（例："32x32"）、または SVG なら "any" |
rel="icon" に関するよくある質問
icon リンクに type 属性は必要ですか？
任意ですが便利です。type があれば、使えないフォーマットを先にダウンロードせずスキップできます。PNG と SVG のリンクには付ける価値があり、それ以外の場所でも無害です。
icon の link タグは複数持てますか？
はい、通常は複数持つべきです。複数のサイズとフォーマットを宣言すると、各表示面が最も近いものを選べます。一枚の大きな画像をタブ用に縮小し、ホーム画面用に拡大する、ということをせずに済みます。
link タグはどこに置きますか？
ドキュメントの <head> です。ブラウザは head を解析している間にファビコンをリクエストするので、body に置かれたタグは初回読み込みで使うには遅すぎます。