デバッグ中にタブを20個も開いたままにして、目的のページが見つからずイライラした経験はありませんか？GitHubはこの問題を鮮やかに解決しています。メインのダッシュボードは標準の黒猫アイコンですが、通知画面に移動すると、Faviconが青いインボックスのアイコンに切り替わります。Google Workspaceも同様です。同じドメイン下で、Docsは青、Sheetsは緑のアイコンを使用しています。
このようなさりげない視覚的な手がかりこそが、multiple favicons different pages（ページごとに異なるFavicon）を設定することが、UXの劇的な向上につながる理由です。省略されたタブのタイトルを読ませることなく、ユーザーが今どこにいるのかを直感的に伝えます。
私たちは通常、サイトアイコンをルートディレクトリに置くグローバルなアセットだと考えがちです。しかし、ブラウザはルートディレクトリなど気にしていません。ブラウザが気にするのは、ドキュメントのhead内にある<link>タグだけです。2026年現在、生のHTMLを書いている場合でも、最新のフレームワークを使用している場合でも、ルートごとに異なるアイコンを配信する具体的な方法をお見せしましょう。
なぜルートごとにアイコンを変えるのか？
「うちのブランドにはロゴが1つしかないのに、なぜそれを分割する必要があるのか？」と思うかもしれません。
コンテキストがすべてです。ユーザーが公開されているマーケティングサイトを閲覧しているとき、彼らはあなたのブランドを評価しています。そこでは標準のロゴが完璧に機能します。しかし、複雑なSaaSアプリケーションにログインすると、彼らのコンテキストは「評価」から「生産性」へとシフトします。
あるタブでドキュメントを開き、別のタブで支払いポータルを開き、さらに別のタブでメインアプリを開いている場合、単一のロゴでは、ナビゲートするためにタブの小さな文字を読まざるを得ません。ページごとに複数のFaviconを活用することで、視覚的なマップを作成できます。管理画面のロゴの背景を白から濃い青に変更するといったわずかな色の変化だけで、認知負荷は即座に軽減されます。
ページごとに異なるFaviconを設定する方法
ステップ 1: アセットフォルダを整理する
コードに触れる前に、すべてをpublicのルートに放り込むのはやめましょう。マーケティングサイトと管理ダッシュボードがある場合は、2つの異なるアイコンセットが必要です。Mzu favicondlを使用してセットを生成し、専用のサブディレクトリに配置することをお勧めします。
/public
/icons
/marketing
favicon.ico
icon.svg
apple-touch-icon.png
/dashboard
favicon.ico
icon.svg
apple-touch-icon.pngこれにより、パスがクリーンに保たれ、ブランディングを更新する際の誤った上書きを防ぐことができます。
ステップ 2: 静的HTMLのアプローチ
静的サイトを構築している場合や、従来のテンプレートエンジン（BladeやJinjaなど）を使用している場合は、レイアウトファイルのパスを入れ替えるだけです。ブラウザはHTMLを上から下へ解析し、href属性で指定されたものをリクエストします。
マーケティングページの場合、<head>は次のようになります。
<link rel='icon' href='/icons/marketing/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/icons/marketing/apple-touch-icon.png'>ダッシュボードページの場合は、異なるレイアウトブロックをレンダリングします。
<link rel='icon' href='/icons/dashboard/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/icons/dashboard/apple-touch-icon.png'>今年必要な正確なタグを再確認したい場合は、Favicon HTMLコードのチートシートをご覧ください。
ステップ 3: Next.js App Routerのアプローチ
最新のフレームワークでは、これが信じられないほどエレガントに行えます。Next.js (App Router) では、メタデータはルートセグメントにスコープされます。カスタムのドキュメントヘッドを書いたり、手動でタグを注入したりする必要はありません。
グローバルなfavicon.icoファイルに依存する代わりに、特定のpage.tsxまたはlayout.tsxファイルでメタデータオブジェクトをエクスポートします。
// app/dashboard/layout.tsx
export const metadata = {
title: 'Admin Dashboard',
icons: {
icon: '/icons/dashboard/icon.svg',
apple: '/icons/dashboard/apple-touch-icon.png',
},
};Next.jsは、/dashboard配下の任意のルートに対してこれらの特定のタグを自動的に注入し、ルートレイアウトで定義されたグローバルアイコンを上書きします。これは、Reactアプリケーションでページごとに複数のFaviconを処理する最もクリーンな方法です。
避けるべきよくある落とし穴
- 強力なブラウザキャッシュ: ページ固有の新しいアイコンをデプロイしたのに、Chromeが頑なに古いグローバルロゴを表示することがあります。ブラウザはFaviconを強力にキャッシュします。開発中にこれを修正するには、アイコンのパスにクエリ文字列を追加します（例：
href='/icons/dashboard/icon.svg?v=2'）。それでも解決しない場合は、Faviconキャッシュをクリアする方法のガイドをお読みください。 - Web App Manifestの競合:
site.webmanifestファイルは、ユーザーがサイトをPWAとしてインストールする際に使用されるアイコンを定義します。HTMLタグとは異なり、マニフェストは通常グローバルです。ユーザーがダッシュボードをインストールした場合、Androidはルートマニフェストで定義されたマーケティングアイコンを使い続ける可能性があります。ルートに基づいて動的なマニフェストを配信するか、アプリセクション用に別の<link rel='manifest' href='/dashboard.webmanifest'>タグを使用してください。 - JavaScriptでの複雑化: ルートの変更時にDOMを操作してアイコンを入れ替えるために、複雑なReactの
useEffectフックを書いている開発者を見かけます。リアルタイムの通知バッジを構築しているのでない限り、これはやめましょう。静的なルートベースのアイコンについては、フレームワークのネイティブなメタデータAPIまたはサーバーサイドレンダリングされたHTMLに依存してください。その方が高速で信頼性が高く、ページ読み込み時の視覚的なちらつきも発生しません。
ページごとに異なるアイコンを設定するのは10分程度の構成作業ですが、アプリのライフサイクル全体で、ユーザーがタブを探すイライラを何時間も節約できます。Mzu favicondlで特定のアイコンセットを生成し、フォルダを整理して、あとはHTMLに任せましょう。