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

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

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

Answer 2

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