Meilleur générateur de favicon pour React
Une app React classique (Vite ou Create React App) n'a aucune convention d'icônes intégrée. Vous mettez les fichiers dans le dossier public et écrivez les balises link dans index.html vous-même. Le bon générateur vous livre les deux, pour que rien ne soit laissé au hasard.
Ce qui compte vraiment sur React
React lui-même ne rend rien dans le head du document pour vous. L'icône vit dans le dossier public et est déclarée dans index.html, donc le générateur doit produire à la fois les fichiers et les balises exactes à coller. Un outil qui vous donne des images mais pas de markup laisse justement la moitié qui casse réellement.
L'échec courant, c'est un unique favicon.ico et rien d'autre, ce qui couvre l'onglet du bureau mais laisse iOS et Android sur leurs secours. Un set complet plus les balises correspondantes est ce qui fait apparaître l'icône partout où elle devrait l'être.
Les critères qui comptent sur React
| Ce qu'il faut chercher | Pourquoi ça compte sur React | Comment le générateur ici s'en charge |
|---|---|---|
| Fichiers plus balises | React ne déclare rien dans le head pour vous | Exporte les fichiers du dossier public et les balises à coller dans index.html |
| Set de tailles complet | Un seul ICO laisse le mobile sur les secours | favicon.ico, chaque PNG, apple-touch et les tailles Android |
| Manifest inclus | Les installations PWA lisent les icônes depuis le manifest | Livre manifest.json câblé aux tailles exportées |
| Vite ou CRA | Les deux servent les assets public de la même façon | Le guide fonctionne pour Vite et Create React App indifféremment |
Le générateur vs un unique favicon.ico
Un set complet plus les balises
Start hererecommandé
- Chaque taille, de l'onglet à 16px à l'icône d'installation 512
- Les balises link et manifest exactes à coller
- Icône apple-touch, donc les écrans d'accueil iOS sont couverts
- manifest.json câblé pour les installations Android et PWA
Se contenter de déposer favicon.ico
- Couvre l'onglet du bureau et rien de plus
- iOS retombe sur une capture d'écran à l'écran d'accueil
- Les installations Android affichent une icône générique
- Pas de manifest, donc l'invite PWA semble inachevée
Où vont les fichiers de favicon dans une app React ?
Dans le dossier public, référencés par des balises link dans index.html. Ni Vite ni Create React App n'injectent le markup des icônes pour vous, donc le générateur doit vous donner les fichiers et les balises ensemble. Les fichiers dans public sont servis depuis la racine du site, donc une balise comme /favicon.ico se résout directement.
The step-by-step for React
You've picked the tool. Here's the exact install for React.