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:

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:

Open Safari on your iOS device
Go to the desired website
Click on the share button
Click on 'Add to Home Screen'

Note

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

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.

Note

More articles