Apple Touch 图标透明背景：修复 iOS 上的白色方块

你精心准备了一张带透明背景的 PNG 图片作为 Apple Touch Icon。在电脑上看，它清晰锐利。但当你把它添加到 iPhone 主屏幕时，Safari 却给你的图标加了一个白色方块，就像贴纸贴在了白纸上。

我踩过这个坑。明明每一步都做对了，结果却让人抓狂。其实修复方法比你想象的要简单得多，而且不需要重新设计图标。

快速修复：加上正确的 HTML 标签

你的 apple touch icon 透明背景 变成白色方块，最常见的原因是 iOS Safari 没有找到正确的图标，回退到了默认样式。你很可能漏掉了 rel='apple-touch-icon' 标签，或者尺寸不对。

直接上代码：

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

就这一行。加上 sizes='180x180' 属性，告诉 iOS 使用这个特定文件。没有它，Safari 可能会忽略你的图标，直接显示一个白色占位符。

Apple 推荐现代 iPhone（iPhone 6s 及以后）使用 180x180 像素。旧设备也能优雅降级。如果你需要生成多个尺寸，可以参考我们的 Apple Touch Icon 尺寸指南——但说实话，180x180 基本覆盖了所有情况。

即使 HTML 写对了，你仍然可能看到白色背景。真正的原因通常有三个：

iOS 的缓存策略很激进。 iPhone 上的 Safari 会把图标存到 SQLite 数据库里。如果你之前上传过一个带白色背景的版本，iOS 会记住它。你需要清除 Safari 缓存，或者重命名文件。
你的 PNG 并不是真正的透明。 有些图片编辑器会把透明区域保存为白色像素（透明度为 0），但 iOS 会把它渲染成白色。用 Mzu favicondl 这类工具检查一下 PNG 的 alpha 通道。
你用了 JPG 或其他非 PNG 格式。 iOS 只支持 PNG 格式的 Apple Touch Icon。JPG 天生就有实色背景。

在浏览器里打开你的图标。如果看到棋盘格图案，说明透明背景没问题。如果看到纯白或纯灰背景，那你的 PNG 就有问题。回到设计工具，重新导出时记得勾选“透明背景”。

修好之后，你肯定不想它再出问题。以下是我经过实战检验的方法：

iOS 14 及以上版本支持 SVG 格式的 Apple Touch Icon。SVG 原生支持透明背景——没有白色方块，没有 alpha 通道问题。代码如下：

<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.svg' type='image/svg+xml'>

我自己的网站换成 SVG 已经半年了，一次问题都没出过。唯一的缺点是旧版 iOS（iOS 13 及以下）不支持 SVG，所以最好保留一个 PNG 作为备选。

每次更新图标时，记得改文件名。别用 apple-touch-icon.png，改成 apple-touch-icon-v2.png。这样 iOS 就会下载新文件，而不是用缓存里那个带白色背景的旧版本。

别信模拟器。直接把你的网站添加到 iPhone 主屏幕，看看图标效果。如果显示白色方块，你马上就能发现。完整的检查清单可以参考我们的 Apple Touch Icon 完整设置指南。

你可能见过一些老教程推荐用 rel='apple-touch-icon-precomposed'。这是给 iOS 6 及更早版本用的，当时系统会给图标加一个光泽效果。现代 iOS 已经忽略这个属性了。别用它——纯属多余。

白色方块问题，十有八九是标签缺失、缓存了旧图标、或者 PNG 不是真正的透明背景。搞定这三个问题，你的图标在所有 iPhone 上都会显示得原汁原味。