search

karlhorky / pwa-tricks

A collection of useful tricks for PWAs (Progressive Web Apps)
153 stars 4 forks source link

Suggestion: Add section about overriding icons #4

Open teohhanhui opened 3 months ago

teohhanhui commented 3 months ago

To provide your own icons, use data URIs. Trying to override non-existent paths does not work (it will not pass the installability check). Serving files from localhost or another origin would not work well either, as it is very likely to be blocked by CSP.

karlhorky commented 3 months ago

Interesting, I haven't looked at this yet - what is your recommendation for a method to override an icon? Data URIs? Or using a Chrome Local Override?

What I have done on macOS for PWAs is to right-click -> Get Info on the app created by Chrome and then drag a new .icns icon file over the existing icon, which replaces it.

But I'm not sure if that always works for every use case and unsure how to do this for Windows and Linux.

teohhanhui commented 3 months ago

Sure, you can replace the desktop icons after the fact, but it's quite a bit of hassle, and you wouldn't be able to install the app in the first place if your app manifest fails the installability check (it's mandatory to have an icon of at least 144x144). Local override doesn't seem to work for replacing app manifest icons. Data URIs directly in the "src" property of each icon entry works.

For Linux, Chrome / Chromium would install the icons to e.g. ~/.local/share/icons/hicolor/128x128/apps/chrome-bbdeiblfgdokhlblpgeaokenkfknecgl-Default.png (repeat for different sizes), so they can just be replaced there. (Also beware, if you have existing icons for the same app, Chrome / Chromium would even follow symlinks to replace the file - I think it's a bug.)

karlhorky commented 3 months ago

Nice, sounds like a good trick to add!

Want to try doing a PR for adding an icon via a data URI?

I'm assuming that you'll be able to copy+paste some of the content from the other tricks :)