Jak zmienić favicon w Angular CLI

Jak mogę zmienić domyślną ikonę ulubionych ustawioną przez interfejs wiersza poleceń Angular?

Próbowałem wielu rzeczy, ale zawsze pokazuje logo Angular jako ikonę favicon, mimo że usunąłem tę ikonę (favicon.ico w folderze src). Nadal się wyświetla i nie wiem, skąd jest ładowany.

Zastąpiłem tę ikonę inną, ale nadal pokazuje ona logo Angular:

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

Utwórz obraz png o tej samej nazwie ( favicon.png) i zmień nazwę w tych plikach:

index.html:

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

angular-cli.json:

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

I nigdy więcej nie zobaczysz domyślnej ikony kątowej.

Rozmiar powinien wynosić 32x32, jeśli jest większy niż ten, nie zostanie wyświetlony.

UWAGA: To nie zadziała z Angular 9

W przypadku kątowej 9 musisz umieścić favicon w zasobach, a następnie podać ścieżkę taką jak

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

Ponieważ favicon.icoplik został zastąpiony fizycznie, musi gdzieś wystąpić problem z buforowaniem. W Twojej przeglądarce jest pamięć podręczna. Wymuś opróżnienie, naciskając Ctrl+ F5.

Jeśli ikona domyślna jest nadal wyświetlana, wypróbuj inną przeglądarkę z czystą pamięcią podręczną (tj. Nie odwiedziłeś jeszcze strony w tej przeglądarce).

Wyczyść skróty pamięci podręcznej: ( źródło )

Windows
IE: Ctrl+ R; Firefox: Ctrl+ Shift+ R; Chrome: Ctrl+ Rlub Ctrl+ F5lub Shift+ F5.

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

Przejście do pliku w końcu rozwiązało ten problem. W moim przypadku: http: // localhost: 4200 / favicon.ico

Próbowałem odświeżyć, zatrzymać i uruchomić ng serveponownie, a „Opróżnij pamięć podręczną i ponownie załaduj”, żadna nie działała.

Aby upewnić się, że przeglądarka pobiera nową wersję favicon i nie używa wersji z pamięci podręcznej, możesz dodać parametr fikcyjny do adresu URL favicon:

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

możemy zmienić ikonę favicon kątowego CLI. musimy umieścić plik ikony w folderze "asset" i podać tę ścieżkę w index.html.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> To dla mnie praca.

Ja też się z tym zmagałem, myśląc, że robię coś nie tak z Angularem, ale moim problemem był buforowanie ikony przez Chrome. Standardowe „Empty Cache and Hard Reload” lub ponowne uruchomienie przeglądarki nie działały dla mnie, ale ten post wskazał mi właściwy kierunek.

To specjalnie zadziałało dla mnie:

Jeśli korzystasz z systemu Windows i używasz chrome, (exit chrome from taskbar) przejdź do C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default i usuń pliki Favicons-journal, Favicons, a następnie ponownie uruchom chrome (z paska zadań, kill all instances).

W tym poście jest wiele innych dobrych sugestii, jeśli to nie zadziała.

W przypadku Angular 6 umieść favicon.pngrozmiar 32x32w folderze zasobów i zmień ścieżkę w index.html. Następnie,

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

Utwórz obraz ikony z rozszerzeniem .ico i skopiuj go i zastąp domyślnym plikiem favicon w folderze src.

index.html:

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

angular.json:

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

Przenieś favicon.ico do swoich zasobów, a następnie do folderu img, a następnie zmień tylko tag łącza ikony w nagłówku. Pomaga mi, gdy favicon w ogóle nie był wyświetlany.

Naciśnij Ctrl+ F5w oknie przeglądarki

ABY PONOWNIE ZAŁADOWAĆ FAVICON DLA DOWOLNEGO PROJEKTU INTERNETOWEGO:

Kliknij prawym przyciskiem myszy ikonę ulubionych i kliknij „przeładuj”. Działa za każdym razem.

W przypadku przyszłych czytelników, jeśli tak się stanie, Twoja przeglądarka będzie chciała użyć starej, zapisanej w pamięci podręcznej ikony ulubionych.

Wykonaj następujące kroki:

1. Przytrzymaj CTRL i kliknij przycisk „Odśwież” w przeglądarce.
2. Przytrzymaj Shift i kliknij przycisk „Odśwież” w przeglądarce.

Naprawiony.

Aby zmienić ikonę aplikacji, wykonaj poniższe czynności:

1. Dodaj swój plik .ico do projektu.
2. Idź do angular.json iw tym "projekty" -> "architekt" -> "buduj" -> "opcje" -> "zasoby" i tutaj wprowadź wpis dla swojego pliku ikony. Zapoznaj się z istniejącym wpisem na favicon.ico, aby dowiedzieć się, jak to zrobić.

3. Przejdź do index.html i zaktualizuj ścieżkę do pliku ikony. Na przykład,

4. Zrestartuj serwer.

5. Przeglądarka z twardym odświeżaniem i gotowe.

Bawiłem się tym przez chwilę. Okazuje się, że favicon jest najwyraźniej obsługiwany przez moduł węzłowy o nazwie @scematics (przynajmniej w Angular5).

Możesz zmienić swoją ulubioną ikonę w tym folderze:

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

W tym folderze powinien znajdować się favicon.ico, czyli ten, który jest ładowany. Jestem pewien, że to nie dotyczy wszystkich, ale mi się udało.

Mam nadzieję, że to pomogło. Miłego kodowania! :RE

Dla tych, którzy potrzebują dynamicznie dodawanej ikony ulubionych, oto co zrobiłem z inicjatorem aplikacji:

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

Po prostu usuń plik fav.ico w src / i dodaj go. Ikona ulubionych zostanie dodana przed uruchomieniem aplikacji

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

Dodaj źródło swojej ikony i uruchom ponownie aplikację, która się zmieni.

Próbowałem wielu z tych rozwiązań, ale nie udało mi się. Ten, który działał w mojej aplikacji Angular 5, był następujący:

index.html: Skomentuj swój tag linku

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

.angular-cli.json: pozostaw typ elementu jako „.ico”

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

W KOŃCU..

• W strukturze folderów projektu umieść favicon.ico wewnątrz src ex: (C: \ Dev \ EPS \ src). NIE musisz go mieć w folderze zasobów, ponieważ nie masz do niego odniesienia.

• Upewnij się, że ikona nie jest uszkodzona (ikona powinna być czytelna, jeśli jest wyświetlana w eksploratorze okien, czyli bez ikony uszkodzonego okna)

• musi mieć wymiar 32 x 32

Upewnij się, że podczas korzystania z obrazu ikony nie jest to rozszerzenie manipulowane, na przykład jeśli pobierzesz pngobraz, a następnie ręcznie zmień jego rozszerzenie z pngnaicon . W takim przypadku obraz zostanie uszkodzony. A przeglądarka nie rozumie.

Zrobiłem ten błąd, ale po użyciu oryginalnego obrazu ikony zaczyna działać.

1. Sprawdź tag linku w pliku index.html, czy powinien wyglądać tak.

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

2. Sprawdź nazwę pliku favicon.ico w katalogu / src.

3.Ponownie uruchom Angular z ng służyć i odśwież aplikację.

Jeśli się nie wyświetla (lub coś wygląda tak, jakby buforował stary plik favicon.ico). spróbuj ponownie odświeżyć ścieżkę favicon, aby załadować plik favicon.ico (np. odśwież twojadomena.com/favicon.ico)

Miałem ten sam problem.

Jeśli używasz komputera Mac, będziesz musiał opróżnić pamięć podręczną ( Option+ ⌘+ E) i ponownie załadować stronę, a także zrestartować aplikację (i oczywiście zmienić ścieżkę w index.html).

1. Usuń istniejący favicon.ico
2. Dodaj nową ikonę do folderu src o nazwie „favico.ico”
3. Wyczyść pamięć podręczną w przeglądarce.

Ikona nie odzwierciedla się tylko z powodu pamięci podręcznej przeglądarki. Czasami spróbuj ponownie uruchomić aplikację

Poniższe kroki zadziałały dla mnie.

1. Usuń domyślny plik „favicon.ico” na nowy o innej nazwie, czyli w moim przypadku „_favicon.ico”.

   Uwaga: Nie zachowuj nazwy domyślnej, ponieważ jest ona zapisywana w pamięci podręcznej przeglądarki i trudna do nadpisania nową ikoną.

2. Zaktualizuj plik index.html, dodając nowy tag linku, tj

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

3. Zaktualizuj plik .angular-cli.json z nową nazwą ikony, np. „_Favicon.ico”.

4. Zbuduj i uruchom swoją aplikację i wykonaj twarde odświeżanie Ctrl+ F5.

tak proste i łatwe jak:

1. dodaj swoją ikonę lub png w tym samym katalogu, co favicon
2. edytuj .angular-cli.json, w zasobach usuń favicon.ico umieść swoje na miejscu
3. edytuj index.html, wyszukaj favicon i umieść swoją na miejscu
4. uruchom ponownie

to jest zrobione

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

"assets": [

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

  ],

to działało dla mnie.

W moim przypadku problem polegał na tym, że miałem inne wymiary niż normalne. Miałem, 48x48 pxpodczas gdy się spodziewałem, 32x32 pxa moje rozszerzenie było png, więc musiałem to zmienić naico

To, co naprawdę działa dla mnie, to umieszczenie mojej ulubionej ikony w folderze zasobów i automatyczne pojawienie się w przeglądarce.

1. zmień lokalizację na folder asset w folderze src.
2. zmień index.html w ten sposób <link rel="icon" type="image/x-icon" href="assets/favicon.png">

Ok, tutaj w 2020 roku 9.1.12. Nie rozumiem, dlaczego dokładnie ten proces jest taki trudny. Śledziłem prawie każdy powyższy post i żaden z nich nie pracował dla mnie.

Co DID działało, było to: Całkowite usunięcie odniesienia do favicon w index.html. Jest to całkowicie sprzeczne z intuicją, ale działa. NIE MUSISZ umieszczać go w assetsfolderze. Próbowałem tego wszystkiego, ale niestety żadna z tych sugestii nie zadziałała.

index.html

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

angular.json

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

a kiedy biegam ng build --prod, jest tam favicon. Wyświetla się również na moim serwerze live.

Usunięcie pamięci podręcznej favicon Chromes i ponowne uruchomienie przeglądarki na komputerze Mac działało u mnie.

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

Miałem ten sam problem i rozwiązałem go wymuszając odświeżanie metodą opisaną tutaj :

Aby odświeżyć ikonę ulubionych witryny, możesz zmusić przeglądarki do pobrania nowej wersji za pomocą tagu linku i zapytania w nazwie pliku. Jest to szczególnie przydatne w środowiskach produkcyjnych, aby upewnić się, że użytkownicy otrzymają aktualizację.

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

Rozwiązałem problem, tworząc własny plik .ico, utworzyłem folder zasobów i umieściłem tam plik. Następnie zmieniono link href w Index.html