[angular-cli] 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">

This question is related to angular-cli

The answer is


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


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.

TO RELOAD FAVICON FOR ANY WEB PROJECT:

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


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 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


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


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.


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.


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

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


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">

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"
        ],**

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">

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).


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.


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" />

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": "/"
  }
]

  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


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

single period


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


Press Ctrl+F5 in browser window


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

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

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

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


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

"assets": [

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

  ],

this worked 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 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


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.


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.


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

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.


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.


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.


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 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.