Configuration des favicons dans les applications React

Configurez les ressources statiques de votre marque dans les applications React monopages. Découvrez comment associer les dossiers publics.

Où placer les fichiers favicon dans React ?

Que vous utilisiez Vite, Create React App ou Next.js, tous les fichiers statiques, comme les favicons, doivent être placés dans le répertoire public/ à la racine de votre projet.

  1. Convertissez votre fichier PNG à l'aide de notre générateur de page d'accueil pour obtenir le fichier ZIP.
  2. Extrayez tous les fichiers directement dans le dossier public/ à la racine de votre projet React.
  3. Ouvrez le fichier index.html (situé à la racine du projet pour Vite, ou dans public/ pour Create React App).
  4. Ajoutez ou modifiez les balises méta HTML standard de l'en-tête, en pointant les URL relatives vers le répertoire public :
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">