App Icons on Safari
Explore how to configure app touch icons and splash screens for Progressive Web Apps on iOS Safari. Understand the specific requirements and challenges for different device resolutions, and learn methods to enhance your PWA's visual presentation for Apple devices. Gain insight into ensuring a polished, consistent experience despite Safari's current PWA limitations.
We'll cover the following...
App touch icon
In iOS Safari, it is possible to add any webpage to the home screen without needing to use a PWA. However, PWAs are typically the apps that further benefit users once added to the home screen. Therefore, we should ensure that PWAs look good also on Apple devices.
Let’s see in practice what this means.
The icon on the left is a website without an apple-touch icon defined, while on the right side, it has been declared correctly. You can see how the final effect looks much more precise and conceives a higher quality experience.
App touch icon setup
To define a touch ...