Suggestions for improvement

[atjn]

Hello and thank you for working on this!

I tried to use it in my webapp and decided that it was too limited for my use case, but I would like to mention my issues for you in case it can help you improve the package :)

This is just a quick write down. If I have misunderstood something, or you don't agree with it, feel free to ignore it. Also feel free to close this issue whenever you want.

• The web app manifest should also link to the original SVG. The SVG is the best logo to use if the client supports SVG.
• The original SVG logo should be minified using something like SVGO.
• The web app manifest should specify purpose: "any" on images that are not maskable .
• The package should be able to generate monochrome icons for the web app manifest.
• When generating maskable icons, you should be able to choose which background color is used (currently it is white). Apparently possible, but not documented.
• IMO you don't need an ico file in the minimal-2023 preset when you can serve a png file instead. It is very well supported.
• You should be able to specify different icons for the any, maskable, and monochrome purposes. If you want your icon to look really well, you sometimes need to change it in a way that is incompatible with the other purposes.
• The package should be integrated better with Vite. I don't want to manually add the manifest and HTML tags, I want it to either be completely automatic, or be implemented as virtual modules that return html which I can insert in the code. (being solved in #feat: add experimental PWA assets generation and injection vite-plugin-pwa#621)
• I don't want the generated images to be pasted into the same folder as the original logo. That folder is for source files, anything that is generated should be in a temporary folder, or should only be in the final build output. (being solved in #feat: add experimental PWA assets generation and injection vite-plugin-pwa#621)
• Consider adding a minimal-standard preset. I think Apple's approach to logos is really bad, they shouldn't need custom images when they can just read the images in the manifest. I would prefer a preset that does not have any images or tags which are custom designed only for a single company or device.
• Generated icons have jagged edges #35

[userquin]

This package is not a bundler, the images should be in the same place, you generate the images once. You can move the generated images where you want using releative paths in the config file (iirc there is some issue about this).

The package exposes an api, you can use it if you want some advance features.

The cli is very limited but you can use a custom conf file and include all icons you want, including monochrome and custom bg color.

You can also create a custom preset and use it via config file.

There is a PR in pwa plugin repo for pwa assets generation, check the pr page there.

Read the assets generation entry in the pwa docs, there are some hints for your questions.

[atjn]

The cli is very limited but you can use a custom conf file and include all icons you want, including monochrome and custom bg color.
You can also create a custom preset and use it via config file.
Read the assets generation entry in the pwa docs, there are some hints for your questions.

I was using the config file and I read through all the documentation I could find, and did not find anything about monochrome icons and custom background colors. Maybe some more comprehensive documentation would have helped here.

Searching through the docs again, I see that you mention once that background color can be customized, but I cannot find any documentation on how to do it.

[userquin]

• The web app manifest should specify purpose: "any" on images that are not maskable .

There is no need since any is the default value: https://developer.mozilla.org/en-US/docs/Web/Manifest/icons

[userquin]

• IMO you don't need an ico file in the minimal-2023 preset when you can serve a png file instead. It is very well supported.

You don't need png files, using an svg should work in any modern browser: check https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7

[userquin]

• The web app manifest should also link to the original SVG. The SVG is the best logo to use if the client supports SVG.

Why? Not all browsers support SVG.

[atjn]

IMO you don't need an ico file in the minimal-2023 preset when you can serve a png file instead. It is very well supported.

You don't need png files, using an svg should work in any modern browser: check https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7

According to your article, Safari does not support SVG, but does support ICO, and therefore you should use ICO. All I am saying is that I would have used PNG instead of ICO, since PNG is also supported by Safari, and I think it is a much simpler and more modern format to use.

So right now you are adding both an SVG and an ICO file, but I am suggesting to instead add an SVG and a PNG file.

[userquin]

You can add the favicon you want since this package will not add anything to your html pages, you can generate any png image with any resolution and add the corresponding link to the html head (the CLI should log the corresponding head entry, maybe requires some review in the html module for sizes).

Anyway, the browser will just download the ico or the svg not both, whatever favicon format it supports.

[atjn]

The web app manifest should also link to the original SVG. The SVG is the best logo to use if the client supports SVG.

Why? Not all browsers support SVG.

SVG files are typically much smaller compared to PNG files, so browsers can use less data to get the icon. This is especially true if it needs to download several different PNG sizes.

SVG files also allow the browser to display the logo exactly as it was intended, whereas trying to resize a PNG to a specific size will always result in some amount of blurring. The usual way to deal with this is to download PNGs that are much larger than needed and downsize them. This minimises the blurring effect but means you have to download much more data than necessary.

I know that not all browsers support SVG images, which is why the web app manifest has PNGs. I am just saying that you should have both SVG and PNG, so that browsers can choose to use the SVG if they support it.

[userquin]

You can contribute adding more presets here if existing ones don't meet your needs, PR welcome.

[Joao620]

When generating maskable icons, you should be able to choose which background color is used (currently it is white). Apparently possible, but not documented

Sharing how I was able to do that! This was hinted on #20 (comment) at 2.2, but the lack of an example let me more confused

//pwa-assets.config.ts
export default defineConfig({
    headLinkOptions: {
        preset: '2023',
    },
    preset: {
        ...preset,
        maskable: {
            sizes: [512],
            padding: 0.3,
            resizeOptions: {
                background: "#00113c"
            }
        }
    },
    images: ['public/myFavicon.jpg'],
    overrideAssets: false
})