Come cambiare la favicon della CLI angolare

Come posso modificare la favicon predefinita impostata dalla CLI angolare?

Ho provato molte cose, ma mostra sempre il logo Angolare come favicon, anche se ho eliminato quell'icona (favicon.ico nella cartella src). Mostra ancora, e non so da dove sia caricato.

Ho sostituito quell'icona con un'altra icona, ma mostra ancora il logo Angolare:

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

Crea un'immagine png con lo stesso nome ( favicon.png) e modifica il nome in questi file:

index.html:

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

angular-cli.json:

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

E non vedrai mai più l'icona predefinita angolare.

Le dimensioni dovrebbero essere 32x32, se più di questo non verranno visualizzate.

NOTA: questo non funzionerà con Angular 9

Per angolare 9 devi inserire favicon all'interno delle risorse, quindi dare un percorso simile

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

Dal momento che il favicon.icofile è stato sostituito fisicamente, ci deve essere un problema di memorizzazione nella cache da qualche parte. C'è una cache nel tuo browser. Forzalo per ottenere il colore premendo Ctrl+ F5.

Se l'icona predefinita è ancora visualizzata, prova un altro browser con una cache pulita (ovvero non hai ancora visitato la pagina con quel browser).

Cancella scorciatoie cache: ( Sorgente )

Windows
IE: Ctrl+ R; Firefox: Ctrl+ Shift+ R; Chrome: Ctrl+ R, o Ctrl+ F5o Shift+ F5.

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

Navigare al file finalmente risolto questo problema per me. Nel mio caso: http: // localhost: 4200 / favicon.ico

Avevo tentato di aggiornare, interrompere e ricominciare ng servee "Empty Cache and Hard Reload", nessuno ha funzionato.

Per garantire che il browser scarichi una nuova versione della favicon e non utilizzi una versione cache, puoi aggiungere un parametro fittizio all'URL favicon:

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

possiamo cambiare l'icona favicon della CLI angolare. dobbiamo mettere il file icona nella cartella "risorse" e dare quel percorso in index.html.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> Per me è un lavoro.

Stavo lottando anche con questo, pensando che stavo facendo qualcosa di sbagliato con Angular, ma il mio problema è finito con il fatto che Chrome memorizzava nella cache l'icona. Lo standard "Empty Cache and Hard Reload" o il riavvio del browser non funzionava per me, ma questo post mi ha indicato nella giusta direzione.

Questo ha funzionato specificamente per me:

Se su Windows e usando Chrome, (exit chrome from taskbar) vai su C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default ed elimina i file Favicons-journal, Favicons quindi riavvia Chrome (dalla barra delle applicazioni, kill all instances).

Ci sono molti altri buoni suggerimenti in quel post se questo non funziona per te.

Per Angular 6, inserisci le favicon.pngdimensioni 32x32nella cartella delle risorse e modifica il percorso in index.html. Poi,

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

Crea un'immagine icona con estensione .ico e copia e sostituiscila con il file favicon predefinito nella cartella src.

index.html:

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

angular.json:

**"assets": [
          "src/favicon.ico",
          "src/assets"
        ],**

Sposta favicon.ico nelle tue risorse e quindi nella cartella img, e successivamente modifica solo il tag del collegamento dell'icona nell'intestazione. Mi aiuta quando favicon non è stato visualizzato affatto.

Premi Ctrl+ F5nella finestra del browser

PER RICARICARE FAVICON PER QUALUNQUE PROGETTO WEB:

Fare clic destro sulla favicon e fare clic su "ricarica". Funziona ogni volta.

Per i futuri lettori, se questo accade a te, il tuo browser vuole utilizzare la vecchia favicon memorizzata nella cache.

Segui questi passi:

1. Tenere premuto CTRL e fare clic sul pulsante "Aggiorna" nel browser.
2. Tieni premuto Maiusc e fai clic sul pulsante "Aggiorna" nel browser.

Fisso.

Seguire i passaggi seguenti per cambiare l'icona dell'app:

1. Aggiungi il tuo file .ico nel progetto.
2. Vai su angular.json e in quel "progetti" -> "architetto" -> "costruisci" -> "opzioni" -> "risorse" e qui inserisci una voce per il tuo file icona. Fare riferimento alla voce esistente di favicon.ico per sapere come farlo.

3. Vai a index.html e aggiorna il percorso del file icona. Per esempio,

4. Riavvia il server.

5. Browser di aggiornamento rapido e sei a posto.

Ci stavo giocando da un po '. Risulta che apparentemente il favicon è gestito da un modulo di nodo chiamato @scematics (almeno in Angular5).

Puoi cambiare la tua favicon in questa cartella:

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

In quella cartella dovrebbe esserci un favicon.ico, quello che viene caricato. Sono abbastanza sicuro che questo non vale per tutti ma ha funzionato per me.

Spero che questo abbia aiutato. Buona programmazione! : D

Per coloro che necessitano di una favicon aggiunta dinamicamente ecco cosa ho fatto con un inizializzatore di app:

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

Rimuovi semplicemente il file fav.ico in src / e aggiungi questo. La favicon verrà aggiunta prima dell'avvio dell'app

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

Aggiungi la fonte della tua icona e riavvia l'app che cambierà.

Ho provato molte di queste soluzioni ma non ho avuto successo. Quello che ha funzionato per la mia applicazione angolare 5 era il seguente:

index.html: commentare il tag del collegamento

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

.angular-cli.json: lascia il tipo di elemento come ".ico"

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

INFINE..

• Nella struttura delle cartelle del progetto, inserire favicon.ico all'interno di src ex: (C: \ Dev \ EPS \ src). NON è necessario averlo nella cartella delle risorse poiché non si fa riferimento a esso.

• Assicurati che la tua icona non sia rotta (La tua icona dovrebbe essere leggibile se visualizzata attraverso Window Explorer, ovvero nessuna icona di finestra rotta)

• deve avere dimensioni 32 x 32

Assicurati che quando usi l'immagine dell'icona non sia un'estensione manipolata, come se scarichi pngun'immagine e poi cambi manualmente l'estensione da pngaicon . In questo caso, l'immagine sarà danneggiata. E il browser non capisce.

Ho fatto questo errore, ma dopo aver usato l'immagine dell'icona originale inizia a funzionare.

1.Controlla il tuo tag di collegamento sul file index.html che dovrebbe assomigliare a questo.

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

2.Controllare il nome del file favicon.ico nella directory / src.

3.Rieseguire Angular con l'applicazione serve e aggiorna.

4.Se non viene visualizzato (o qualcosa di simile al vecchio file favicon.ico nel buffer). prova ad aggiornare di nuovo il percorso di favicon per caricare il file favicon.ico (es. refresh yourdomain.com/favicon.ico)

Ho avuto lo stesso problema.

Se stai usando un Mac, dovrai svuotare la cache ( Option+ ⌘+ E) e ricaricare la pagina oltre a riavviare l'app (e ovviamente a cambiare il percorso in index.html).

1. Rimuovi il tuo favicon.ico esistente
2. Aggiungi una nuova icona nella cartella src con il nome "favico.ico"
3. Cancella cache nel browser.

L'icona non si riflette solo a causa della cache del browser. A volte prova a riavviare l'applicazione

I seguenti passaggi hanno funzionato per me.

1. Rimuovere nel mio caso il file "favicon.ico" predefinito con uno nuovo con un nome diverso, ad esempio "_favicon.ico".

   Nota: non conservare il nome predefinito, poiché viene memorizzato nella cache del browser e difficile da sovrascrivere con una nuova icona.

2. Aggiorna index.html con il nuovo tag di collegamento, ad es

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

3. Aggiorna .angular-cli.json con il nuovo nome dell'icona, ad esempio "_favicon.ico".

4. Costruisci e avvia la tua app e fai un duro aggiornamento Ctrl+ F5.

semplice e facile come:

1. aggiungi la tua icona o png nella stessa directory di favicon
2. modifica .angular-cli.json, nelle risorse rimuovi favicon.ico metti il ​​tuo posto
3. modifica index.html, cerca favicon e posiziona il tuo
4. esegui di nuovo il servizio

fatto

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

"assets": [

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

  ],

questo ha funzionato per me.

Nel mio caso, il problema era che avevo dimensioni diverse rispetto a quella normale. Ho avuto 48x48 pxmentre era in attesa 32x32 pxe la mia estensione era png, quindi ho dovuto cambiarlo inico

Ciò che funziona davvero per me è stato inserire la mia favicon nella cartella delle risorse e apparire automaticamente nel browser.

1. cambia posizione nella cartella delle risorse all'interno della cartella src.
2. cambia index.html in questo modo <link rel="icon" type="image/x-icon" href="assets/favicon.png">

Ok, qui nel 2020 il 9.1.12. Non capisco perché esattamente questo processo sia così difficile. Ho seguito quasi tutti i post sopra e nessuno di loro ha funzionato per me.

Cosa ha funzionato DID è questo: rimuovere totalmente il riferimento favicon in index.html. È totalmente intuitivo ma funziona. Non è necessario inserirlo nella assetscartella. Ho provato tutto questo, ma sfortunatamente nessuno di questi suggerimenti ha funzionato.

index.html

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

angular.json

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

e quando corro ng build --prod, la favicon è lì. Viene visualizzato anche sul mio server live.

L'eliminazione della cache favicon di chromes e il riavvio del browser sul mac ha funzionato per me.

rm ~/Library/Application\ Support/Google/Chrome/Default/Favicons

Ho avuto lo stesso problema e l'ho risolto forzando l'aggiornamento con il metodo descritto qui :

Per aggiornare la favicon del tuo sito puoi forzare i browser a scaricare una nuova versione utilizzando il tag link e una stringa di query sul tuo nome file. Ciò è particolarmente utile negli ambienti di produzione per assicurarsi che gli utenti ottengano l'aggiornamento.

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

Ho risolto il problema creando il mio file .ico e creato una cartella delle risorse e messo il file lì. Quindi modificato il collegamento href in Index.html