How to change Angular CLI favicon

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 have deleted that icon (favicon.ico in src folder). It still shows, and I don't know from where it's loaded from.

I have replaced that icon with another icon, but it still show the Angular logo:

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

Make a png image with same name (favicon.png) and change the name in these files:

index.html:

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

angular-cli.json:

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

And you will never see the angular default icon again.

Size should be 32x32, if more than this it will not display.

NOTE: This will not work with Angular 9

For angular 9 you have to put favicon inside assets then give path like

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

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.

Navigating to the file finally fixed this for me. In my case: http://localhost:4200/favicon.ico

I had tried to refresh, stop and start ng serve again, and "Empty Cache and Hard Reload", none worked.

The ensure the browser downloads a new version of the favicon and does not use a cached version you can add a dummy parameter to the favicon url:

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

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.

For Angular 6, put favicon.png of size 32x32 in the asset folder and change the path in index.html. Then,

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

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.

Make a icon image with the extension .ico and copy and replace it with default favicon file in src folder.

index.html:

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

angular.json:

**"assets": [
          "src/favicon.ico",
          "src/assets"
        ],**

TO RELOAD FAVICON FOR ANY WEB PROJECT:

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

Move favicon.ico to your assets and then to img folder, and after that only change your icon link tag in header. It helps me when favicon was not displayed at all.

For future readers, if this happens to you, your browser wants to use the old cached favicon.

Follow these steps:

1. Hold CTRL and click the "Refresh" button in your browser.
2. Hold Shift and click the "Refresh" button in your browser.

Fixed.

Please follow below steps to change app icon:

1. Add your .ico file in the project.

2. Go to angular.json and in that "projects" -> "architect" -> "build" -> "options" -> "assets" and here make an entry for your icon file. Refer to the existing entry of favicon.ico to know how to do it.

3. Go to index.html and update the path of the icon file. For example,

4. Restart the server.

5. Hard refresh browser and you are good to go.

Ok, here in 2020 on 9.1.12. I don't understand why exactly this process is so difficult. I followed almost every post above and none of them worked for me.

What DID work was this: Totally removing the favicon reference in index.html. It's totally counter intuitive but it works. You DON'T need to put it in the assets folder. I tried all of that but unfortunately none of those suggestions worked.

index.html

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

angular.json

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

and when I run ng build --prod, the favicon is there. Displays on my live server too.

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

single period

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

For those needing a dynamically added favicon here is what I did with an app initializer:

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: []
}

Just remove fav.ico file under src/ and add this. The favicon will be added before app start

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

Add source of your icon and restart app it will change.

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

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.

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)

I had the same problem.

If you are using a Mac, you will need to empty the Cache (Option+⌘+E) and reload the page in addition to restarting the app (and of course changing the path in index.html).

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

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.

as simple and easy as :

1. add your icon or png in the same directory as favicon
2. edit .angular-cli.json, in assets remove favicon.ico put yours in place
3. edit index.html, search favicon and put yours in place
4. run ng serve again

that's done

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

"assets": [

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

  ],
                                                          

this worked for me.

In my case, the problem was that I had different dimensions compared to normal one. I had 48x48 px whereas it was expecting 32x32 px and my extension was png so I had to change it to ico

What really works for me was putting my favicon into assets folder and apear automatically in the browser.

1. change location to assets folder inside src folder.
2. change index.html like this <link rel="icon" type="image/x-icon" href="assets/favicon.png">

An editor (in my case IDEA 2020.2) can sometimes add src/ prefix to icon location in href. I mean

 <link rel="icon" ... href="src/favicon.ico">

instead of

  <link rel="icon" ... href="favicon.ico">

So in this case you should remove this src/ part in href. This solved the problem for me.

If upgarde angular to 8+ you must change in angular.json

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

to

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/"
  },
  {
    "glob": "favicon.ico",
    "input": "src/",
    "output": "/"
  }
]

Follow these steps to change icon from default angular to an application specific one.

1. For AngularJS Projects: Add the icon inside the webapps. Inside the index.html file add the following line

<link rel = "icon" type = "image/x-icon" href = "location of specifed icon inside webapps directory"> in the head tag.

2. For projects based on Angular 7/8: Add the icon image to assets folder. Go to index.html file inside the project. Change the following link tag

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

This should modify the default angular icon to your specified icon.

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

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

I had the same issue, and solved it by forcing the refreshby the method described here:

> To refresh your site's favicon you can force browsers to download a new version using the link tag and a querystring on your filename. This is especially helpful in production environments to make sure your users get the update.

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

I fixed the issue by creating my own .ico file and created a assets folder and put the file over there. Then changed the link href in Index.html