Add an icon of a website on iOS

Add icon of a website on iOS

If you want to add an icon of a website linking to its home page, you need to add the following HTML line in between <head></head> of index.html:

<link rel = "apple-touch-icon" href = "%PUBLIC_URL%/ios-icon.png">

As the maximum supported size of an icon on iOS is 180 x 180 px, I recommend you to create a file of this size and iOS will resize the icon depending on the device.

Process to add the icon:

  1. Open Safari on your iOS device
  2. Go to the desired website
  3. Click on the share button
  4. Click on 'Add to Home Screen'


The icon will use by default the name (name) and URL (start_url) defined at manifest.json:

    "short_name": "Erik Martín Jordán",
    "name": "Erik Martín Jordán",
    "icons": [
          "src": "favicon.ico",
          "sizes": "64x64 32x32 24x24 16x16",
          "type": "image/x-icon"
    "start_url": "./", 
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"

Feel free to modify these parameters.

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.