So ändern Sie das Angular CLI-Favicon

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

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

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.

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.

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

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.

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.

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

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"
        ],**

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.

Drücken Sie Ctrl+ F5im Browserfenster

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.

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.

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.

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.

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

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

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

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.

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

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

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

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.

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

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

"assets": [

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

  ],

das hat bei mir funktioniert.

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

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

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

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

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