I'm curious about the new app icon options (any, dark, tinted) for Progressive Web Apps in iOS / iPadOS 18.
Has this feature been implemented yet? If so, could someone point me to the specific documentation?
I've searched the Apple Developer Forums, Google, and Reddit but couldn't find any relevant information.
Thanks!
Commenting as I also would like to know this.
We have a lot of customers using PWAs and Web Clips for their content and would like them to have the ability to customise the icon using the new options in iOS 18. Cheers.
Commenting for the same reason. I really hope there will be a way to define the dark icon for my PWAs.
Same here! I develop several PWAs that look out of the row now in dark and tinted mode.
Only solution I see for now, is to make icon background transparent. It's change background's color to black when in dark mode
I have one Pwa installed and it seems to be working automatically - at least at some points. Setting appearance to automatic (and iOS dark mode on) shows a automatically generated dark mode version of the icon in notifications and in settings. The home screen icon stays light though. Tinted appearance is working on the home screen, but then the notification icon stays in light mode, regardless of the iOS dark / light mode setting. Settings icon is working fine though, so automatically switches between dark and light. Tested on iOS 18.0 stable, iPhone 13.
Same here, as a developer, seems PWA’s don’t automagically change their tint. But what to do, to feature this? Manifest file maybe?
This is how I implemented it, you’ll need to remove the current icon code then put the paths to the new ones in this JS. (I designed a separate dark mode icon then paired with this JavaScript):
function isDarkMode() { return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; } let elem = document.createElement('link'); elem.rel = 'apple-touch-icon'; elem.href = isDarkMode() ? '/splash_screens/icon-dark.png' : '/splash_screens/icon.png'; document.head.appendChild(elem);
The only downside is that it doesn’t update if the user switches icons to light, they would need to reinstall the PWA.
Right now my icon changes following the tint or dark theme, but not how it should. I don't know if itms my icon that's incompatible, but it should automatically remove the background and make it black, and enhance the logo. it just doesn't work.