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

Question

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?

score 13 · Accepted Answer · edited Jul 07 '20 at 16:59

13

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

edited Jul 07 '20 at 16:59

Konrad Viltersten

32,186
68
222
392

answered Jun 08 '17 at 19:24

Maikel

190
1
11

I swear I ran a text search for `favicon` in the project directory. Perhaps it skipped hidden files. Thanks! – Nathan Osman Jun 08 '17 at 19:27
4

From Angular 6 upwards the file that needs to change its angular.json and not angular-cli.json – Alator Jul 20 '19 at 20:08

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

1 Answers1