Use custom icon for PWA / mobile home screen tile icon

[dimatx]

Description

Using v0.11.3 and finding that although I have changed my icon in Homarr, the one that is being used for PWA/home screen tile is the default Homarr icon.

Renders fine in browser favicon:

Windows

Android

but still places Homarr icon when PWA is created:

Microsoft Edge on Windows
Step 1

Step 2

Google Chrome on Android

Priority

Low (Nice-to-have)

[ajnart]

I don't think this is possible, the PWA is created at build time and cannot read the user settings. You could always replace the default homarr logo with a bind mount in docker

[dimatx]

This works well with another dashboard I use, Homer. I believe it's an implementation that makes this work / not work.

[manuel-rw]

Hi, thanks for the issue.
I think we might be able to make this work.
Currently, we use this file for the PWA: https://github.com/ajnart/homarr/blob/dev/public/site.webmanifest

I think we have two options:

• Instead of using the pre-generated maskable images, we'll just use a default path (eg. /imgs/pwa or /imgs/logo/logo.png)
• Generate the manifest file using the NextJS response API. We should be able to create one dynamically from the request. If there is a cookie for the config, we'll just return the icons from that config. If not, we'll just return the default Homarr icon.

I am not sure though how this will affect PWA Apps (eg. Safari, Chrome, ...). Perhaps they do caching and it will take some time to update?

[dimatx]

Thank you! Good question about the PWA... Yes, I do believe you're right that there's some form of caching, and from my experience that cache is quite long. I would think that most users don't change their icon very often, and it would be acceptable to re-create the PWA on mobile/desktop after an icon change. So from my perspective, as long as the 'right' icon is provided at the creation of the PWA, this would satisfy my use case.

This may be a useful reference for favicon/pwa icon stuff -- https://realfavicongenerator.net/ -- , as it seems like it is (or used to be) somewhat inconsistent across platforms/browsers.

[markesss]

Another approach that could be taken would be to set the manifest file on a per board basis, and store the manifest's url in the board configuration and fallback to the default manifest public/site.webmanifest when not set.

I've just been having a bit a of a play with this approach here -> https://github.com/markesss/homarr/tree/pwa-mobile-669.

Though, the favicon field would still need to be set for the iOS App (via shortcut link, or apple-touch-icon), testing with my iOS devices confirmed this as well

[Meierschlumpf]

Can you test if this is still an issue with 1.0 and open a new issue there if so?