favicon not working in angular application

Question

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": [
        "assets",
        "favicon-16x16.png"
      ],

• 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

EDIT:

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.

Answer 1

From @KingpinEX answer, I have added separate favicon for normal URL and relative URL

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

After this changes then I did a force refresh. Now it is working as expected.

Answer 2

Add image inside assets folder and update below path in index.html

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

Answer 3

Consider the fact that favicons are always heavily cached. Even window reload with cache cleaning may not help you. Try to add a get param to the favicon path, for example:

<link rel="icon" sizes="16x16" href="some-path/favicon-16x16.png?v=2" type="image/x-icon" />

Answer 4

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)

Answer 5

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.

Answer 6

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

Answer 7

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.

Answer 8

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

Answer 9

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