Comment enlever et customiser le favicon React (create-react-app) ?

Quand on crée un projet avec create-react-app, le favicon par défaut est celui (fort joli au demeurant) de React. Mais pour le customiser, il ne suffit pas de supprimer celui-ci et de le remplacer.

Quelques manip' sont à faire, voyons ça tout de suite, étape par étape !

1. Créer une image exploitable.

Si on n'a pas de logo ou image, en faire un à partir d’une image avec Photoshop ou Gimp par exemple. De préférence carré (si besoin, on exporte en png pour gérer la transparence et c'est encore mieux), comme ça pas besoin de la recadrer après.

Format minimal : 260 x 260.

2. Générer un favicon ici : https://realfavicongenerator.net/

Télécharger le « favicon package » puis décompresser l’archive.

3. Supprimer les images d’origines (de React) suivantes :

$ rm public/logo192.png
$ rm public/logo512.png

4. Remplacer tout le contenu dans le fichier manifest.json par :

{
"short_name": "Scratch",
"name": "Scratch Note Taking App",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff"
}

4. Supprimer ces lignes du fichier index.html :

<link rel="apple-touch-icon" href="logo192.png" />
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"><meta
  name="description"
  content="Web site created using create-react-app"
/>

5. Copier/coller les lignes générées par le "realfavicongenerator" (qui doivent ressembler à ça) :

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

6. Copier-coller les images et favicon suivant à la racine du dossier « public » (ou toutes les images, selon les besoins) :

android-chrome-192x192
android-chrome-512x512
favicon-16x16
favicon-32x32
favicon

Si vous n’avez pas effacer le fichier favicon.ico déjà présent (celui de React), quand le message « un fichier existant portant déjà ce nom existe… » apparaît, faire remplacer le fichier (ou écraser).

Si le favicon n’apparait pas, votre navigateur à peut-être besoin de nettoyer son cache pour recharger le bon favicon. Essayer de rafraichir la page avec la commande shift + cmd (ou ctrl) + R (ou bien vider votre cache manuellement).

Et voilà !