Website icon is blank when saved to iPhone Home Screen
Symptom Adding a site to the Home Screen produces a generic gray icon or a tiny page screenshot instead of the real icon; the browser-tab favicon looks fine.
The favicon rendered perfectly in the desktop and mobile browser tab, but “Add to Home Screen” on iOS produced a blank/gray icon (or a shrunken screenshot of the page) instead of the app icon. Classic, and almost always the same cause.
Root cause
iOS does not render an SVG apple-touch-icon. A modern setup often ships only:
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />…and then, as a “thinner” head, points the Apple touch icon at the same SVG:
<!-- BROKEN on iOS — silently ignored -->
<link rel="apple-touch-icon" href="/favicon.svg" />Safari/iOS quietly ignores the SVG and falls back to a generated icon (a page screenshot or a gray tile). There’s no error — it just looks broken.
The fix
Serve a 180×180 PNG specifically for the Apple touch icon:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />Generate the PNG from your source icon (any rasterizer — sharp, ImageMagick, or an icon-generator script), drop it at the site root as /apple-touch-icon.png, and remove the SVG-based apple-touch-icon line. Re-add the site to the Home Screen and the real icon appears.
While you’re in the <head>
If the iOS icon was wrong, the rest of the icon/PWA set is often incomplete too. A complete set is:
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />…plus icon-192.png and icon-512.png referenced from the web manifest for Android/PWA installs. The SVG favicon covers the browser tab; the 180×180 PNG covers iOS; the manifest + PNGs cover Android. Skipping the PNG is the one that bites, because it’s invisible until someone actually adds the site to their phone.