"Add to home screen" icon in iPhone

Hello

We have ionic PWA. In android when we click “add to home screen” button it uses the custom icon from Manifest.json. But, In iPhone, safari takes the screen shot of the page when we hit “add to home screen” button and use as icon. Can’t we use custom icon in iPhone just like android ?

I have an Ionic 3 PWA.

The index.html:

<!doctype html>
<html lang="en" dir="ltr">

<head>

  ...

  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- Home Screen Icons -->
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-iphone.png" type="image/png">
  ...
  <link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">

  <!-- iOS Startup Images -->
  <link rel="apple-touch-startup-image"  href="iphone5_splash.png"
        media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
  <link rel="apple-touch-startup-image" href="iphone6_splash.png"
        media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" />
  <link rel="apple-touch-startup-image" href="iphoneplus_splash.png"
        media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" />
  <link rel="apple-touch-startup-image" href="iphonex_splash.png"
        media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" />
  <link rel="apple-touch-startup-image" href="ipad_splash.png"
        media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" />
  <link rel="apple-touch-startup-image" href="ipadpro1_splash.png"
        media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" />
  <link rel="apple-touch-startup-image" href="ipadpro2_splash.png"
        media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" />
  ...

</head>

iOS - Add to Home Screen (step 1):

iOS - Add to Home Screen (step 2):

Ref:

1 Like

You need to include a few more tags in the index.html file to override the snapshot when adding to the home screen for iOS.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<link href="/apple_splash_2048.png" sizes="2048x2732" rel="apple-touch-startup-image" />
<link href="/apple_splash_1668.png" sizes="1668x2224" rel="apple-touch-startup-image" />
<link href="/apple_splash_1536.png" sizes="1536x2048" rel="apple-touch-startup-image" />
<link href="/apple_splash_1125.png" sizes="1125x2436" rel="apple-touch-startup-image" />
<link href="/apple_splash_1242.png" sizes="1242x2208" rel="apple-touch-startup-image" />
<link href="/apple_splash_750.png" sizes="750x1334" rel="apple-touch-startup-image" />
<link href="/apple_splash_640.png" sizes="640x1136" rel="apple-touch-startup-image" />