Reactのファビコン

Vite と Create React App (CRA) の両方で、/public ディレクトリに配置された静的ファイルは、バンドラー処理なしでルート URL から直接提供されます。これは、/public/favicon.ico が https://yourdomain.com/favicon.ico でアクセスできることを意味します。これは、ブラウザーがファビコンを取得するために最初に試行するパスとまったく同じです。基本的な .ico セットアップには、Webpack ローダー、Vite プラグイン、またはビルド構成は必要ありません。

`npm create vite@latest` を使用して新しい Vite React プロジェクトを作成すると、スキャフォールドはすでに /public に favicon.svg を配置し、それを index.html で参照します。これは良い出発点ですが、デフォルトの SVG は一般的な Vite アイコンです。これを独自の SVG に置き換え、SVG ファビコンをサポートしていないブラウザー用のマルチサイズ .ico フォールバックを追加します。

React の作成 アプリ スキャフォールドには、デフォルトで /public に favicon.ico が含まれます。これを置き換えるには、ファイルを独自のマルチサイズ .ico で上書きするだけです。 CRA には、/public の manifest.json も含まれています。独自の PNG ファイル (192×192 および 512×512) を指すように、`icons` 配列エントリを更新します。 /public の index.html には、CRA によって挿入されたマニフェスト リンク タグがすでにあります。

マルチサイズの .ico は依然として最も重要なファイルです。 SVG ファビコンをサポートしていないブラウザ (古い Safari バージョン、一部の埋め込みツール、および Windows ショートカット作成) は、自動的に /favicon.ico にフォールバックします。単一の .ico ファイルには 16×16、32×32、48×48、および 64×64 フレームがバンドルされているため、ブラウザーは追加のリンク タグなしで適切な解像度を選択します。

高 DPI (Retina) ディスプレイの場合は、.ico に加えて明示的な PNG リンク タグを追加します。 `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` は、2 倍のアイコンが同じ解像度の .ico フレームよりも鮮明にレンダリングされる Retina 画面で PNG を使用するようにブラウザーに指示します。 .ico と PNG の両方を /public に配置します。

SVG ファビコンは、React アプリに将来性のある最高のソリューションを提供します。単一の SVG ファイルは、どのタブ サイズでも鮮明にレンダリングされ、その色をユーザーの配色に適応させることができます。 index.html に `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` を追加します。 SVG ファビコンをサポートするブラウザは、.ico よりもファビコンを優先します。次のリンク タグに単純にスキップしないブラウザ。

ダークモード SVG ファビコンは、対象ユーザーが開発者ツールやダークモード デスクトップを使用することが多いため、React アプリでは強力です。 `@media (prefers-color-scheme: dark) { :root { fill: white; } }` を使用して SVG 内に `<style>` ブロックを埋め込みます (アイコンの構造に合わせて調整されます)。この 1 つのファイルは、JavaScript や追加のタグなしで、明るいテーマと暗いテーマの両方を提供します。

モバイル ユーザーが React アプリをホーム画面に保存する場合は、apple-touch-icon が必要です。 /publicにapple-touch-icon.png(180×180)を配置し、index.htmlに`<link rel='apple-touch-icon'sizes='180x180' href='/apple-touch-icon.png'>`を追加します。これがないと、iOS はホーム画面にブランド アイコンの代わりにアプリの低解像度のスクリーンショットを表示します。

PWA としてデプロイされた React アプリの場合、/public/manifest.json (または site.webmanifest) に 192×192 および 512×512 のアイコン エントリが含まれている必要があります。これらのサイズにより、Android ホーム画面のインストール プロンプトと Chrome PWA インストール ダイアログが表示されます。 favicon generator は、PNG と、/public に直接ドロップできる事前入力されたマニフェスト テンプレートの両方を出力します。

React SPA 導入におけるファビコンのルーティングは重要です。パス /favicon.ico は、React ルーターによって傍受されるのではなく、ホストによって直接提供される必要があります。 Vercel、Netlify、および GitHub Pages はすべて、SPA に渡される前にルートで /public コンテンツを提供します。カスタム サーバーでホストしている場合は、index.html を提供するキャッチオール ルートの前に静的ファイル ミドルウェアが実行されていることを確認してください。

`npm run dev` を使用した開発中、Vite はほとんどの変更を自動的にホットリロードしますが、ファビコンの変更には手動でブラウザをハードリフレッシュする必要がある場合があります。ブラウザは、開発サーバーのリロード後も、オリジンごとに /favicon.ico をキャッシュします。開発中に強制的に更新するには、ハード更新 (Ctrl+Shift+R) するか、リンク タグに「/favicon.svg?v=2」のようなクエリ文字列を一時的に追加します。

サーバー側のレンダリング設定 (たとえば、カスタム Express サーバーを使用した React) では、express.static() ミドルウェアが React SSR ハンドラーの前に /public を提供することを確認する必要があります。 SSR ハンドラーが最初にすべてのリクエストをキャッチした場合、/favicon.ico は React によってレンダリングされ、バイナリ ICO ファイルではなく HTML を返し、ファビコンが完全に壊れます。

複数の React アプリを使用した Monorepo セットアップでは、注意深いファビコン管理が必要です。各アプリの /public フォルダーには独自のファビコンがあります。アプリ間でアイコンを共有する場合は、モノリポジトリのルートに単一の信頼できるアイコン ディレクトリを保持し、ビルド ステップ中に各 /public にファイルをコピーすることを検討してください。ビルド スクリプト内の `cp` などのツールや専用のアセット同期プラグインにより、それらの同期が維持されます。

デプロイ後、favicon tester を使用して、すべてのファビコン バリアントがパブリックにアクセスできることを確認します。運用 URL を入力し、favicon.ico、favicon.svg、apple-touch-icon.png、およびマニフェスト PNG がすべて正しく解決されることを確認します。これにより、設定が間違っている静的ファイルの提供や、開発環境では動作しても運用環境では機能しなくなるパスが排除されます。