PWA iOS icon does not work

Hosting Support
1

frespo.epizy.com

I tried adding meta tags to my index.html to allow for icons for my PWA on iOS, but it doesn’t work.

Here is the relevant code:

<!-- Apple Stuff -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon" href="favicon192.png" />
    <link rel="apple-touch-startup-image" href="favicon192.png" />
    <meta name="apple-mobile-web-app-title" content="Frespo" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="manifest.webmanifest" />

Here’s the manifest:

{
  "short_name": "Frespo",
  "name": "Frespo",
  "icons": [
    {
      "src": "windows10/Square71x71Logo.scale-400.png",
      "sizes": "284x284"
    },
    {
      "src": "windows10/Square71x71Logo.scale-200.png",
      "sizes": "142x142"
    },
    {
      "src": "windows10/Square71x71Logo.scale-100.png",
      "sizes": "71x71"
    },
    {
      "src": "windows10/Square71x71Logo.scale-150.png",
      "sizes": "107x107"
    },
    {
      "src": "windows10/Square71x71Logo.scale-125.png",
      "sizes": "89x89"
    },
    {
      "src": "windows10/Square150x150Logo.scale-400.png",
      "sizes": "600x600"
    },
    {
      "src": "windows10/Square150x150Logo.scale-200.png",
      "sizes": "300x300"
    },
    {
      "src": "windows10/Square150x150Logo.scale-100.png",
      "sizes": "150x150"
    },
    {
      "src": "windows10/Square150x150Logo.scale-150.png",
      "sizes": "225x225"
    },
    {
      "src": "windows10/Square150x150Logo.scale-125.png",
      "sizes": "188x188"
    },
    {
      "src": "windows10/Wide310x150Logo.scale-400.png",
      "sizes": "1240x600"
    },
    {
      "src": "windows10/Wide310x150Logo.scale-200.png",
      "sizes": "620x300"
    },
    {
      "src": "windows10/Wide310x150Logo.scale-100.png",
      "sizes": "310x150"
    },
    {
      "src": "windows10/Wide310x150Logo.scale-150.png",
      "sizes": "465x225"
    },
    {
      "src": "windows10/Wide310x150Logo.scale-125.png",
      "sizes": "388x188"
    },
    {
      "src": "windows10/Square310x310Logo.scale-400.png",
      "sizes": "1240x1240"
    },
    {
      "src": "windows10/Square310x310Logo.scale-200.png",
      "sizes": "620x620"
    },
    {
      "src": "windows10/Square310x310Logo.scale-100.png",
      "sizes": "310x310"
    },
    {
      "src": "windows10/Square310x310Logo.scale-150.png",
      "sizes": "465x465"
    },
    {
      "src": "windows10/Square310x310Logo.scale-125.png",
      "sizes": "388x388"
    },
    {
      "src": "windows10/Square44x44Logo.scale-400.png",
      "sizes": "176x176"
    },
    {
      "src": "windows10/Square44x44Logo.scale-200.png",
      "sizes": "88x88"
    },
    {
      "src": "windows10/Square44x44Logo.scale-100.png",
      "sizes": "44x44"
    },
    {
      "src": "windows10/Square44x44Logo.scale-150.png",
      "sizes": "66x66"
    },
    {
      "src": "windows10/Square44x44Logo.scale-125.png",
      "sizes": "55x55"
    },
    {
      "src": "windows10/Square44x44Logo.targetsize-256.png",
      "sizes": "256x256"
    },
    {
      "src": "windows10/Square44x44Logo.targetsize-48.png",
      "sizes": "48x48"
    },
    {
      "src": "windows10/Square44x44Logo.targetsize-32.png",
      "sizes": "32x32"
    },
    {
      "src": "windows10/Square44x44Logo.targetsize-24.png",
      "sizes": "24x24"
    },
    {
      "src": "windows10/Square44x44Logo.targetsize-16.png",
      "sizes": "16x16"
    },
    {
      "src": "windows10/Square44x44Logo.targetsize-256_altform-unplated.png",
      "sizes": "256x256"
    },
    {
      "src": "windows10/Square44x44Logo.targetsize-48_altform-unplated.png",
      "sizes": "48x48"
    },
    {
      "src": "windows10/Square44x44Logo.targetsize-32_altform-unplated.png",
      "sizes": "32x32"
    },
    {
      "src": "windows10/Square44x44Logo.targetsize-24_altform-unplated.png",
      "sizes": "24x24"
    },
    {
      "src": "windows10/Square44x44Logo.targetsize-16_altform-unplated.png",
      "sizes": "16x16"
    },
    {
      "src": "windows10/StoreLogo.scale-400.png",
      "sizes": "200x200"
    },
    {
      "src": "windows10/StoreLogo.scale-200.png",
      "sizes": "100x100"
    },
    {
      "src": "windows10/StoreLogo.scale-150.png",
      "sizes": "75x75"
    },
    {
      "src": "windows10/StoreLogo.scale-125.png",
      "sizes": "63x63"
    },
    {
      "src": "windows10/StoreLogo.scale-100.png",
      "sizes": "50x50"
    },
    {
      "src": "windows10/StoreLogo.png",
      "sizes": "50x50"
    },
    {
      "src": "windows10/SplashScreen.scale-400.png",
      "sizes": "2480x1200"
    },
    {
      "src": "windows10/SplashScreen.scale-200.png",
      "sizes": "1240x600"
    },
    {
      "src": "windows10/SplashScreen.scale-150.png",
      "sizes": "930x450"
    },
    {
      "src": "windows10/SplashScreen.scale-125.png",
      "sizes": "775x375"
    },
    {
      "src": "windows10/SplashScreen.scale-100.png",
      "sizes": "620x300"
    },
    {
      "src": "windows/windows-smallsquare-24-24.png",
      "sizes": "24x24"
    },
    {
      "src": "windows/windows-smallsquare-30-30.png",
      "sizes": "30x30"
    },
    {
      "src": "windows/windows-smallsquare-42-42.png",
      "sizes": "42x42"
    },
    {
      "src": "windows/windows-smallsquare-54-54.png",
      "sizes": "54x54"
    },
    {
      "src": "windows/windows-splashscreen-1116-540.png",
      "sizes": "1116x540"
    },
    {
      "src": "windows/windows-splashscreen-868-420.png",
      "sizes": "868x420"
    },
    {
      "src": "windows/windows-splashscreen-620-300.png",
      "sizes": "620x300"
    },
    {
      "src": "windows/windows-squarelogo-270-270.png",
      "sizes": "270x270"
    },
    {
      "src": "windows/windows-squarelogo-210-210.png",
      "sizes": "210x210"
    },
    {
      "src": "windows/windows-squarelogo-150-150.png",
      "sizes": "150x150"
    },
    {
      "src": "windows/windows-squarelogo-120-120.png",
      "sizes": "120x120"
    },
    {
      "src": "windows/windows-storelogo-90-90.png",
      "sizes": "90x90"
    },
    {
      "src": "windows/windows-storelogo-70-70.png",
      "sizes": "70x70"
    },
    {
      "src": "windows/windows-storelogo-50-50.png",
      "sizes": "50x50"
    },
    {
      "src": "windows/windowsphone-appicon-106-106.png",
      "sizes": "106x106"
    },
    {
      "src": "windows/windowsphone-appicon-62-62.png",
      "sizes": "62x62"
    },
    {
      "src": "windows/windowsphone-appicon-44-44.png",
      "sizes": "44x44"
    },
    {
      "src": "windows/windowsphone-mediumtile-360-360.png",
      "sizes": "360x360"
    },
    {
      "src": "windows/windowsphone-mediumtile-210-210.png",
      "sizes": "210x210"
    },
    {
      "src": "windows/windowsphone-mediumtile-150-150.png",
      "sizes": "150x150"
    },
    {
      "src": "windows/windowsphone-smalltile-170-170.png",
      "sizes": "170x170"
    },
    {
      "src": "windows/windowsphone-smalltile-99-99.png",
      "sizes": "99x99"
    },
    {
      "src": "windows/windowsphone-smalltile-71-71.png",
      "sizes": "71x71"
    },
    {
      "src": "windows/windowsphone-storelogo-120-120.png",
      "sizes": "120x120"
    },
    {
      "src": "windows/windowsphone-storelogo-70-70.png",
      "sizes": "70x70"
    },
    {
      "src": "windows/windowsphone-storelogo-50-50.png",
      "sizes": "50x50"
    },
    {
      "src": "msteams/msteams-192-192.png",
      "sizes": "192x192"
    },
    {
      "src": "msteams/msteams-silhouette-32-32.png",
      "sizes": "32x32"
    },
    {
      "src": "android/android-launchericon-512-512.png",
      "sizes": "512x512"
    },
    {
      "src": "android/android-launchericon-192-192.png",
      "sizes": "192x192"
    },
    {
      "src": "android/android-launchericon-144-144.png",
      "sizes": "144x144"
    },
    {
      "src": "android/android-launchericon-96-96.png",
      "sizes": "96x96"
    },
    {
      "src": "android/android-launchericon-72-72.png",
      "sizes": "72x72"
    },
    {
      "src": "android/android-launchericon-48-48.png",
      "sizes": "48x48"
    },
    {
      "src": "chrome/chrome-extensionmanagementpage-48-48.png",
      "sizes": "48x48"
    },
    {
      "src": "chrome/chrome-favicon-16-16.png",
      "sizes": "16x16"
    },
    {
      "src": "chrome/chrome-installprocess-128-128.png",
      "sizes": "128x128"
    },
    {
      "src": "firefox/firefox-marketplace-512-512.png",
      "sizes": "512x512"
    },
    {
      "src": "firefox/firefox-marketplace-128-128.png",
      "sizes": "128x128"
    },
    {
      "src": "firefox/firefox-general-256-256.png",
      "sizes": "256x256"
    },
    {
      "src": "firefox/firefox-general-128-128.png",
      "sizes": "128x128"
    },
    {
      "src": "firefox/firefox-general-90-90.png",
      "sizes": "90x90"
    },
    {
      "src": "firefox/firefox-general-64-64.png",
      "sizes": "64x64"
    },
    {
      "src": "firefox/firefox-general-48-48.png",
      "sizes": "48x48"
    },
    {
      "src": "firefox/firefox-general-32-32.png",
      "sizes": "32x32"
    },
    {
      "src": "firefox/firefox-general-16-16.png",
      "sizes": "16x16"
    }
  ],
  "start_url": "/home",
  "display": "standalone",
  "theme_color": "#e6e6ff",
  "background_color": "#e6e6ff"
}

None of the meta tags work when booting up the PWA. Is there anything I missed?

2

your icon is transparent (favicon192.png, apple-touch-icon.png)

but other than that it is possible that something is going on with that rewrite
which you have for the URL

besides, it would be advisable to use HTTPS (SSL cert) when you have PWA

3

You have an error in your manifest file:
image

Here is a working example from my website:

{
    "name": "",
    "short_name": "",
    "theme_color": "#121212",
    "background_color": "#212121",
    "display": "standalone",
    "scope": "/",
    "start_url": "",
    "description": "",
    "orientation": "any",
    "icons": [
        {
            "src": "",
            "sizes": "452x452"
        }
    ]
}

EDIT: After looking at the console, Chrome is having issues fetching your manifest file.

4

as far as I know iOS does not read the manifest nor are these icons defined in the manifest
instead it looks at what is defined in “meta”

https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8

2 Likes
5

Sometimes, you need to make the icon the exact size specified.
Otherwise, your icon will get letterboxed.

Edit/resize your icon so it fits the exact size.
Here is a helpful online tool which helped me while making my PWA:
https://resizeimage.net

Make sure you are specifying an apple-touch-icon and sizes attribute

6

Found the solution. The problem was that the href was to an image hosted by my website, and since the whole “this website cant be an API” thing the image didn’t get sent. I just hosted the image on a separate provider and everything got fixed

1 Like
7

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.