iOS 11.3中PWA图标未生效问题及配置详情

Hey there, I’ve dealt with this exact problem when testing PWAs on iOS 11.3—let me share the solutions that worked for me:

1. Add apple-touch-icon Meta Tags #

iOS 11.3 has limited support for manifest-based icons; it still relies heavily on the traditional Apple-specific meta tags for home screen icons. Even with a properly configured manifest, you’ll need to add these to your HTML head:

<link rel="apple-touch-icon" sizes="180x180" href="/Maplat/pwa/icon-180.png">
<link rel="apple-touch-icon" sizes="120x120" href="/Maplat/pwa/icon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/Maplat/pwa/icon-76.png">
<link rel="apple-touch-icon" sizes="60x60" href="/Maplat/pwa/icon-60.png">

• Make sure the href paths match the location of your icon files (same as your manifest’s icon paths).
• The 180x180 size is critical for modern iPhones, while the others cover older devices and iPads.

2. Complete Your Manifest’s start_url #

Your manifest snippet shows start_url: ...—this field must be a valid, complete path (absolute or fully qualified relative path). For example:

"start_url": "/Maplat/?standalone=true"

iOS requires a valid start URL to properly associate the icon with your PWA; an incomplete value can break icon rendering.

3. Verify Icon Files and Sizes #

• Ensure all icon files are PNG format (iOS is strict about this for home screen icons).
• Double-check that each icon’s actual pixel dimensions exactly match the sizes value in your manifest (e.g., the 96x96 icon is truly 96px x 96px). Mismatched sizes can cause iOS to ignore the icon.

4. Clear Cache and Reinstall the PWA #

iOS 11.3 Safari tends to cache old icon assets aggressively. Follow these steps to test cleanly:

• Go to Safari Settings > Clear History and Website Data.
• Delete any existing version of your PWA from the home screen.
• Reopen your PWA in Safari, then tap the share button > "Add to Home Screen".

Why This Works #

iOS 11.3 was Apple’s first version to support PWAs, but the implementation was partial. It prioritizes apple-touch-icon tags over manifest icons, so even with a perfect manifest, those meta tags are non-negotiable for icon display.

Give these steps a shot—adding the Apple-specific meta tags is almost always the fix for this issue on iOS 11.3. Let me know if you still hit snags after testing!

内容的提问来源于stack exchange，提问作者kochizufan