安卓加到桌面正常,iPhone 添加到主屏幕是一个灰白方块,图标区域全白,控制台没有任何报错,manifest 里 icons 只写了一条 512x512。乍看像缓存或者权限的锅,追下去往往不是。

<link rel="apple-touch-icon" sizes="180x180"
      href="/img/apple-touch-icon.png">

追下去是这么回事:iOS 不读 manifest 的 icons,只认 apple-touch-icon 这条 link,没写就只能留白或者截屏。尺寸也要 180x180,给别的尺寸会被拉伸处理。

「apple-touch-icon」这类改动最怕改一半,回滚脚本先准备好,再动生产。一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。

先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。别只看报错的最后一行,往上看几行,真正的起因通常在上面。

同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。

具体做法是,单独输出一条 apple-touch-icon 指向 180x180 的 PNG;图片不要透明背景 iOS 会把透明区域填成黑色;再补 192 和 512 两条给安卓的 manifest;真机添加到主屏确认没有白边。

验收就看一点,iPhone 主屏上的图标是完整 logo 没有白块也没有黑边。

作者 9823189