Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<link rel="icon"> / <link rel="preload">

<link rel="icon"> / <link rel="preload">

『link rel="icon"』はブラウザのタブや検索結果に表示されるファビコンを指定する要素で、『link rel="preload"』はリソースの先読みを指示してページの表示速度を向上させるために使用します。

構文

<!-- ファビコン（SVG推奨、PNG・ICOもサポート） -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="icon" href="/favicon.ico">

<!-- iOS・iPadOS向けホーム画面アイコン -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- preload: フォントの先読み -->
<link rel="preload" href="/fonts/NotoSansJP.woff2"
      as="font" type="font/woff2" crossorigin>

<!-- preload: 重要なCSSの先読み -->
<link rel="preload" href="/css/style.css" as="style">

<!-- prefetch: 次のページで使うリソースを先読み（低優先度） -->
<link rel="prefetch" href="/next-page.html">

rel属性の値一覧

rel の値	概要
icon	ブラウザのタブ・ブックマーク・検索結果に表示されるファビコンを指定します。
apple-touch-icon	iOSやiPadOSでホーム画面に追加した際に表示されるアイコンを指定します。推奨サイズは180×180px です。
preload	現在のページで近いうちに必要になるリソースを優先的に先読みします。フォント・CSS・画像・スクリプトなどに使用します。
prefetch	次のページで使う可能性があるリソースを低優先度で先読みします。ブラウザのアイドル時間に取得されます。
preconnect	外部ドメインへの接続（DNS解決・TCPハンドシェイク・TLSネゴシエーション）を事前に確立します。
dns-prefetch	外部ドメインのDNS解決のみを事前に行います。preconnect より軽量です。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">

  <!-- ファビコン（SVG対応ブラウザ優先、非対応はPNG・ICOにフォールバック） -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" href="/favicon.png" type="image/png" sizes="32x32">
  <link rel="icon" href="/favicon.ico" sizes="any">

  <!-- iOS向けホーム画面アイコン -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

  <!-- Google Fontsへの事前接続 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- 重要なフォントを先読み（表示崩れ防止） -->
  <link rel="preload"
        href="/fonts/NotoSansJP-Regular.woff2"
        as="font"
        type="font/woff2"
        crossorigin>

  <!-- 次のページを先読み -->
  <link rel="prefetch" href="/page2.html">

  <link rel="stylesheet" href="/css/style.css">
  <title>サンプルページ</title>
</head>
<body>
  <h1>パフォーマンス最適化の例</h1>
</body>
</html>

実行結果

ブラウザのタブにSVGまたはPNGのファビコンが表示されます。iPhoneでホーム画面に追加すると180×180pxのアイコンが使用されます。フォントのpreloadにより、フォントファイルの取得がCSS解析を待たずに開始されるため、テキストが正しいフォントで描画されるまでの時間が短縮されます。

<!-- ブラウザの動作イメージ -->
ページ読み込み開始
  ↓ 即座に開始（preload）
  ├ NotoSansJP-Regular.woff2 の取得
  ├ fonts.googleapis.com への接続確立（preconnect）
  ↓ CSS解析完了後
  └ フォント適用（ダウンロード済みのため即時適用）
アイドル時
  └ page2.html の先読み（prefetch）

概要

ファビコンのフォーマットは現在SVGが最も推奨されています。SVGはベクター形式のためどのサイズでも鮮明に表示され、ダークモードへの対応もCSSで記述できます。ただしSVGに対応していない古いブラウザ向けに、PNGやICOをフォールバックとして記述しておくことが推奨されます。複数の『link rel="icon"』を記述した場合、ブラウザは対応可能な最後のものを選択するため、SVGを最初に記述し、ICOを最後に記述するのが定番の書き方です。

『link rel="preload"』は現在のページで確実に使うリソースの取得を早める手段です。特にWebフォントは、CSSを解析してから取得が始まるため表示が遅れがちです。preloadを使うとHTMLの解析と同時に取得を開始できます。フォントのpreloadには必ず『crossorigin』属性を付けてください。付け忘れると同じフォントが二重に取得される問題が発生します。

『preload』は使い過ぎると逆効果になります。実際にページ内で使われないリソースをpreloadすると、本当に必要なリソースの取得を遅らせてしまいます。「このページで確実に近いうちに使う」ものに絞って指定してください。外部サービスのドメインに接続するだけで速度改善したい場合は、より軽量な『preconnect』や『dns-prefetch』が適しています。