Where is my angular project picking up the A favicon.ico from? It's not in my project

user_8773124 0
Viewed 197

Just recently, code that has worked correctly since 2018 has started falsely showing the old default "A" favicon.ico from Angular. I have combed my code and can't find it anywhere. All of my entries point to the correct favicon.ico, which is a brand. This happened last week and I closed my browser and reloaded everything and it went away. Today, I moved from one building to another, switching wi-fi. I changed my start command from a specific IP address, ng serve --host 192.168.40.170, to a more generic ng serve, which is localhost, and it popped back up again!

enter image description here

I tried rebooting the browser, but this time it didn't go away. Am I the only one seeing this new irritation?

angular-material angular favicon
1 Answers

You have different solutions to solve this problem:

1. Replace the default favicon.ico by your icon:

  1. Remove the default src\favicon.ico from angular
  2. Replace the favicon.ico with your icon in the src folder

2. Use PNG as default icon (before Angular 9):

  1. Remove the default src\favicon.ico from angular
  2. Add your icon favicon.png in the src folder
  3. Add it in the index.html
<link rel="icon" type="image/x-icon" href="favicon.png">
  1. Add your assets in your angular config file (angular-cli.json or angular.json)

angular-cli.json:

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

3. Use PNG\ICO as default icon (after Angular 9):

  1. Remove the default src\favicon.ico made by angular
  2. Add your icon (favicon.png or favicon.ico) in the assets folder to make it visible to the browser
  3. Change file in the index.html (favicon.png or favicon.ico)
<link rel="icon" type="image/x-icon" href=".assets/favicon.png">
  1. Add your assets and you file (favicon.png or favicon.ico) in your angular config file (angular-cli.json or angular.json)

angular.json:

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

5. Completely remove default favicon.ico from angular:

  1. Remove from index.html
<link rel="icon" type="image/x-icon" href="favicon.ico">
  1. Remove "favicon.ico" from assets in the config file (angular-cli.json or angular.json)
  2. Delete src/favicon.ico

6. Clear your browser (cache, cookies...) :

Windows:

  • IE: Ctrl+R
  • Firefox: Ctrl+Shift+R
  • Chrome: Ctrl+R or Ctrl+F5 or Shift+F5

Linux:

  • Firefox: Ctrl+Shift+R
  • Chrome: Ctrl+R or Ctrl+F5 or Shift+F5

macOS:

  • Safari: āŒ˜+R
  • Firefox/Chrome: āŒ˜+Shift+R
user_121387010
Related