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

Déplacez favicon.ico dans vos actifs, puis dans le dossier img, et après cela, modifiez uniquement la balise de lien de votre icône dans l'en-tête. Cela m'a aidé lorsque le favicon ne s'affichait pas du tout.

Answer 2

Pour les futurs lecteurs, si cela vous arrive, votre navigateur veut utiliser l'ancienne favicon mise en cache.

Suivez les étapes suivantes :

1. Maintenez la touche CTRL enfoncée et cliquez sur le bouton "Actualiser" de votre navigateur.
2. Maintenez la touche Shift enfoncée et cliquez sur le bouton "Rafraîchir" de votre navigateur.

Fixe.

Answer 3

Veuillez suivre les étapes ci-dessous pour changer l'icône de l'application :

1. Ajoutez votre fichier .ico dans le projet.

2. Allez dans angular.json et dans "projects" -> "architect" -> "build" -> "options" -> "assets" et faites ici une entrée pour votre fichier icône. Référez-vous à l'entrée existante de favicon.ico pour savoir comment faire.

3. Allez dans index.html et mettez à jour le chemin du fichier d'icône. Par exemple,

4. Redémarrez le serveur.

5. Rafraîchissez le navigateur et vous êtes prêt à partir.

Answer 4

J'ai joué avec ça pendant un petit moment. Il s'avère que le favicon est apparemment géré par un module node appelé @scematics (au moins dans Angular5).

Vous pouvez modifier votre favicon dans ce dossier :

[YourProjectName]\node_modules\@schematics\angular\application\files\__sourcedir__

Dans ce dossier, il devrait y avoir un favicon.ico, c'est celui qui est chargé. Je suis sûr que cela ne s'applique pas à tout le monde mais ça a marché pour moi.

J'espère que cela vous a aidé. Bon codage ! :D

Answer 5

Pour ceux qui ont besoin d'un favicon ajouté dynamiquement, voici ce que j'ai fait avec un initialisateur d'application :

import { APP_INITIALIZER, FactoryProvider } from '@angular/core'

export function faviconInitFactory () {

 return () => {
  const link: any = document.querySelector(`link[rel*='icon']`) || document.createElement('link')
  link.type = 'image/x-icon'
  link.rel = 'shortcut icon'

  if (someExpression) {
    link.href = 'url' || 'base64'
  } else {
    link.href = 'url' || 'base64'
  }

  document.getElementsByTagName('head')[ 0 ].appendChild(link)
}

}

export const FAVICON_INIT_PROVIDER: FactoryProvider = {
  provide: APP_INITIALIZER,
  multi: true,
  useFactory: faviconInitFactory,
  deps: []
}

Il suffit de supprimer le fichier fav.ico sous src/ et d'ajouter ceci. La favicon sera ajoutée avant le démarrage de l'application