One of the biggest problems with web apps is that as they need to be opened within the default browser, the browser's address bar and the next, previous, and bookmark buttons show up, giving the users a bad user experience.
Thankfully, we can make our app run in a fullscreen mode, but for this, the user needs to add the app to the home screen.
When the user adds the app to the home screen, it's important that we have an icon associated with it so that the users can easily identify the application.
This is where the touch icon comes into play.
We first need to create a touch icon for iOS devices using a graphic designing tool such as Photoshop or Gimp. As the iOS devices have different screen sizes and resolutions, we need to create a different icon for each size as per the following table.
All icons need to be saved in the PNG format; their sizes are given in the following table:
|
Device |
Touch Icon Size |
|---|---|
|
iPhone |
60 px x 60 px |
|
iPhone Retina... |