favicon not working in angular application

This is below code which is for a custom favicon

 <link rel="shortcut icon" sizes="16x16" href="favicon-16x16.png" type="image/png" />

in angular.cli

"assets": [
  • It's working for this URL(main menu) : http://localhost:4200/maintenance

  • But it's not working for this URL(Sub Menu): http://localhost:4200/maintenance/colors


Also it's not working with full favicon URL href="../src/favicon-16x16.png"

Folder structure :

I have tried with putting all type of URL's from my old question : Different between ./ , ../ , ../../ , ~/ on file path(URL) in asp.net

But it doesn't help me.

According to what you are saying, it is working on "main menu" and not on "sub menu", it looks like your main src folder is called "/maintenance". So you should try using it as your base root.

try :

<link rel="shortcut icon" sizes="16x16" href="/maintenance/favicon-16x16.png" type="image/png" />

How to change Angular CLI favicon, I had tried to refresh, stop and start ng serve again, and "Empty Cache and Hard Reload", none worked. we can change angular CLI favicon icon. we have to put icon file in "assets" folder and give that path in index. <link rel="icon" type="image/x-icon" href="./assets/images/favicon. I’m using Angular for a web application at work, and all told it’s been really great. However, I noticed that the favicon was not being displayed in the browser tab, which was pretty annoying considering I had defined one in my HTML.

Try adding this to the assets folder

"assets": [

And then the favicon as

<link rel="shortcut icon" sizes="16x16" href="favicon-16x16.png" type="image/png" />

favicon not being deployed/displayed � Issue #2232 � angular , angular-cli: 1.0.0-beta.14 node: 6.6.0 os: win32 x64. I have tried a number of options in the index.html file to get the favicon showing but without� How do we find out if the team still wants to have the favicon.ico file copied during build? It appears this might have been lost in Pull Request 2056 . If it should still do this, I think the following will fix it In packages\angular-cli\models\webpack-build-common.ts update the plugins object to include a copy of the favicon.ico file:

You are using relative url. It means that first page translates favicon's url to: http://localhost:4200/favicon-16x16.png and second to http://localhost:4200/maintenance/favicon-16x16.png.

so better use

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

Favicon is not appearing on firefox browser for Angular js templates , I think this is no angular specific problem. Because there are just one favicon on the side and it makes no sense to build it into the app. Maybe is not working for this angular version. – beanic Jan 22 at 13:06 if creating a brand new angular app, and using this approach doesn't work. I'd suggest putting a simplified version of your code on stackbliz and sharing the link so it can be reviewed.

Your first config is fine. I got exactly the same behaviour as you in internet explorer 11. Even after removing cache etc. In FireFox the icon doesn't change at all. Didn't try to remove cache and history since it it my primary browser. In Chrome it works just fine. Yeey Chrome.

So I guess you are using internet explorer and internet explorer stores it cache in Windows itself. You can use windows "Disk cleanup" (I'm not sure if I translated it corectly) to clean this cache. After that the problem was solved.

Link for Windows 10

TLDR it works just fine. It is just an caching issue.

How to change the favicon in Angular, Changing favicon � Open the angular app in your favorite code editor. � Navigate to src folder and remove the favicon. ico file. � Now, add a new� 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

I had a similar issue and had to use an absolute path for favicon. You can try using an absolute path to your application (or a dedicated content server/CDN).

It would be helpful to also show what's under the app folder so we can see how the /maintenance and /maintenance/colors paths are being resolved (are they folder paths? angular routing?). In either case an absolute path would be the simplest solution so you can move on to more productive things.

Favicon.ico, Please not, renaming a jpg, png etc. won't work, it has to be an ico file. your new icon to the main directory of your site, ie. www.example.com/favicon.ico. To place a Favicon on your site you would use the following in the <head> tag <link rel="shortcut icon" href="http://yourwebsitepath/favicon.ico" /> You need to be sure that the path is correct for the icon. If the path is not correct it will not appear. I have also seen caching issues that makes it seem that the icon isn't working.

Adding Real Favicon Generator To Your Angular App, For just about all of my Angular applications I've used Real Favicon If you run into any issues or have any questions please let me know in� I am using this format for linking to my favicon. My favicon.ico file is in the same directory as my HTML files, but for some reason it does not appear when I upload it to my web server. I cleared my cache, closed my browser, and re-opened it, but the favicon will still not appear. If someone could explain why this is I would really appreciate it.

favicon not working in angular application, favicon not working in angular application. 发布于 2020-05-03 06:54:27. This is below code which is for a custom favicon <link rel="shortcut icon" sizes="16x16"� Edge restart is not needed - after page refresh (F5), the favicon should be loaded. To disable loopback again: CheckNetIsolation LoopbackExempt -d -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe" The favicon will be cached in Edge, so it will be still visible. Other info

How to fix 404 not found error failed to load favicon.ico – Anthony , I believe that it is best practice to use an ICO formatted icon for cross browser functionality. If using a png, you can use just about any online ico� The favicon is working fine in the explorer, but doesn't appear in the other browsers. Help? tomdkat Retired Trusted Advisor. Joined May 6, 2006 Messages 7,148.

  • If you are using @angular/cli generated structure, why wouldn't you replace the generated favicon.ico from src->assets->img with your custom one?
  • I have tried your changes with hard browser refresh. Bad LUCK. it's not working!
  • @RameshRajendran you need to also clear cache any component level cache too . as it is cached
  • I have cleared by @Robin answer. But it's not working
  • what is the real public url of your favicon ? http://localhost:4200/src/favicon-16x16.png ? or the src is outside the public files of your project ?
  • I have updated my question with my folder structure for you
  • Can you explain a bit? WHAT is not working? What is the expected behaviour and what is the actual behaviour?
  • Same behavior which is the question after tried your answer
  • It's working for this URL(main menu) and But it's not working for this URL(Sub Menu) doesn't tells us much