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

Question

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!

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

Answer 1

You have different solutions to solve this problem:

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

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

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

1. Remove the default src\flavicon.ico from angular
2. Add your icon flavicon.png in the src folder
3. Add it in the index.html

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

4. Add your assets in your angular config file (angular-cli.json or angular.json)

angular-cli.json:

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

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

1. Remove the default src\flavicon.ico made by angular
2. Add your icon (flavicon.png or flavicon.ico) in the assets folder to make it visible to the browser
3. Change file in the index.html (flavicon.png or flavicon.ico)

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

4. Add your assets and you file (flavicon.png or flavicon.ico) in your angular config file (angular-cli.json or angular.json)

angular.json:

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

5. Completely remove default flavicon.ico from angular:

1. Remove from index.html

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

2. Remove "favicon.ico" from assets in the config file (angular-cli.json or angular.json)
3. 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