ryot PWA Icon File

After a decent amount of research it appears the following conditions determine the PWA icon.

Browser
OS
Version of the OS
Launcher
Dark Mode / Lite Mode
User Preferences

For example. OS: Android 14 Launcher: One UI 6.1 Browser: Firefox

This combination respects the manifest files "background_color": "#fd7e14" line and makes the pwa icon look like this regardless of darkmode settings.

This occurs by pulling a copy of icon-256x256.png

Whereas:

OS: Android 14 Launcher: One UI 6.1 Browser: Chrome Dark Mode: Yes

This occurs by pulling android-chrome-{insert size here} this does allow us to use an SVG to handle a darkmode switch but it can be a bit tricky to get that right.

Another example: OS: Android 14 Launcher: One UI 6.1 Browser: Builtin Samsung Browser Dark Mode: Yes

This one is different from the others in that it completely ignores the android manifest files and will instead search for apple-touch-icon.png and places it on a white background. This is a problem because apple places these images on a black background so one of them will be broken.

Proposal

After checking what some other projects have done to address this problem most of them like mealie appear to change the logo to not use black or white in the logo rather using another color since it will work regardless of the OS and browser. Maybe we should consider switching to another color like the background_color as the logo color.

Like so: ryot-icon