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

対応:		HTML5（2014）

『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属性の値一覧

『preload』は現在のページで必ず使うリソースを先読みし、『prefetch』は次のページで使うかもしれないリソースを先読みします。フォントファイルのpreloadには『crossorigin』属性が必要です。これはブラウザのセキュリティ仕様（CORS）により求められます。

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

サンプルコード

sample_link_icon_preload.html

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

  <!-- ファビコン -->
  <link rel="icon" href="/img/favicon.png" type="image/png" sizes="32x32">

  <!-- 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解析を待たずに開始されるため、テキストが正しいフォントで描画されるまでの時間が短縮されます。

サンプルページはこちら

概要

ファビコンのフォーマットは現在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』が適しています。

ダークモード対応のSVGファビコン

SVGファビコンはCSS『prefers-color-scheme』メディアクエリを内部に持てます。これにより、ライトモード・ダークモードに応じてファビコンの色を自動的に切り替えることができます。

<!-- favicon.svg の内容（favicon.svgファイルに記述する） -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    /* ライトモードは黒、ダークモードは白 */
    circle { fill: #333; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #fff; }
    }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

<!-- HTMLでの読み込み（SVGを先頭、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">

preloadの as 属性と対応するリソース種類

『rel="preload"』を使う際に指定する『as』属性の値は、リソースの種類によって決まります。正しく指定しないと先読みの優先度が正しく設定されません。

as の値	対象リソース	例
font	Webフォントファイル	NotoSansJP.woff2
style	CSSファイル	critical.css
script	JavaScriptファイル	app.js
image	画像ファイル	hero.webp, icon.png
fetch	XMLHttpRequest・fetch APIで取得するリソース	data.json（crossorigin必須）
document	iframeで使うHTMLドキュメント	embed.html

<!-- ヒーロー画像をpreload（WebP + PNG フォールバック対応） -->
<link rel="preload" href="/img/hero.webp" as="image" type="image/webp">

<!-- fetchでJSON取得を先読み -->
<link rel="preload" href="/api/data.json" as="fetch" crossorigin>

<!-- クリティカルCSSを先読みして即適用 -->
<link rel="preload" href="/css/critical.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">