Favicon pour React
React ne gère pas le <head> à votre place — le favicon vit dans index.html. Placez votre favicon.ico dans /public et déclarez-le ; les configurations modernes ajoutent aussi un SVG et un PNG.
Vite et CRA servent tous deux /public à la racine, ce qui fait de /favicon.ico le chemin de découverte par défaut. Aucune configuration du bundler n'est nécessaire.
Pour les écrans haute densité et les invites d'installation PWA, ajoutez un apple-touch-icon de 180×180 et un PNG de 512×512 dans /public, puis déclarez-les dans index.html.
Comment ça marche
- 1
Générer un .ico multi-tailles
Utilisez notre générateur de favicon avec une source de 512×512.
- 2
Placer dans /public
Déposez-y favicon.ico, favicon.svg et apple-touch-icon.png.
- 3
Déclarer dans index.html
Ajoutez <link rel="icon" href="/favicon.ico"> et <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Essayez maintenant
Créer un favicon prêt pour React
Générateur de FaviconFAQ
Où placer le favicon dans une app Vite React ?+
/public/favicon.ico (et /public/favicon.svg si vous voulez une variante vectorielle).
Comment ajouter un favicon adapté au mode sombre ?+
Utilisez un SVG unique avec un bloc <style>@media (prefers-color-scheme: dark) {...}</style>.
Pourquoi mon favicon ne se charge pas en développement ?+
Faites un rechargement forcé (Ctrl+F5). Les navigateurs mettent /favicon.ico en cache par origine, même entre les rechargements classiques.
Outils associés
Générateur de Favicon
Générez un pack complet de favicons (ICO + PNG) pour chaque appareil et navigateur.
Convertisseur PNG en ICO
Convertisseur PNG vers ICO en ligne gratuit pour icônes Windows, applications et favicons de sites web.
Convertisseur SVG en PNG
Pixellisez des graphiques vectoriels SVG en PNG à n'importe quelle résolution.