React & iOS app icons

By May 29, 2019Uncategorized

Photo by Yoann Boyer on Unsplash

Safari on iOS allows a web page to be saved to the home screen so that it can be launched like an app. This feature can be accessed for any page in Safari by launching the share extension:

Typically, iOS will take a screen shot of the web page being added to the home screen, and use that as the app launch icon, but you can provide customer icons as part of your web page which iOS will use instead. That way, web apps have a launch icon like any other app. And, when saved to the home screen, iOS launches web apps in a containers, and not in safari, so they look more like native apps.

To provide the icons in a React app (note: this is for normal react apps, not necessarily for Next or Gadsby etc)

  • add the icons you wish to use to your apps public folder.
  • provide different sized icons, to suit different devices
    • 57 x 57 px
    • 72 x 72 px
    • 114 x 14 px
    • 144 x 14 4px
  • add these icons to your index.html page
  <link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/apple-icon-57x57px.png">
  <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/apple-icon-72x72px.png">
  <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/apple-icon-114x114px.png">
  <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/apple-icon-144x144px.png">

With these icons in place, when you save a web app to the home screen, iOS will select one of these icons for you.