Generate favicon as part of adding PWA service worker

[kmturley]

🚀 feature request

Relevant Package

This feature request is for @angular/pwa

Description

When using the command: ng add @angular/pwa --project *project-name*

it completes a set of tasks including:

1. Adds the @angular/service-worker package to your project.
2. Enables service worker build support in the CLI.
3. Imports and registers the service worker in the app module.
4. Updates the index.html file:
5. Includes a link to add the manifest.json file.
6. Adds meta tags for theme-color.
7. Installs icon files to support the installed Progressive Web App (PWA).
8. Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.

However on step 7, adding the icons files these are generic default Angular icons. In order to replace these developers then need to manually:

1. Find an icon generator
2. Upload their image and generate the new code
3. Download the icons copy/paste into the folder
4. Copy/paste the icons code into the index.html head tag

Every developer needs to do these steps on every new project. So it would save alot of time if we had an automated solution.

Describe the solution you'd like

The option to include my HQ image file for the icon, which is automatically converted into the various sizes and added used instead of the default Angular icon.

Describe alternatives you've considered

Consider using a webpack plugin or node.js script to generate the icons for us?

Some examples: https://github.com/jantimon/favicons-webpack-plugin https://github.com/itgalaxy/favicons

[gkalpak]

Moved to the @angular/cli repo, because the @angular/pwa schematics live there and the CLI teams has a better understanding of how feasible/easy it is to integrate with other tools (such as the ones mentioned above) or how/if it is possible to pass in input (such as an app-specific image).

(TBH, I feel this is kind of outside the scope of the PWA integration. If there is a good, popular image generator, maybe we could mention it somewhere.)

[alan-agius4]

I also feel that this is outside of the scope of the PWA integration, but let's see what other team members think.

[vikerman]

This is a nice to have addition but we don't have cycles to spend on this. This is a good candidate for community contributions.

[KingDarBoja]

There is some npm library which handles that ngx-pwa-icons. Pretty simple to use but doesn't include favicon.

[samuelfernandez]

I'd like to contribute this. Any up-to-date thoughts on this? To me the ideal would be to integrate https://github.com/itgalaxy/favicons in the builder process.

[alan-agius4]

This is also related to https://github.com/angular/angular-cli/issues/11275

@samuelfernandez, thanks for the interest into taking this.

Possibly https://www.npmjs.com/package/jimp might be a better candidate to generate the icons. It’s actually what https://github.com/itgalaxy/favicons uses under the hood.

[samuelfernandez]

Thanks @alan-agius4 I take note of it. Anything else that should be considered? Something I wonder is why this should be restricted only to PWA. Actually, I could benefit all projects even without PWA. To me this fits better into the build pipeline. Any thoughts? Has this been already considered? Generating the favicons could be a part of the regular build and included in the index.html file. And obviously if using the PWA we could add the rest of the features.

[samuelfernandez]

I have a working builder for this issue, happy to contribute it. I’d need some guidance on where you think it is the best place to put it.

Check my comments here https://github.com/angular/angular-cli/issues/11275#issuecomment-807288798

[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.