I am attempting to change my favicon in an angular.js application. I am running into an issue of not understanding how the icon is being referenced. My code is as such.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
When I tried changing the link for the favicon to the following (and several other directory variations) I got the default icon (blank page img).
<link rel="icon" type="image/png" href="app/img/icons8-shopping-basket-96.png">
Here's where my confusion really kicks. To check to see if I was misunderstanding something fundamental I placed the favicon into a directory (simply to test the scope of the href link) and without changing the original href link that img still appeared. How is this happening and how to do I properly reference another image?