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

[ghost]

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 https://github.com/angular/angular-cli/issues/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 https://github.com/angular/angular-cli/issues/15844#issuecomment-803296912

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?

[samuelfernandez]

@alan-agius4 Any chances on moving this forward?

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.