sizes属性

link要素のsizes属性は、アイコンの大きさを指定する任意属性。

ブラウザ対応 なし

構文

<link href="URL" rel="icon" sizes="幅x高さ|any">

幅x高さ|any

幅x高さ
xかXの左に幅、右に高さを指定。
幅x高さ 幅x高さ 幅x高さのように、半角スペース区切りで、複数のサイズを指定することもできる。
any
アイコンが、SVG画像のような、大きさを変更できる画像であることを示す。

要点

  • link要素のsizes属性は、アイコンの大きさを指定する属性である。
  • sizes属性は、rel属性値がiconのときだけ有効。

サンプルコード

<link href="sample-link-sizes.icon" rel="icon" type="image/vnd.microsoft.icon" sizes="16x16">

サンプル

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<link href="sample-link.ico" rel="icon" type="image/vnd.microsoft.icon" sizes="16x16 32x32">
		<title>link要素のsizes属性のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>見出し[h1]</h1>
		<article>
			<h2>見出し[H2]</h2>
			<p>記事セクション。</p>
		</article> 
	</body>
</html>

実際の表示

別窓で表示。

サンプルの動作について

「別窓で表示」すると、ブラウザのタブなどにファビコンを表示する。