How to provide favicon.png in an Angular app instead of favicon.ico?

I created a new Angular app with:

ng new ...

And I can view the application with:

ng serve --open

I removed the default src/favicon.ico and replaced it with src/favicon.png. I also opened src/index.html and changed the appropriate line to read:

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

This doesn't seem to have worked. Issuing a GET request for /favicon.png simply returns the content from src/index.html. Restarting ng serve makes no difference.

How can I make this file accessible to the application?

Solution

Make a PNG image with same name (i.e. favicon.png) and change the name in these files.

index.html

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

angular.json

"assets": [
  "src/favicon.png" 
  "src/assets",
]

In older version of Angular (prior to v.7), the latter file is angular-cli.json

"assets": [
  "favicon.png" 
  "assets",
]

Afterwards, depending on browser, version OS etc.

restart the app
restart the browser
clean cache