Jak zmienić favicon w Angular CLI


140

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


Uruchomienie aplikacji z innym portem rozwiązuje problem. przykład:ng s --port 4201
Sajad

Mam ten sam problem. W moim przypadku lokalnie wszystko jest w porządku, ale kiedy wdrażam na serwer, pojawia się błąd wewnętrzny serwera 500 ...
Ziggler

Przeczytałem całą odpowiedź, która trochę mi pomogła, ale szczerze mówiąc, nie powinno to być tak skomplikowane w przypadku tak podstawowej potrzeby: wystarczy ścieżka do skopiowania obrazu, a następnie prawdopodobnie plik konfiguracyjny, a następnie restart. odpowiedź „odśwież” nie pomaga.
pdem

Favicon to statyczny plik, który jest specjalnie skonfigurowany w angular.json, po prostu zostaw domyślny i zobacz tutaj, jak to działa: stackoverflow.com/questions/40424907/ ...
pdem

Odpowiedzi:


159

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


2
Dziękuję Sukhveer. Działa to idealnie, wystarczy ponownie uruchomić aplikację po dodaniu ikony w angular-cli.jsonpliku.
Ajay Sivan

1
To powinna zostać zaakceptowana odpowiedź! Nic nie działało, ale ta sztuczka zadziałała! Dziękuję Sukhveer Singh!
Junia Montana

Musiałem też zmienić ścieżkę png<link rel="icon" type="image/png" href="./favicon.png" />
Dude Pascalou

1
Dzięki za kątową 9
trikę

56

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.


1
dzięki, człowiek zadziałał błyskawicznie - CTRL F5 dla wygranej - pracował z Angular 6 z favicon w tym samym katalogu co index.html i tą linią w index.html ... <link rel = "icon" type = "image / x-icon" href = "favicon.ico">
danday74

skróty są niesamowite!
Gerardo Bautista

36

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.


1
To jedyna odpowiedź, która mi pomogła. Dziękuję za to!
Ivan

2
Po przejściu do favicon ponownie załadowałem stronę główną i wcisnąłem ctrl + f5 (chrome) - to zadziałało. Twoje zdrowie.
blueprintchris

1
to jedyna rzecz, która zadziałała dla mnie. nie do wiary!
Yaniv Eliav

28

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

Pracował dla mnie Dzięki
Venky559

Dzięki ...?
Any

to jedyna rzecz, która działała dla mnie. Nie ctrl + f5, ani wszystkie inne przypuszczalne odpowiedzi, to jest rzecz, która działa!
saferJo

14

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.


Tak, nic innego nie działało dla mnie tutaj, ale umieszczenie go w folderze zasobów działało idealnie. Twoje zdrowie.
scohe001

10

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.


1
Spowoduje to również usunięcie ikon ze wszystkich istniejących stron z zakładkami, aż do następnej wizyty na tej stronie. Jednak to załatwiło sprawę dla mnie.
David B

9

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

Rzeczywiście: musiałem umieścić moje w folderze zasobów i zmienić ścieżkę w pliku index.html oraz w pliku angular.json.
G. Delvigne

5

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

ratownik! thx
koo9

4

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.


W przeglądarce Chrome i Firefox nie był to problem z pamięcią podręczną. Przeniosłem plik ICO, a Chrome i Firefox zostały natychmiast zaktualizowane.
Steve11235

Zaktualizowałem plik favicon.ico i nie można go załadować. Zrobiłem to (przeniosłem się do zasobów i zaktualizowanych linków) i działało dobrze.
David

4

Naciśnij Ctrl+ F5w oknie przeglądarki


Cześć Andrey, dobra odpowiedź, ale możesz chcieć wyjaśnić, że to odświeża pamięć podręczną, w przeciwnym razie jest to tylko „magiczna” odpowiedź.
Tom

1
Ta odpowiedź jest dokładnie taka sama, jak odpowiedź Jurija (odpowiedziała 26 listopada 16 o 19:12), ale pomniejszona o bardzo przydatne wyjaśnienie.
robinCTS

4

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.


1
po 20 minutach uderzania głową o ścianę to jedyne rozwiązanie, które zadziałało. Dziękuję Ci!!
wooldridgetm

2

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.


2

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.

1

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


1

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


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

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


1

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

0

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


0

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)


0

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


0
  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ę


0

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.


0

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


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

"assets": [

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

  ],

to działało dla mnie.


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

0

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


0

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

0

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.


-1

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

-1

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

-1

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.