Vue-cli: Generate PWA icons from src/assets/icon.png

Created on 22 Jul 2018 · 10Comments · Source: vuejs/vue-cli

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

Source

Kocal

👍1

Most helpful comment

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

jcalixte on 15 May 2020

❤4

All 10 comments

I think this should be a plugin.

pksunkara on 22 Jul 2018

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?

Kocal on 23 Jul 2018

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.

yyx990803 on 23 Jul 2018

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?

LukasBombach on 13 Aug 2018

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 :smile:

Kocal on 13 Aug 2018

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.

memic84 on 3 Sep 2018

👍3

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

dev117uday on 7 Apr 2020

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.

iAlexanderMoon on 2 May 2020

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

jcalixte on 15 May 2020

❤4

@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: https://github.com/jcalixte/vue-pwa-asset-generator/issues/1