Comment changer le favicon de la CLI angulaire

Comment puis-je modifier le favicon par défaut défini par la CLI angulaire?

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

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

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

Créez une image png avec le même nom ( favicon.png) et changez le nom dans ces fichiers:

index.html:

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

angular-cli.json:

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

Et vous ne verrez plus jamais l'icône angulaire par défaut.

La taille doit être 32x32, si plus que cela, il ne s'affichera pas.

REMARQUE: cela ne fonctionnera pas avec Angular 9

Pour angulaire 9, vous devez mettre un favicon à l'intérieur des actifs, puis donner un chemin comme

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

Puisque vous avez remplacé favicon.icophysiquement le fichier, il doit y avoir un problème de mise en cache quelque part. Il y a un cache dans votre navigateur. Forcez-le à se vider en appuyant sur Ctrl+F5 .

Si l'icône par défaut est toujours affichée, essayez un autre navigateur avec un cache propre (c'est-à-dire que vous n'avez pas encore visité la page avec ce navigateur).

Effacer les raccourcis du cache: ( Source )

Windows
IE: Ctrl+ R; Firefox: Ctrl+ Shift+ R; Chrome: Ctrl+ R, ou Ctrl+ F5ou Shift+F5 .

Mac
Safari: ⌘+ R; Firefox / Chrome: ⌘+ Shift+ R.

La navigation vers le fichier a finalement résolu ce problème pour moi. Dans mon cas: http: // localhost: 4200 / favicon.ico

J'avais essayé de rafraîchir, arrêter et recommencer ng serve, et "Vider le cache et recharger dur", aucun n'a fonctionné.

Pour vous assurer que le navigateur télécharge une nouvelle version du favicon et n'utilise pas de version en cache, vous pouvez ajouter un paramètre factice à l'URL du favicon:

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

nous pouvons changer l'icône de favicon CLI angulaire. nous devons mettre le fichier icône dans le dossier "assets" et donner ce chemin dans index.html.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> C'est du travail pour moi.

J'avais également du mal avec cela, pensant que je faisais quelque chose de mal avec Angular, mais mon problème a fini par être la mise en cache de l'icône par Chrome. Le standard "Vider le cache et rechargement dur" ou le redémarrage du navigateur ne fonctionnait pas pour moi, mais cet article m'a orienté dans la bonne direction.

Cela a fonctionné spécifiquement pour moi:

Si sous Windows et en utilisant chrome, (exit chrome from taskbar) alors allez dans C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default et supprimez les fichiers Favicons-journal, Favicons puis redémarrez chrome (depuis la barre des tâches, kill all instances).

Il y a beaucoup d'autres bonnes suggestions dans ce post si cela ne fonctionne pas pour vous.

Pour Angular 6, placez la favicon.pngtaille 32x32dans le dossier des ressources et modifiez le chemin d'accès index.html. Ensuite,

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

Créez une image d'icône avec l'extension .ico et copiez-la et remplacez-la par le fichier favicon par défaut dans le dossier src.

index.html:

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

angular.json:

**"assets": [
          "src/favicon.ico",
          "src/assets"
        ],**

Déplacez favicon.ico vers vos actifs, puis vers le dossier img, et après cela, ne modifiez que votre balise de lien d'icône dans l'en-tête. Cela m'aide quand le favicon n'était pas du tout affiché.

Appuyez sur Ctrl+ F5dans la fenêtre du navigateur

POUR RECHARGER FAVICON POUR TOUT PROJET WEB:

Faites un clic droit sur le favicon et cliquez sur «recharger». Fonctionne à chaque fois.

Pour les futurs lecteurs, si cela vous arrive, votre navigateur souhaite utiliser l'ancien favicon mis en cache.

Suivez ces étapes:

1. Maintenez la touche CTRL et cliquez sur le bouton "Actualiser" dans votre navigateur.
2. Maintenez Shift et cliquez sur le bouton "Actualiser" dans votre navigateur.

Fixé.

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 ce "projets" -> "architecte" -> "build" -> "options" -> "assets" et faites ici une entrée pour votre fichier icône. Reportez-vous à l'entrée existante de favicon.ico pour savoir comment le faire.

3. Accédez à index.html et mettez à jour le chemin du fichier icône. Par exemple,

4. Redémarrez le serveur.

5. Navigateur de rafraîchissement dur et vous êtes prêt à partir.

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

Vous pouvez changer 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 assez sûr que cela ne s'applique pas à tout le monde mais cela a fonctionné pour moi.

J'espère que cela a aidé. Bon codage! :RÉ

Pour ceux qui ont besoin d'un favicon ajouté dynamiquement, voici ce que j'ai fait avec un initialiseur 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: []
}

Supprimez simplement le fichier fav.ico sous src / et ajoutez-le. Le favicon sera ajouté avant le démarrage de l'application

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

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

J'ai essayé plusieurs de ces solutions, mais sans succès. Celui qui a fonctionné pour mon application angulaire 5 était le ci-dessous:

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 comme ".ico"

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

ENFIN..

• Dans la structure des dossiers de votre projet, placez le favicon.ico dans le src ex: (C: \ Dev \ EPS \ src). Vous n'avez PAS besoin de l'avoir dans votre dossier d'actifs car vous ne le référencez pas.

• Assurez-vous que votre icône n'est pas cassée (votre icône doit être lisible si elle est visualisée via l'explorateur de fenêtres aka pas d'icône de fenêtre cassée)

• doit avoir une dimension de 32 x 32

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 une pngimage 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 d'icône originale, cela a commencé à fonctionner.

Vérifiez que votre balise de lien sur le fichier index.html ressemble à ceci.

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

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

3.Rerun Angular avec ng servir et rafraîchir l'application.

4.S'il ne s'affiche pas (ou si quelque chose ressemble à un tampon de l'ancien fichier favicon.ico). essayez à nouveau d'actualiser le chemin du favicon pour charger le fichier favicon.ico (par exemple, actualisez votredomaine.com/favicon.ico)

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 de changer le chemin dans index.html).

1. Supprimer votre favicon.ico existant
2. Ajouter une nouvelle icône dans le dossier src avec le nom "favico.ico"
3. Effacez le cache dans votre navigateur.

L'icône ne reflète pas uniquement à cause du cache de votre navigateur. Essayez parfois de redémarrer l'application

Les étapes suivantes ont fonctionné pour moi.

1. Supprimez le fichier par défaut "favicon.ico" avec un nouveau avec un nom différent, c'est-à-dire "_favicon.ico" dans mon cas.

   Remarque: Ne conservez pas le nom par défaut, car il est mis en cache dans votre navigateur et difficile à remplacer par une nouvelle icône.

2. Mettez à jour index.html avec une nouvelle balise de lien ie

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

3. Mettez à jour .angular-cli.json avec un nouveau nom d'icône, par exemple "_favicon.ico".

4. Créez et lancez votre application, et effectuez une actualisation matérielle Ctrl+ F5.

aussi simple et facile que:

1. ajoutez votre icône ou png dans le même répertoire que favicon
2. éditez .angular-cli.json, dans les actifs supprimer favicon.ico mettez le vôtre en place
3. éditez index.html, recherchez le favicon et mettez le vôtre en place
4. exécuter à nouveau le service

ça c'est fait

<link rel="icon" type="image/x-icon" href="assets/liana.jpg">

"assets": [

        "assets/sorry.jpg",
        "assets/liana.jpg"

  ],

cela a fonctionné pour moi.

Dans mon cas, le problème était que j'avais des dimensions différentes par rapport à la normale. J'avais 48x48 pxalors qu'il m'attendait 32x32 pxet mon extension était png donc j'ai dû la changer enico

Ce qui fonctionne vraiment pour moi, c'est de mettre mon favicon dans le dossier des actifs et d'apparaître automatiquement dans le navigateur.

1. changez l'emplacement du dossier assets dans le dossier src.
2. changez index.html comme ceci <link rel="icon" type="image/x-icon" href="assets/favicon.png">

Ok, ici en 2020 le 9.1.12. Je ne comprends pas pourquoi exactement ce processus est si difficile. J'ai suivi presque tous les articles ci-dessus et aucun d'entre eux n'a fonctionné pour moi.

Ce qui a fonctionné était le suivant: Suppression totale de la référence favicon dans index.html. C'est totalement contre-intuitif mais ça marche. Vous n'avez PAS besoin de le mettre dans le assetsdossier. J'ai essayé tout cela mais malheureusement aucune de ces suggestions n'a fonctionné.

index.html

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

angular.json

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

et quand je cours ng build --prod, le favicon est là. S'affiche également sur mon serveur en direct.

La suppression du cache de favicon chromes et le redémarrage du navigateur sur le mac ont fonctionné pour moi.

rm ~/Library/Application\ Support/Google/Chrome/Default/Favicons

J'ai eu le même problème et je l'ai résolu en forçant l'actualisation par la méthode décrite ici :

Pour actualiser le favicon de votre site, vous pouvez forcer les navigateurs à télécharger une nouvelle version en utilisant la balise de lien et une chaîne de requête sur votre nom de fichier. Ceci est particulièrement utile dans les environnements de production pour vous assurer que vos utilisateurs reçoivent la mise à jour.

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

J'ai résolu le problème en créant mon propre fichier .ico, en créant un dossier de ressources et en plaçant le fichier là-bas. Puis changé le lien href dans Index.html