Replace favicon.ico in favor of png in src/assets

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Area

- [ ] devkit
- [x] schematics

Desired functionality

favicon.ico is outdated and obsolete relic from the 90s. Browsers for the past 2decades have supported png favicons. Additionally, while it's fairly easy now to generate a favicon.ico, it's just not needed or used anymore.

There's no reason imo to include favicon.ico, even for "compatibility". Removing the favicon.ico will also remove the entries needed in angular.json and remove the only asset stored outside of src/assets.

It should be replaced in favor of modern favicon methods. PWAs should use manifest.json

  <link rel=icon href="assets/favicon-16x16.png" sizes="16x16" type="image/png">
  <link rel=icon href="assets/favicon-32x32.png" sizes="32x32" type="image/png">
  <link rel=icon href="assets/favicon.svg" sizes="any" type="image/svg+xml"> 

Note: svg doesn't have full browser support.

We haven't needed favicon.ico in years, but it's still widely used and implemented, even though all browsers support modern methods.

[kyliau]

Verified that this is still a valid request, see https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/application/files/src/favicon.ico.template

[alan-agius4]

From #11275

Description

See link for details
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

Describe the solution you'd like

Generate application with multiple favicons to show proper way for the brand new apps

[Lonli-Lokli]

Not sure about png but with svg I observe in Chrome network request for it on every route change, ie it is not cached.

[dgp1130]

Talked to @mgechev about this. He has a regular sync with the Chrome team who can provide some guidance around best practices with favicons that we can we use to understand the ideal set up and how we can move ng new as close to that as possible.

[samuelfernandez]

I think this task should come before #15844 (comment)

A good approach could be that there was a new option to provide a png in the assets folder and that all the favicons could be automatically generated by the build process. With that done, later we could add them to the manifest.json when using a PWA.

The code could be a new index transform plugin here https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular/src/utils/index-file

Would this plan be OK for a contribution?

cc @alan-agius4

[samuelfernandez]

I have a working builder to do this job in a personal repo https://github.com/ng-easy/platform/blob/master/libs/builders/src/favicons/index.ts

I’m happy to contribute it. Would you welcome a PR? Still have doubts if it should be an option for the “build” builder, or for the PWA builder. Any suggestions for the integration?