Generate PWA icons from src/assets/icon.png

[Kocal]

What problem does this feature solve?

It would be a cool feature to automatically generate PWA icons (android-chrome-192x192.png, apple-touch-icon-180x180.png, ...) by using src/assets/logo.png as source.

What does the proposed API look like?

I'm not familiar with the current API, but I would be nice to have something like:

• generate PWA icons at each build (and watch source icon during serve)
• or generate PWA icons with a dedicated task

[pksunkara]

I think this should be a plugin.

[Kocal]

It's the PWA plugin that inject those icons into index.html, do we really need an other plugin for that?
Is it possible to have a plugin that depends of another one?

[yyx990803]

There's no guarantee that the user have an icon in there, and it may not be large enough. I think this is marginally useful and shouldn't be a responsibility of the CLI.

[LukasBombach]

Hey there!

We are currently rebuilding one of Europe's biggest news websites with………… drumroll… VUE and the VUE cli. Of course we want to make use of PWA capabilities and are currently figuring out how to properly generate PWA icons and other touch icons.

We were expecting that this could be part of the official PWA plugin, kind of as a toolbox for PWAs. If this is not how you'd design this plugin, how would you suggest to generate PWA and other touch icons with the VUE CLI?

[Kocal]

how would you suggest to generate PWA and other touch icons with the VUE CLI?

Two possibilities are:

• Update @vue/cli-plugin-pwa code
• Create a new plugin 😄

[memic84]

Nuxt already uses an icon module to generate pwa icons, see: https://github.com/nuxt-community/pwa-module/tree/develop/packages/icon, maybe this can be made into a universal Vue plugin.

Seems to me that cli should not be responsible for icon generation, if workbox decides to do so than fine.

[dev117uday]

I recently came across the same problem, so i create a small python script to generate icons.

[Github] https://github.com/dev117uday/learning_python/blob/master/scripts/Vuejs%20PWA%20icon%20generator.ipynb

it's not perfect, you have to do this manually, but i hope it will help any one in the future.
remember to create a folder called 'icons' where all the auto generate icons will be stored

[iAlexanderMoon]

Imagemagick commands to generate the named icon images:

For best results... logo.png should be square, a minimum of 228x228 with a transparent background.

convert logo.png -resize '192x192' android-chrome-192x192.png
convert logo.png -resize '512x512' android-chrome-512x512.png
convert logo.png -resize '154x154' -gravity center -background transparent -extent 192x192 android-chrome-maskable-192x192.png
convert logo.png -resize '410x410' -gravity center -background transparent -extent 512x512 android-chrome-maskable-512x512.png
convert logo.png -resize '180x180' -background white apple-touch-icon.png
convert logo.png -resize '60x60' -background white apple-touch-icon-60x60.png
convert logo.png -resize '76x76' -background white apple-touch-icon-76x76.png
convert logo.png -resize '120x120' -background white apple-touch-icon-120x120.png
convert logo.png -resize '180x180' -background white apple-touch-icon-180x180.png
convert logo.png -resize '152x152' -background white apple-touch-icon-152x152.png
convert logo.png -resize '16x16' favicon-16x16.png
convert logo.png -resize '32x32' favicon-32x32.png
convert logo.png -resize '144x144' msapplication-icon-144x144.png
convert logo.png -resize '150x150' -background transparent -compose Copy -gravity center -extent 270x270 mstile-150x150.png 
convert logo.png -resize '512x512' safari-pinned-tab.svg

When I looked at the mstile-150x150.png the inner logo wasn't centered... I never did figure that out as it wasn't that important to me.

[jcalixte]

Hi! I created a generator too with sharp. Here is the package, tell me if this generator suits your need.

[dtgay]

@jcalixte Awesome! Your generator worked well for me, except the output didn't include three files I was expecting – icons which are generated by Vue CLI for a PWA.

I opened a feature request here: jcalixte/vue-pwa-asset-generator#1