Frameworks
React に最適なファビコンジェネレーター
素の React アプリ（Vite や Create React App）には、アイコンの組み込み規約がありません。ファイルを public フォルダに置き、link タグを自分で index.html に書きます。適切なジェネレーターはその両方を渡してくれるので、推測に頼る部分が残りません。
React で本当に重要なこと
React 自体は、ドキュメントの head に何もレンダリングしてくれません。アイコンは public フォルダに置かれ、index.html で宣言されるため、ジェネレーターはファイルと、貼り付ける正確なタグの両方を生成しなければなりません。画像は渡すがマークアップは渡さないツールは、実際に壊れる側の半分を放置していることになります。
よくある失敗は、favicon.ico が 1 つあるだけで他に何もない状態です。これはデスクトップのタブはカバーしますが、iOS と Android はフォールバックのままになります。アイコンが表示されるべき場所すべてに現れるようにするのは、フルセットとそれに対応するタグです。
React で重要となる基準
| 確認すべきポイント | React で重要な理由 | このジェネレーターの対応方法 |
|---|---|---|
| ファイルとタグの両方 | React は head に何も宣言してくれません | public フォルダのファイルと、index.html に貼り付けるタグをエクスポートします |
| サイズのフルセット | ICO が 1 つだけではモバイルはフォールバックのままです | favicon.ico、すべての PNG、apple-touch、Android サイズ |
| manifest 同梱 | PWA のインストールは manifest からアイコンを読み込みます | エクスポートしたサイズに紐付いた manifest.json を同梱します |
| Vite または CRA | どちらも public のアセットを同じ方法で配信します | 案内は Vite と Create React App の双方に対応します |
ジェネレーター vs favicon.ico 1 つだけの場合
フルセットとタグ
Start here推奨
- 16px のタブから 512 のインストールアイコンまで、あらゆるサイズ
- 貼り付ける正確な link タグと manifest のタグ
- apple-touch アイコンにより、iOS のホーム画面もカバーされます
- Android と PWA のインストール向けに紐付けられた manifest.json
favicon.ico を置くだけの場合
- デスクトップのタブしかカバーせず、それ以上は何もありません
- iOS はホーム画面でスクリーンショットにフォールバックします
- Android のインストールでは汎用的なアイコンが表示されます
- manifest がないため、PWA のインストール表示は未完成に見えます
React アプリではファビコンのファイルはどこに置きますか？
public フォルダに置き、index.html の link タグから参照します。Vite も Create React App もアイコンのマークアップを挿入してくれないため、ジェネレーターがファイルとタグをまとめて提供する必要があります。public 内のファイルはサイトのルートから配信されるので、/favicon.ico のようなタグはそのまま解決されます。
The step-by-step for React
You've picked the tool. Here's the exact install for React.