Comment changer le favicon de la CLI angulaire

141

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">
chrisly
la source
3
Copie
L'exécution d'une application avec un port différent résout le problème. exemple:ng s --port 4201
Sajad
J'ai le même problème. Dans mon cas, localement, tout va bien, mais lorsque je déploie sur le serveur, j'obtiens une erreur de serveur interne 500 ...
Ziggler
J'ai lu toutes les réponses qui m'ont un peu aidé mais honnêtement cela ne devrait pas être si compliqué pour un besoin aussi basique: juste un chemin pour copier l'image, puis éventuellement un fichier de configuration, puis un redémarrage. la réponse «rafraîchir» n'aide pas.
pdem
Un favicon est un fichier statique spécialement configuré dans angular.json, laissez simplement la valeur par défaut et voyez ici comment cela fonctionne: stackoverflow.com/questions/40424907/…
pdem

Réponses:

159

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">

Sukhveer Singh
la source
2
Merci Sukhveer. Cela fonctionne parfaitement, il suffit de redémarrer l'application après avoir ajouté l'icône dans le angular-cli.jsonfichier.
Ajay Sivan
1
Cela devrait être une réponse acceptée! Rien n'a fonctionné mais cette astuce a fonctionné! Merci Sukhveer Singh!
Junia Montana
J'ai aussi dû changer le chemin du png<link rel="icon" type="image/png" href="./favicon.png" />
Mec Pascalou le
1
Merci pour angular 9 trick
shanti
56

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.

Yuri
la source
1
merci l'homme a travaillé instantanément - CTRL F5 pour la victoire - a travaillé avec Angular 6 avec favicon dans le même répertoire que index.html et cette ligne dans index.html ... <link rel = "icon" type = "image / x-icon" href = "favicon.ico">
danday74
les raccourcis sont incroyables!
Gerardo Bautista
36

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

Chau Nguyen
la source
1
C'est la seule réponse qui a fonctionné pour moi. Merci pour ça!
Ivan
2
Après avoir navigué vers le favicon, j'ai rechargé la page d'accueil et appuyé sur ctrl + f5 (chrome) - cela a ensuite fonctionné. À votre santé.
blueprintchris
1
c'est la seule chose qui a fonctionné pour moi. incroyable!
Yaniv Eliav le
28

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">
Tobi
la source
A travaillé pour moi Merci
Venky559
Merci ...? Any = param aide pour supprimer l'icône précédente en cache
ArunDhwaj IIITH
c'est la seule chose qui a fonctionné pour moi. Pas le ctrl + f5, ni toutes les autres réponses à deviner, c'est ce qui fonctionne!
saferJo
14

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.

jaimin patel
la source
Oui, rien d'autre n'a fonctionné pour moi ici, mais le coller dans le dossier des actifs a parfaitement fonctionné. À votre santé.
scohe001
10

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.

Jdevince
la source
1
Cela supprimera également les icônes de toutes les pages marquées existantes, jusqu'à votre prochaine visite sur la page. Cela a fait l'affaire pour moi cependant.
David B
9

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">
user1795667
la source
En effet: j'ai dû mettre le mien dans le dossier assets et changer le chemin dans le fichier index.html et dans le fichier angular.json.
G. Delvigne
5

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"
        ],**
Aathil Ahamed
la source
sauveur de vie! thx
koo9
4

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

KGROZA
la source
Dans Chrome et Firefox, ce n'était pas un problème de mise en cache. J'ai déplacé mon fichier ICO, et Chrome et Firefox ont été immédiatement mis à jour.
Steve11235
J'ai mis à jour mon fichier favicon.ico et il ne se charge pas. Je l'ai fait (déplacé vers les actifs et les liens mis à jour) et j'ai bien fonctionné.
David
4

Appuyez sur Ctrl+ F5dans la fenêtre du navigateur

Andrey Kostyuchenko
la source
Salut Andrey, bonne réponse mais vous voudrez peut-être expliquer que cela rafraîchit le cache, sinon c'est juste une réponse "magique".
Tom
1
Cette réponse est exactement la même que celle de yuri (réponse le 26 novembre 16 à 19:12) moins l'explication très utile.
robinCTS
4

POUR RECHARGER FAVICON POUR TOUT PROJET WEB:

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

Brian B
la source
1
après 20 minutes à me cogner la tête contre le mur, c'est la seule solution qui a fonctionné. Merci!!
wooldridgetm
2

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

KeplerIO
la source
2

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.
Rut Shah
la source
1

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É


la source
1

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

Danny Fenstermaker
la source
1
<link rel="icon" type="image/x-icon" href="#">

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

Adeel
la source
1

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
Maurizio L
la source
0

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.

payal tyagi
la source
0

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)

dscanon
la source
0

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

alang
la source
0
  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

Sri Vivek
la source
0

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.

Dheerendra Pandey
la source
0

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

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

"assets": [

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

  ],

cela a fonctionné pour moi.

Ester Vardan
la source
<link rel = "icon" type = "image / x-icon" href = "assets / liana.jpg"> plus
Ester Vardan
0

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

Black Mamba
la source
0

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">
Okyam
la source
0

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.

user2619824
la source
-1

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
Padawan
la source
-1

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" />
maia
la source
-1

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

Jerin Kurian
la source