homarr icon indicating copy to clipboard operation
homarr copied to clipboard

Published 20 hours ago • verified publisher icon ajnart

Use custom icon for PWA / mobile home screen tile icon

Open dimatx opened this issue 2 years ago • 5 comments

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 image

Android image

but still places Homarr icon when PWA is created:

Microsoft Edge on Windows Step 1 image Step 2 image

Google Chrome on Android image

Priority

Low (Nice-to-have)

dimatx avatar Jan 30 '23 23:01 dimatx

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

ajnart avatar Jan 31 '23 03:01 ajnart

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

dimatx avatar Jan 31 '23 16:01 dimatx

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?

manuel-rw avatar Jan 31 '23 16:01 manuel-rw

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.

dimatx avatar Jan 31 '23 19:01 dimatx

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

markesss avatar Jan 02 '24 05:01 markesss