How to change Angular CLI favicon

Question

How can I change the default favicon that is set by the Angular CLI?

I have tried many things, but it always shows the Angular logo as the favicon, even though I hav

Answer 1

1. Remove your existing favicon.ico
2. Add new icon into the src folder with name as "favico.ico"
3. Clear Cache in your browser.

The icon does not reflect only because of your browser cache. Sometimes try restarting the application

Answer 2

we can change angular CLI favicon icon. we have to put icon file in "assets" folder and give that path in index.html.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> It's work for me.

Answer 3

I was struggling with this as well, thinking I was doing something wrong with Angular, but my issue ended up being Chrome caching the icon. The standard "Empty Cache and Hard Reload" or restarting the browser weren't working for me, but this post pointed me in the right direction.

This specifically worked for me:

If on windows and using chrome, (exit chrome from taskbar) then go to C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default and delete the files Favicons-journal, Favicons then re-start chrome (from the taskbar, kill all instances).

There are lots of other good suggestions in that post if this doesn't work for you.

Answer 4

1.Check your link tag on index.html file that it should look like this.

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

2.Check file name of favicon.ico in /src directory.

3.Rerun Angular with ng serve and refresh application.

4.If it doesn't show (or something look like it buffer old favicon.ico file). try to refresh path of favicon again to load favicon.ico file (eg. refresh yourdomain.com/favicon.ico)

Answer 5

Following steps worked for me.

1. Remove default "favicon.ico" file with a new one with different name i.e. "_favicon.ico" in my case.

   Note :: Don't keep the default name, as it's get's cached in your browser and difficult to overwrite with new icon.

2. Update index.html with new link tag i.e.

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

3. Update .angular-cli.json with new icon name i.e. "_favicon.ico".

4. Build & launch your app, and do a hard refresh Ctrl+F5.

Answer 6

Since you have replaced the favicon.ico file physically, there must be a caching issue somewhere. There is a cache in your browser. Force it to get flushed by pressing Ctrl+F5.

If the default icon is still displayed, try another browser with a clean cache (i.e. you haven't visited the page with that browser yet).

Clear Cache Shortcuts: (Source)

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

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