So ändern Sie das Angular CLI-Favicon

140

Wie kann ich das von der Angular CLI festgelegte Standard-Favicon ändern?

Ich habe viele Dinge ausprobiert, aber es zeigt immer das Angular-Logo als Favicon an, obwohl ich dieses Symbol gelöscht habe (favicon.ico im src-Ordner). Es wird immer noch angezeigt, und ich weiß nicht, woher es geladen wurde.

Ich habe dieses Symbol durch ein anderes Symbol ersetzt, aber es zeigt immer noch das Angular-Logo:

<link rel="icon" type="image/x-icon" href="favicon.ico">
chrisly
quelle
3
Mögliches Duplikat von Wie erzwinge ich eine Favicon-Aktualisierung
Matsemann
Das Ausführen einer App mit einem anderen Port löst das Problem. Beispiel:ng s --port 4201
Sajad
Ich habe das gleiche Problem. In meinem Fall vor Ort ist alles gut, aber wenn ich auf dem Server bereitstelle, erhalte ich 500 interne Serverfehler ...
Ziggler
Ich habe die ganze Antwort gelesen, die mir ein wenig geholfen hat, aber ehrlich gesagt sollte das für ein so grundlegendes Bedürfnis nicht so kompliziert sein: nur ein Pfad zum Kopieren des Bildes, dann möglicherweise eine Konfigurationsdatei, dann ein Neustart. Die Antwort "Aktualisieren" hilft nicht.
pdem
Ein Favicon ist eine statische Datei, die speziell in angle.json konfiguriert ist. Lassen Sie einfach die Standardeinstellung und sehen Sie hier, wie es funktioniert: stackoverflow.com/questions/40424907/…
pdem

Antworten:

158

Erstellen Sie ein PNG-Bild mit demselben Namen (favicon.png ) und ändern Sie den Namen in diesen Dateien:

index.html::

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

angular-cli.json::

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

Und Sie werden das eckige Standardsymbol nie wieder sehen.

Größe sollte 32x32 sein, wenn mehr als dies nicht angezeigt wird.

HINWEIS: Dies funktioniert nicht mit Angular 9

Für Winkel 9 müssen Sie Favicon in Assets einfügen und dann einen Pfad wie angeben

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

Sukhveer Singh
quelle
2
Danke Sukhveer. Dies funktioniert perfekt. Nach dem Hinzufügen des Symbols in der angular-cli.jsonDatei muss die App nur neu gestartet werden.
Ajay Sivan
1
Dies sollte als Antwort akzeptiert werden! Nichts hat funktioniert, aber dieser Trick hat funktioniert! Vielen Dank, dass Sie Sukhveer Singh!
Junia Montana
Ich musste auch den PNG-Pfad ändern<link rel="icon" type="image/png" href="./favicon.png" />
Dude Pascalou
1
Danke für den eckigen 9-Trick
Shanti
56

Da hast du das ersetzt favicon.ico Datei physisch ersetzt haben, muss irgendwo ein Caching-Problem vorliegen. In Ihrem Browser befindet sich ein Cache. Erzwingen Sie, dass es gespült wird, indem Sie Ctrl+ drückenF5 .

Wenn das Standardsymbol weiterhin angezeigt wird, versuchen Sie es mit einem anderen Browser mit einem sauberen Cache (dh Sie haben die Seite mit diesem Browser noch nicht besucht).

Cache-Verknüpfungen löschen: ( Quelle )

Windows
IE: Ctrl+R ; Firefox: Ctrl+ Shift+ R; Chrome: Ctrl+ Roder Ctrl+ F5oder Shift+F5 .

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

Yuri
quelle
1
danke Mann arbeitete sofort - STRG F5 für den Gewinn - arbeitete mit Angular 6 mit Favicon im gleichen Verzeichnis wie index.html und dieser Zeile in index.html ... <link rel = "icon" type = "image / x-icon" href = "favicon.ico">
danday74
Die Verknüpfungen sind unglaublich!
Gerardo Bautista
36

Das Navigieren zu der Datei hat dies für mich endgültig behoben. In meinem Fall: http: // localhost: 4200 / favicon.ico

Ich hatte versucht, zu aktualisieren, anzuhalten und ng serveerneut zu starten , und "Cache leeren und Hard Reload", keiner funktionierte.

Chau Nguyen
quelle
1
Das ist die einzige Antwort, die für mich funktioniert hat. Dank dafür!
Ivan
2
Nachdem ich zum Favicon navigiert war, lud ich die Homepage neu und drückte Strg + F5 (Chrom) - das funktionierte dann. Prost.
Blueprintchris
1
Das ist das einzige, was für mich funktioniert hat. unglaublich!
Yaniv Eliav
28

Um sicherzustellen, dass der Browser eine neue Version des Favicons herunterlädt und keine zwischengespeicherte Version verwendet, können Sie der Favicon-URL einen Dummy-Parameter hinzufügen:

<link rel="icon" type="image/x-icon" href="favicon.ico?any=param">
Tobi
quelle
Arbeitete für mich Danke
Venky559
Vielen Dank ...? Any = param Hilfe zum Entfernen des zwischengespeicherten vorherigen Symbols
ArunDhwaj IIITH
Dies ist das einzige, was für mich funktioniert hat. Weder Strg + F5 noch alle anderen Vermutungsantworten, das ist die Sache, die funktioniert!
sichererJo
14

Wir können das eckige CLI-Favicon-Symbol ändern. Wir müssen die Symboldatei in den Ordner "Assets" legen und diesen Pfad in index.html angeben.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> Es ist Arbeit für mich.

jaimin patel
quelle
Ja, hier hat nichts anderes für mich funktioniert, aber das Einfügen in den Assets-Ordner hat perfekt funktioniert. Prost.
scohe001
10

Ich hatte auch damit zu kämpfen und dachte, ich hätte etwas falsch mit Angular gemacht, aber mein Problem war schließlich, dass Chrome das Symbol zwischengespeichert hat. Der Standard "Leerer Cache und Hard Reload" oder Neustart des Browsers funktionierte bei mir nicht, aber dieser Beitrag wies mich in die richtige Richtung.

Das hat speziell für mich funktioniert:

Wenn Sie unter Windows arbeiten und Chrome verwenden, (exit chrome from taskbargehen Sie zu C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default und löschen Sie die Dateien Favicons-Journal, Favicons und starten Sie Chrome neu (über die Taskleiste kill all instances).

Es gibt viele andere gute Vorschläge in diesem Beitrag, wenn dies für Sie nicht funktioniert.

Jdevince
quelle
1
Dadurch werden auch Symbole für vorhandene Seiten mit Lesezeichen entfernt, bis Sie die Seite das nächste Mal besuchen. Dies hat den Trick für mich getan.
David B
9

Geben Sie für Angular 6 die favicon.pngGröße 32x32in den Asset-Ordner ein und ändern Sie den Pfad in index.html. Dann,

<link rel="icon" type="image/x-icon" href="./assets/favicon.png">
user1795667
quelle
In der Tat: Ich musste meine in den Assets-Ordner legen und den Pfad in der Datei index.html und in der Datei angle.json ändern.
G. Delvigne
5

Erstellen Sie ein Symbolbild mit der Erweiterung .ico und kopieren Sie es und ersetzen Sie es durch die Standard-Favicon-Datei im Ordner src.

index.html::

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

angular.json::

**"assets": [
          "src/favicon.ico",
          "src/assets"
        ],**
Aathil Ahamed
quelle
Lebensretter! thx
koo9
4

Verschieben Sie favicon.ico in Ihre Assets und dann in den Ordner img. Ändern Sie anschließend nur Ihr Symbol-Link-Tag in der Kopfzeile. Es hilft mir, wenn Favicon überhaupt nicht angezeigt wurde.

KGROZA
quelle
In Chrome und Firefox war dies kein Caching-Problem. Ich habe meine ICO-Datei verschoben und Chrome und Firefox wurden sofort aktualisiert.
Steve11235
Ich habe meine Datei favicon.ico aktualisiert und sie wurde nicht geladen. Ich habe dies getan (zu Assets und aktualisierten Links verschoben) und gut funktioniert.
David
4

Drücken Sie Ctrl+ F5im Browserfenster

Andrey.Kostyuchenko
quelle
Hallo Andrey, gute Antwort, aber vielleicht möchten Sie erklären, dass dies den Cache aktualisiert, ansonsten ist es nur eine "magische" Antwort.
Tom
1
Diese Antwort ist genau die gleiche wie die von Yuri (beantwortet am 26. November 16 um 19:12 Uhr) abzüglich der sehr nützlichen Erklärung.
RobinCTS
4

FAVICON FÜR JEDES WEB-PROJEKT NACHLADEN:

Klicken Sie mit der rechten Maustaste auf das Favicon und klicken Sie auf "Neu laden". Funktioniert jedes Mal.

Brian B.
quelle
1
Nach 20 Minuten, in denen ich meinen Kopf gegen die Wand schlug, war dies die einzige Lösung, die funktionierte. Danke!!
Wooldridgetm
2

Für zukünftige Leser möchte Ihr Browser in diesem Fall das alte zwischengespeicherte Favicon verwenden.

Folge diesen Schritten:

  1. Halten Sie die STRG-Taste gedrückt und klicken Sie in Ihrem Browser auf die Schaltfläche "Aktualisieren".
  2. Halten Sie die Umschalttaste gedrückt und klicken Sie in Ihrem Browser auf die Schaltfläche "Aktualisieren".

Fest.

KeplerIO
quelle
2

Befolgen Sie die folgenden Schritte, um das App-Symbol zu ändern:

  1. Fügen Sie Ihre .ico-Datei zum Projekt hinzu.
  2. Gehen Sie zu angle.json und geben Sie in diesem "Projekte" -> "Architekt" -> "Erstellen" -> "Optionen" -> "Assets" einen Eintrag für Ihre Symboldatei ein. Informationen dazu finden Sie im vorhandenen Eintrag von favicon.ico.
  3. Gehen Sie zu index.html und aktualisieren Sie den Pfad der Symboldatei. Beispielsweise,

  4. Starten Sie den Server neu.

  5. Hard Refresh Browser und Sie können loslegen.
Rut Shah
quelle
1

Ich habe eine Weile damit herumgespielt. Es stellt sich heraus, dass das Favicon anscheinend von einem Knotenmodul namens @scematics verwaltet wird (zumindest in Angular5).

Sie können Ihr Favicon in diesem Ordner ändern:

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

In diesem Ordner sollte sich eine favicon.ico befinden, die geladen wird. Ich bin mir ziemlich sicher, dass dies nicht für alle gilt, aber es hat für mich geklappt.

Hoffe das hat geholfen. Viel Spaß beim Codieren! : D.


quelle
1

Für diejenigen, die ein dynamisch hinzugefügtes Favicon benötigen, habe ich Folgendes mit einem App-Initialisierer gemacht:

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: []
}

Entfernen Sie einfach die Datei fav.ico unter src / und fügen Sie diese hinzu. Das Favicon wird vor dem Start der App hinzugefügt

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

Fügen Sie die Quelle Ihres Symbols hinzu und starten Sie die App neu. Sie ändert sich.

Adeel
quelle
1

Ich habe viele dieser Lösungen ausprobiert, war aber erfolglos. Diejenige, die für meine Angular 5-Anwendung funktioniert hat, war die folgende:

index.html: Kommentieren Sie Ihr Link-Tag aus

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

.angular-cli.json: Belassen Sie den Elementtyp als ".ico".

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

ZULETZT..

  • Haben Sie in Ihrer Projektordnerstruktur die Datei favicon.ico im src ex: (C: \ Dev \ EPS \ src). Sie müssen es NICHT in Ihrem Asset-Ordner haben, da Sie nicht darauf verweisen.

  • Stellen Sie sicher, dass Ihr Symbol nicht beschädigt ist (Ihr Symbol sollte lesbar sein, wenn es über den Fenster-Explorer angezeigt wird, auch bekannt als kein Symbol für defekte Fenster).

  • muss 32 x 32 dimension sein
Maurizio L.
quelle
0

Stellen Sie sicher , wenn Sie Symbolbild verwenden es Verlängerung nicht manipuliert wird, wie wenn Sie einen Download pngBild und dann manuell seine Ausdehnung ändern aus pngzu icon. In diesem Fall wird Ihr Bild beschädigt. Und Browser versteht nicht.

Ich habe diesen Fehler gemacht, aber nachdem ich das ursprüngliche Symbolbild verwendet habe, funktioniert es.

Payal Tyagi
quelle
0

1.Überprüfen Sie Ihr Link-Tag in der Datei index.html, damit es so aussieht.

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

2.Überprüfen Sie den Dateinamen von favicon.ico im Verzeichnis / src.

3. Führen Sie Angular erneut aus, indem Sie die Anwendung bedienen und aktualisieren.

4.Wenn es nicht angezeigt wird (oder etwas so aussieht, als würde es die alte Datei favicon.ico puffern). Versuchen Sie erneut, den Pfad von favicon zu aktualisieren, um die Datei favicon.ico zu laden (z. B. aktualisieren Sie yourdomain.com/favicon.ico).

dscanon
quelle
0

Ich hatte das gleiche Problem.

Wenn Sie einen Mac verwenden, müssen Sie den Cache leeren ( Option+ + E) und die Seite neu laden, zusätzlich zum Neustart der App (und natürlich zum Ändern des Pfads in index.html).

alang
quelle
0
  1. Entfernen Sie Ihre vorhandene favicon.ico
  2. Fügen Sie dem src-Ordner ein neues Symbol mit dem Namen "favico.ico" hinzu.
  3. Löschen Sie den Cache in Ihrem Browser.

Das Symbol wird nicht nur aufgrund Ihres Browser-Cache angezeigt. Versuchen Sie manchmal, die Anwendung neu zu starten

Sri Vivek
quelle
0

Die folgenden Schritte haben bei mir funktioniert.

  1. Entfernen Sie die Standarddatei "favicon.ico" mit einer neuen Datei mit einem anderen Namen, in meinem Fall "_favicon.ico".

    Hinweis :: Behalten Sie den Standardnamen nicht bei, da er in Ihrem Browser zwischengespeichert wird und nur schwer mit einem neuen Symbol überschrieben werden kann.

  2. Aktualisieren Sie index.html mit einem neuen Link-Tag, z

     <link rel="icon" type="image/x-icon" href="_favicon.ico" /> 
    
  3. Aktualisieren Sie .angular-cli.json mit dem neuen Symbolnamen "_favicon.ico".

  4. Build & starten Sie Ihre Anwendung, und tun eine harte Refresh Ctrl+ F5.

Dheerendra Pandey
quelle
0

so einfach und leicht wie:

  1. Fügen Sie Ihr Symbol oder PNG im selben Verzeichnis wie Favicon hinzu
  2. Bearbeiten Sie .angular-cli.json, entfernen Sie in Assets favicon.ico und setzen Sie Ihre ein
  3. Bearbeiten Sie index.html, suchen Sie nach Favicon und setzen Sie Ihre ein
  4. Führen Sie den Aufschlag erneut aus

Das ist erledigt

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

"assets": [

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

  ],

das hat bei mir funktioniert.

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

In meinem Fall war das Problem, dass ich im Vergleich zu normalen Dimensionen andere hatte. Ich hatte, 48x48 pxobwohl es erwartet hatte 32x32 pxund meine Erweiterung png war, also musste ich es ändernico

Schwarze Mamba
quelle
0

Was für mich wirklich funktioniert, war, mein Favicon in den Assets-Ordner zu legen und automatisch im Browser zu erscheinen.

  1. Ändern Sie den Speicherort in den Ordner "Assets" im Ordner "src".
  2. Ändern Sie index.html wie folgt <link rel="icon" type="image/x-icon" href="assets/favicon.png">
Okyam
quelle
-1

Das Löschen des Chrom-Favicon-Cache und das Neustarten des Browsers auf dem Mac haben bei mir funktioniert.

rm ~/Library/Application\ Support/Google/Chrome/Default/Favicons
Padawan
quelle
-1

Ich hatte das gleiche Problem und löste es, indem ich die Aktualisierung durch die hier beschriebene Methode erzwang :

Um das Favicon Ihrer Site zu aktualisieren, können Sie die Browser zwingen, eine neue Version herunterzuladen, indem Sie das Link-Tag und einen Querystring in Ihrem Dateinamen verwenden. Dies ist besonders in Produktionsumgebungen hilfreich, um sicherzustellen, dass Ihre Benutzer das Update erhalten.

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

Ich habe das Problem behoben, indem ich meine eigene .ico-Datei erstellt, einen Assets-Ordner erstellt und die Datei dort abgelegt habe. Dann änderte sich der Link href in Index.html

Jerin Kurian
quelle