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 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    lt link rel  icon  type  image x-icon  href  favicon ico  gt

User · Answer

Make a icon image with the extension  ico and copy and replace it with default favicon file in src folder   index html    lt link rel  icon  type  image x-icon  href  favicon ico    gt    angular json      assets                src favicon ico              src assets

User · Answer

TO RELOAD FAVICON FOR ANY WEB PROJECT   Right click on the favicon and click  reload   Works every time

User · Answer

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

User · Answer

An editor  in my case IDEA 2020 2  can sometimes add src  prefix to icon location in href  I mean   lt link rel  quot icon quot      href  quot src favicon ico quot  gt   instead of    lt link rel  quot icon quot      href  quot favicon ico quot  gt   So in this case you should remove this src  part in href  This solved the problem for me

User · Answer

What really works for me was putting my favicon into assets folder and apear automatically in the browser    change location to assets folder inside src folder  change index html  like this    lt link rel  icon  type  image x-icon  href  assets favicon png  gt

User · Answer

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

User · Answer

Please follow below steps to change app icon    Add your  ico file in the project  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  Go to index html and update the path of the icon file  For example    Restart the server  Hard refresh browser and you are good to go

User · Answer

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    lt link rel  icon  type  image x-icon  href  favicon ico any param  gt

User · Answer

Remove your existing favicon ico Add new icon into the src folder with name as  favico ico  Clear Cache in your browser    The icon does not reflect only because of your browser cache  Sometimes try restarting the application

User · Answer

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    lt  --  lt link rel  icon  type  image png  href  src assets images favicon ico  gt  -- gt      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

User · Answer

Deleting chromes favicon cache and restarting the browser on the mac worked for me   rm   Library Application  Support Google Chrome Default Favicons

User · Answer

Press Ctrl F5 in browser window

User · Answer

1 Check your link tag on index html file that it should look like this   lt link red  quot icon quot  type  quot image x-icon quot  href  quot favicon ico quot  gt  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

User · Answer

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

User · Answer

Make a png image with same name  favicon png  and change the name in these files   index html    lt link rel  icon  type  image x-icon  href  favicon png    gt    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   lt link rel  icon  type  image x-icon  href  assets favicon png  gt  x000D   x000D   x000D

User · Answer

lt link rel  icon  type  image x-icon  href     gt    Add source of your icon and restart app it will change

User · Answer

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

User · Answer

as simple and easy as      add your icon or png in the same directory as favicon edit  angular-cli json  in assets remove favicon ico put yours in place edit index html  search favicon and put yours in place run ng serve again   that s done

User · Answer

lt link rel  quot icon quot  type  quot image x-icon quot  href  quot   assets myimage png quot  gt   single period

User · Answer

we can change angular CLI favicon icon  we have to put icon file in  assets  folder and give that path in index html    lt link rel  icon  type  image x-icon  href    assets images favicon png  gt   It s work for me

User · Answer

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

User · Answer

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  lt  --  lt link rel  quot icon quot  type  quot image x-icon quot  href  quot favicon ico quot  gt  DELETE THIS -- gt   angular json  quot assets quot        quot src favicon ico quot      quot src assets quot      and when I run ng build --prod  the favicon is there  Displays on my live server too

User · Answer

For Angular 6  put favicon png of size 32x32 in the asset folder and change the path in index html  Then     lt link rel  icon  type  image x-icon  href    assets favicon png  gt

User · Answer

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     lt link rel  icon  href  http   www yoursite com favicon ico v 2    gt

User · Answer

If upgarde angular to 8  you must change in angular json  quot assets quot        quot assets quot      quot favicon ico quot     to  quot assets quot              quot glob quot    quot      quot        quot input quot    quot src assets  quot        quot output quot    quot  assets  quot                quot glob quot    quot favicon ico quot        quot input quot    quot src  quot        quot output quot    quot   quot

User · Answer

Following steps worked for me   Remove default  quot favicon ico quot  file with a new one with different name i e   quot  favicon ico quot  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   Update index html with new link tag i e    lt link rel  quot icon quot  type  quot image x-icon quot  href  quot  favicon ico quot    gt     Update  angular-cli json with new icon name i e   quot  favicon ico quot    Build  amp  launch your app  and do a hard refresh Ctrl F5

User · Answer

For future readers  if this happens to you  your browser wants to use the old cached favicon    Follow these steps    Hold CTRL and click the  Refresh  button in your browser  Hold Shift and click the  Refresh  button in your browser    Fixed

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

lt link rel  icon  type  image x-icon  href  assets liana jpg  gt    assets               assets sorry jpg            assets liana jpg          this worked  for  me

User · Answer

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

[angular-cli] How to change Angular CLI favicon

Examples related to angular-cli