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

I was playing around with this for a little while. Turns out that the favicon is apparently handled by a node module called @scematics (at least in Angular5).

You can change your favicon in this folder:

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

In that folder there should be a favicon.ico, that's the one that is loaded. Im pretty shure this doesnt apply to everyone but it worked out for me.

Hope this helped. Happy coding! :D

Answer 2

I tried many of these solution but was unsuccessful. The one that worked for my angular 5 application was the below:

index.html: Comment out your link tag

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

.angular-cli.json: leave the item type as ".ico"

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

LASTLY..

• In your project folder structure, have the favicon.ico inside the src ex: (C:\Dev\EPS\src). You do NOT need to have it in your asset folder since you aren't referencing it.

• Make sure your icon is not broken (Your icon should be readable if viewed through window explorer aka no broken window icon)

• must be 32 x 32 dimension

Answer 3

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

"assets": [

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

  ],

this worked for me.

Answer 4

TO RELOAD FAVICON FOR ANY WEB PROJECT:

Right click on the favicon and click 'reload'. Works every time.

Answer 5

Make sure when you use icon image it is not manipulated extension, like if you download a png image and then manually change its extension from png to icon. In this case, your image will be corrupted. And browser does not understand.

I did this mistake, but after using original icon image its start working.

Answer 6

Deleting chromes favicon cache and restarting the browser on the mac worked for me.

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