Reactのファビコン
React は <head> をレンダリングしません。ファビコンはindex.html にあります。 favicon.ico を /public にドロップしてリンクします。最新のセットアップには、SVG および PNG のバリアントも同梱されています。
Vite と CRA はどちらもルートで /public を提供するため、/favicon.ico がデフォルトの検出パスになります。バンドラー構成は必要ありません。
高 DPI ディスプレイと PWA インストール プロンプトの場合は、180×180 apple-touch-icon と 512×512 PNG を /public に追加し、index.html にリンクします。
使い方
- 1
マルチサイズの .ico を生成する
512×512 ソースでファビコン ジェネレーターを使用してください。
- 2
/public にドロップします
そこにfavicon.ico、favicon.svg、apple-touch-icon.pngを配置します。
- 3
Index.html 内のリンク
<link rel="icon" href="/favicon.ico"> と <link rel="icon" type="image/svg+xml" href="/favicon.svg"> を追加します。
今すぐ試す
React 対応のファビコンを構築する
ファビコンジェネレーターよくある質問
Vite React アプリのファビコンはどこにありますか?+
/public/favicon.ico (ベクター バリアントが必要な場合は /public/favicon.svg)。
ダークモードのファビコンを追加するにはどうすればよいですか?+
<style>@media (prefers-color-scheme: dark) {...}</style> ブロックを持つ単一の SVG を使用します。
私のファビコンが開発環境に読み込まれないのはなぜですか?+
タブをハード更新します。ブラウザは、リロード後も含めて、オリジンごとに /favicon.ico をキャッシュします。