For my PWA app, I am using the manifest to define the app icons to use for app installation. However, for iOS/ Safari, this is not working (<version 15, according to this page: https://firt.dev/notes/pwa-ios/)
So I have implemented the apple-touch-icons on the index.html head, as suggested in different posts.
I have tried using apple-touch-icon as the rel-attribute's value and also apple-touch-startup-image. However, none of it makes my Safari on 13.1.3 iOS accept the images for the PWA installation (after deleting Safari's cache).
<link href=icons/apple-icon-120x120.png id=apple-icon-120x120.png rel=apple-touch-icon sizes=120x120 type=image/png>
<link href=icons/apple-icon-152x152.png id=apple-icon-152x152.png rel=apple-touch-icon sizes=152x152 type=image/png>
<link href=icons/apple-icon-167x167.png id=apple-icon-167x167.png rel=apple-touch-icon sizes=167x167 type=image/png>
<link href=icons/apple-icon-180x180.png id=apple-icon-180x180.png rel=apple-touch-icon sizes=180x180 type=image/png>
<link href=icons/apple-launch-828x1792.png id=apple-launch-828x1792.png rel=apple-touch-icon sizes=828x1792 type=image/png>
<link href=icons/apple-launch-750x1334.png id=apple-launch-750x1334.png rel=apple-touch-icon sizes=750x1334 type=image/png>
<link href=icons/apple-launch-1668x2388.png id=apple-launch-1668x2388.png rel=apple-touch-icon sizes=1668x2388 type=image/png>
<link href=icons/apple-launch-1620x2160.png id=apple-launch-1620x2160.png rel=apple-touch-icon sizes=1620x2160 type=image/png>
<link href=icons/apple-launch-1284x2778.png id=apple-launch-1284x2778.png rel=apple-touch-icon sizes=1284x2778 type=image/png>
<link href=icons/apple-launch-1242x2688.png id=apple-launch-1242x2688.png rel=apple-touch-icon sizes=1242x2688 type=image/png>
<link href=icons/apple-launch-1242x2208.png id=apple-launch-1242x2208.png rel=apple-touch-icon sizes=1242x2208 type=image/png>
<link href=icons/apple-launch-1170x2532.png id=apple-launch-1170x2532.png rel=apple-touch-icon sizes=1170x2532 type=image/png>
<link href=icons/apple-launch-640x1136.png id=apple-launch-640x1136.png rel=apple-touch-icon sizes=750x1334 type=image/png>
<link href=icons/apple-launch-750x1294.png id=apple-launch-750x1294.png rel=apple-touch-icon sizes=750x1334 type=image/png>
<link href=icons/apple-launch-1242x2148.png id=apple-launch-1242x2148.png rel=apple-touch-icon sizes=1242x2208 type=image/png>
<link href=icons/apple-launch-1125x2436.png id=apple-launch-1125x2436.png rel=apple-touch-icon sizes=1125x2436 type=image/png>
<link href=icons/apple-launch-1536x2048.png id=apple-launch-1536x2048.png rel=apple-touch-icon sizes=1536x2048 type=image/png>
<link href=icons/apple-launch-1668x2224.png id=apple-launch-1668x2224.png rel=apple-touch-icon sizes=1668x2224 type=image/png>
<link href=icons/apple-launch-2048x2732.png id=apple-launch-2048x2732.png rel=apple-touch-icon sizes=2048x2732 type=image/png>
I have also tried to only add a single apple-touch-icon but without success.
Are there any other parameters that I have to implement?
I could make this work by using absolute urls for my icons and make those available without authentication restriction, as mentioned in other posts.
My issue probably was not with the syntax but that I was trying to make the application proxying to the images on the backend. Giving the direct url now works.