Comment changer le favicon du CLI d'Angular

Question

Comment puis-je changer le favicon par défaut qui est défini par le CLI d'Angular ?

J'ai essayé plusieurs choses, mais il affiche toujours le logo Angular comme favicon, même si j'ai supprimé cette icône (favicon.ico dans le dossier src). Il s'affiche toujours, et je ne sais pas d'où il est chargé.

J'ai remplacé cette icône par une autre, mais elle affiche toujours le logo Angular :

<link rel="icon" type="image/x-icon" href="favicon.ico">

Answer 1

<link rel="icon" type="image/x-icon" href="#">

Ajoutez la source de votre icône et redémarrez l'application, elle changera.

Answer 2

J'ai essayé plusieurs de ces solutions mais sans succès. Celle qui a fonctionné pour mon application angulaire 5 est la suivante :

index.html : Commentez votre balise de lien

 <!-- <link rel="icon" type="image/png" href="src/assets/images/favicon.ico"> --> 

.angular-cli.json : laissez le type d'élément en ".ico".

 "assets": [
      "assets",
      "favicon.ico"
    ],

ENFIN

• Dans la structure du dossier de votre projet, le favicon.ico doit se trouver dans le dossier src ex : ( C:\Dev\EPS\src ). Il n'est PAS nécessaire de l'avoir dans votre dossier d'actifs puisque vous n'y faites pas référence.

• Assurez-vous que votre icône n'est pas cassée (votre icône doit être lisible dans l'explorateur de fenêtres, c'est-à-dire pas d'icône de fenêtre cassée).

• doit être de dimension 32 x 32

Answer 3

Assurez-vous que lorsque vous utilisez une image d'icône, il ne s'agit pas d'une extension manipulée, comme si vous téléchargez un png puis changez manuellement son extension de png à icon . Dans ce cas, votre image sera corrompue. Et le navigateur ne comprend pas.

J'ai fait cette erreur, mais après avoir utilisé l'image originale de l'icône, elle a commencé à fonctionner.

Answer 4

Vérifiez votre balise de lien sur le fichier index.html qui devrait ressembler à ceci.

<link red="icon" type="image/x-icon" href="favicon.ico">

Vérifiez le nom du fichier favicon.ico dans le répertoire /src.

3. relancer Angular avec l'application ng serve and refresh.

S'il ne s'affiche pas (ou si quelque chose ressemble à un ancien fichier favicon.ico), essayez de rafraîchir le chemin du favicon pour charger le fichier favicon.ico (par exemple, rafraîchir yourdomain.com/favicon.ico).

Answer 5

J'ai eu le même problème.

Si vous utilisez un Mac, vous devrez vider le cache ( Option + ⌘ + E ) et recharger la page en plus de redémarrer l'application (et bien sûr changer le chemin dans index.html).