web-dev-qa-db-fra.com

Comment changer le favicon angulaire CLI

Comment modifier le favicon par défaut défini par l'interface de ligne de commande angulaire?

J'ai essayé beaucoup de choses, mais il montre toujours le logo angulaire comme favicon, Même si j'ai supprimé cette icône (favicon.ico dans le dossier src). Il montre encore, 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">
angular-cli
79
user4914839

Je fais aussi face à ce problème, alors essayez ceci

1) Redémarrez l'application, si toujours pas changer

2) Redémarrez le système (je ne sais pas si c'est mieux ou pas, mais ça marche pour moi)

28
Ashutosh Jha

Créez une image png avec le même nom (favicon.png) et modifiez 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 devrait être 32 x 32, si plus que cela ne s'affichera pas.

74
Sukhveer Singh

Puisque vous avez remplacé physiquement le fichier favicon.ico, il doit exister un problème de mise en cache quelque part. Il y a une cache dans votre navigateur. Forcez-le à se rincer 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
C'EST À DIRE:Ctrl+R; Firefox:Ctrl+Shift+R; Chrome:Ctrl+R, ou Ctrl+F5, ou Shift+F5.

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

38
Yuri

Naviguer dans le fichier a finalement résolu le problème pour moi. Dans mon cas: http: // localhost: 4200/favicon.ico

J'avais essayé d'actualiser, d'arrêter et de redémarrer ng serve, et "Vider le cache et le rechargement dur", aucun ne fonctionnait.

29
Chau Nguyen

Pour 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">
24
Tobi

Je me débattais aussi avec ce logiciel, pensant que je ne faisais pas quelque chose de mal avec Angular, mais mon problème a été de mettre Chrome en cache l’icône. Le "cache vide et le rechargement à chaud" standard ou le redémarrage du navigateur ne fonctionnaient pas pour moi, mais ce post m'a dirigé dans la bonne direction.

Cela a particulièrement fonctionné pour moi:

Si vous utilisez Windows et que vous utilisez chrome, (exit chrome from taskbar), passez à C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default et supprimez les fichiers Favicons-journal, Favicons puis relancez 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.

9
Jdevince

nous pouvons changer l'icône de favicon angulaire CLI. nous devons mettre le fichier d'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 un travail pour moi.

7
jaimin patel

Presse Ctrl+F5 dans la fenêtre du navigateur

5
Andrey.Kostyuchenko

Pour Angular 6, mettez favicon.png de taille 32x32 dans le dossier des ressources et modifiez le chemin d'accès dans index.html. Ensuite, 

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

Déplacez favicon.ico vers vos ressources, puis dans le dossier img, puis ne changez que votre balise de lien d’icône dans l’en-tête .

3
KGROZA

POUR RECHARGER FAVICON POUR TOUT PROJET WEB:

Faites un clic droit sur la favicon et cliquez sur 'recharger'. Fonctionne à chaque fois.

3
Brian B

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 enfoncée et cliquez sur le bouton "Actualiser" de votre navigateur.
  2. Maintenez la touche Maj enfoncée et cliquez sur le bouton "Actualiser" de votre navigateur.

Fixé.

3
KeplerIO

Je jouais un peu avec cela 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 que cela a fonctionné pour moi.

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

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

"assets": [

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

  ],

cela a fonctionné pour moi.

0
Ester Vardan

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. Allez dans index.html et mettez à jour le chemin du fichier d'icône . Par exemple,

  4. Redémarrez le serveur.

  5. Difficile d'actualiser le navigateur et vous êtes prêt à partir.
0
Rut Shah
  1. Supprimer votre favicon.ico existant
  2. Ajouter une nouvelle icône dans le dossier src avec le nom "favico.ico"
  3. Effacer le cache dans votre navigateur.

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

0
Sri Vivek

Dans mon cas, le problème était que mes dimensions étaient différentes de celles de la normale. J'avais 48x48 px alors qu'il s'attendait à 32x32 px et que mon extension était png alors je devais le changer en ico

0
Black Mamba

J'ai essayé plusieurs de ces solutions mais sans succès . Celle qui a fonctionné pour mon application angulaire 5 était 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 comme ".ico" 

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

ENFIN..

  • Dans la structure de dossiers de votre projet, placez le fichier favicon.ico dans le src ex: (C:\Dev\EPS\src). Vous n'avez PAS besoin de l'avoir dans votre dossier d'actif puisque 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 vue dans l'explorateur de fenêtres, c'est-à-dire sans icône de fenêtres cassée).

  • doit être de 32 x 32 dimensions
0
Maurizio L

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

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

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

3.Redun Angular avec ng servir et actualiser l'application.

4.Si cela ne s'affiche pas (ou quelque chose qui ressemble à cela tampon l'ancien fichier favicon.ico). essayez de rafraîchir le chemin de favicon à nouveau pour charger le fichier favicon.ico (par exemple, refresh yourdomain.com/favicon.ico)

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

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

0
Adeel

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 

0
Danny Fenstermaker

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échargiez une image png, puis modifiez manuellement son extension de png à icon. Dans ce cas, votre image sera corrompue. Et le navigateur ne comprend pas.

J'ai commis cette erreur, mais après avoir utilisé l'image d'icône originale, il commence à fonctionner.

0
payal tyagi

aussi simple et facile que: 

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

ça c'est fait

0
amdan

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).

0
alang

Les étapes suivantes ont fonctionné pour moi.

  1. Supprimez le fichier "favicon.ico" par défaut avec un nouveau fichier portant un nom différent, à savoir "_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 à écraser avec la nouvelle icône.

  2. Mettez à jour index.html avec la nouvelle balise de lien i.e.

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

  3. Mettez à jour le fichier .angular-cli.json avec le nouveau nom d’icône, c’est-à-dire "_favicon.ico".

  4. Construisez et lancez votre application et effectuez une actualisation complète Ctrl+F5.

0
Dheerendra Pandey

Ce qui a vraiment fonctionné pour moi, c’était de mettre mon favicon dans le dossier des actifs et de s’afficher automatiquement dans le navigateur.

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