favicon not working in angular application

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

As much as I can see from your folder structure, your angular-cli.json is in root folder, so referencing favicon-16x16.png won't work as "favicon-16x16.png" in all of the cases, that might be the problem that it's working on the root site, but not working on sub-directories, instead try it like this :

"assets": [
        "assets",
        "/src/favicon-16x16.png"
      ],

And in your href of the link add / before favicon-16x16.png so it looks like :

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

The problem might not be here at all, it might be how you wrote some of the other code, try looking a few steps back into the code where some other things get called and see if there's some logical problems there, e.g some function or some part of the code that needs to execute doesn't get called at all. (and I'm guessing you don't have any synthax problems or errors since the program itself is working)


Try adding this to the assets folder

"assets": [
        "assets",
        "./src/favicon-16x16.png"
      ],

And then the favicon as

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