elk-zone
Add platform dependent PWA icons
Clear and concise description of the problem
Installing the PWA on desktop platforms that don’t mask the icon (macOS, Linux), the app looks wrong in the app launcher. Providing platform dependent icons, or at least a pre-masked variant, would make for a nicer integration, which for an app with as much of a design-focus as Elk would certainly provide the cherry on top.
Suggested solution
Adding a pre-masked variant of the icon would simply require specifying the current ones as maskable: true in the manifest and adding the new ones as separate entries here.
Unfortunately, this will cause the icon to appear too big on macOS or too small on other platforms, since macOS icons don’t actually fill the entire available space. That’s why Telegram Web, for example, provides a separate manifest for macOS users which comes with an icon that matches the macOS desktop icon guidelines.
I believe this could be implemented similarly to how light / dark theme and i18n are currently handled in the manifests.
Alternative
No response
Additional context
No response
![bolt-new-by-stackblitz[bot] avatar](https://avatars.githubusercontent.com/in/182710?v=4 "Published by a pub.dev verified publisher"){kind=small}
where are you looking for pwa icons? That was fixed a few months ago, check public and public-staging folder (elk.zone and main.elk.zone respectivelly), there's a maskable icon (maskable-icon.png) and the pwa manifest icons properly configured: https://github.com/elk-zone/elk/blob/main/modules/pwa/i18n.ts#L80-L103
While there is a maskable icon now, the original issue has not been fixed: the provided icons don’t match platform specifics, see how the Elk icon doesn’t fit in in this screenshot:
Meanwhile, the Telegram icon (also an installed PWA) matches the rest of the icons perfectly, since it delivers platform sepecific icons via platform-specific manifests.
👀 no maskable icon in Telegram, maybe iOS/macOS picking Elk pwa icon with purpose any? We did some tests in the iOS emulator and seems to be fine...
@amxmln can you shared the apple-touch-icon in the html and the site.webmanifest icons (macOS: I have not my macOS laptop)?
This is the GitHub repo of the Telegram Web client I’m referring to: https://github.com/morethanwords/tweb
Here are the assets, see how there’s a specific icon (icon_square) that’s then referenced in the manifest specific for Apple: https://github.com/morethanwords/tweb/tree/master/public/assets/img
Is this what you mean? I believe they’re using some form of user-agent sniffing to choose which of the two manifests to serve, I believe Elk is doing something similar for i18n?
Quick update: it seems like Chrome 118 on macOS is either using the maskable icon or doing something to the precomposited one, because the icon now is masked correctly and doesn’t appear too big.
I can’t confirm right now if this is the case on Linux as well, so I’ll leave this open for the time being.