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">
angular-cli
chrisly
quelle
quelle
ng s --port 4201
Antworten:
Erstellen Sie ein PNG-Bild mit demselben Namen (
favicon.png
) und ändern Sie den Namen in diesen Dateien:index.html
::angular-cli.json
::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
quelle
angular-cli.json
Datei muss die App nur neu gestartet werden.<link rel="icon" type="image/png" href="./favicon.png" />
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.
quelle
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 serve
erneut zu starten , und "Cache leeren und Hard Reload", keiner funktionierte.quelle
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:
quelle
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.quelle
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:
Es gibt viele andere gute Vorschläge in diesem Beitrag, wenn dies für Sie nicht funktioniert.
quelle
Geben Sie für Angular 6 die
favicon.png
Größe32x32
in den Asset-Ordner ein und ändern Sie den Pfad inindex.html
. Dann,quelle
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
::angular.json
::quelle
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.
quelle
Drücken Sie Ctrl+ F5im Browserfenster
quelle
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.
quelle
Für zukünftige Leser möchte Ihr Browser in diesem Fall das alte zwischengespeicherte Favicon verwenden.
Folge diesen Schritten:
Fest.
quelle
Befolgen Sie die folgenden Schritte, um das App-Symbol zu ändern:
Gehen Sie zu index.html und aktualisieren Sie den Pfad der Symboldatei. Beispielsweise,
Starten Sie den Server neu.
quelle
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:
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
Für diejenigen, die ein dynamisch hinzugefügtes Favicon benötigen, habe ich Folgendes mit einem App-Initialisierer gemacht:
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
quelle
Fügen Sie die Quelle Ihres Symbols hinzu und starten Sie die App neu. Sie ändert sich.
quelle
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
.angular-cli.json: Belassen Sie den Elementtyp als ".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).
quelle
Stellen Sie sicher , wenn Sie Symbolbild verwenden es Verlängerung nicht manipuliert wird, wie wenn Sie einen Download
png
Bild und dann manuell seine Ausdehnung ändern auspng
zuicon
. 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.
quelle
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).
quelle
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).
quelle
Das Symbol wird nicht nur aufgrund Ihres Browser-Cache angezeigt. Versuchen Sie manchmal, die Anwendung neu zu starten
quelle
Die folgenden Schritte haben bei mir funktioniert.
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.
Aktualisieren Sie index.html mit einem neuen Link-Tag, z
Aktualisieren Sie .angular-cli.json mit dem neuen Symbolnamen "_favicon.ico".
Build & starten Sie Ihre Anwendung, und tun eine harte Refresh Ctrl+ F5.
quelle
so einfach und leicht wie:
Das ist erledigt
quelle
das hat bei mir funktioniert.
quelle
In meinem Fall war das Problem, dass ich im Vergleich zu normalen Dimensionen andere hatte. Ich hatte,
48x48 px
obwohl es erwartet hatte32x32 px
und meine Erweiterung png war, also musste ich es ändernico
quelle
Was für mich wirklich funktioniert, war, mein Favicon in den Assets-Ordner zu legen und automatisch im Browser zu erscheinen.
<link rel="icon" type="image/x-icon" href="assets/favicon.png">
quelle
Das Löschen des Chrom-Favicon-Cache und das Neustarten des Browsers auf dem Mac haben bei mir funktioniert.
quelle
Ich hatte das gleiche Problem und löste es, indem ich die Aktualisierung durch die hier beschriebene Methode erzwang :
quelle
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
quelle