Menu
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon. ico".
Favicon images are small in size, only 16 pixels in height by 16 pixels in width, so there is not much space for complex designs. Still, a good favicon that is clean, simple and easily identifiable can provide a good visual indicator for visitors navigating to your site through their tabs or bookmarks.
Make a png image with same name (favicon.png) and change the name in these files:
index.html:
<link rel="icon" type="image/x-icon" href="favicon.png" />
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
<link rel="icon" type="image/x-icon" href="assets/favicon.png">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.
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.
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:
<link rel="icon" type="image/x-icon" href="favicon.ico?any=param">
we can change angular CLI favicon icon. we have to put icon file in "assets" folder and give that path in index.html.
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png">
It's work for me.
For Angular 6, put favicon.png of size 32x32 in the asset folder and change the path in index.html. Then,
<link rel="icon" type="image/x-icon" href="./assets/favicon.png">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With