Open atjn opened 7 months ago
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.
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.
- The web app manifest should specify
purpose: "any"
on images that are notmaskable
.
There is no need since any
is the default value: https://developer.mozilla.org/en-US/docs/Web/Manifest/icons
- IMO you don't need an
ico
file in theminimal-2023
preset when you can serve apng
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
- 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.
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.
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.
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.
You can contribute adding more presets here if existing ones don't meet your needs, PR welcome.
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.
purpose: "any"
on images that are notmaskable
.monochrome
icons for the web app manifest.maskable
icons, you should be able to choose which background color is used (currently it is white). Apparently possible, but not documented.ico
file in theminimal-2023
preset when you can serve apng
file instead. It is very well supported.any
,maskable
, andmonochrome
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.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.