不知道你有没有遇到过这种情况：在 iPhone 上打开某个网站，然后把它添加到主屏幕，Safari 自动生成一个漂亮的品牌图标。轮到你自己的网站？只有一个页面截图，丑得不行。这就是 Apple Touch Icon 的差距——如果你正在开发新项目，大概率想从做得好的网站偷师一下。

但找到这个图标文件并不总是那么简单。跟常规的 favicon 放在 /favicon.ico 不同，Apple Touch Icon 藏在 <link> 标签或者 manifest.json 文件里。下面教你如何从任意网站提取 Apple Touch Icon——不用瞎猜 URL。

为什么 Apple Touch Icon 更难找

大部分开发者都知道标准 favicon 的 URL 规则。但苹果偏要搞点花样。这个图标可能叫 apple-touch-icon.png，也可能叫 apple-touch-icon-precomposed.png，甚至藏在 Web App Manifest 里。没有统一规范。

拿 GitHub 来说。它的 Apple Touch Icon 并不在根目录下，而是放在 https://github.githubassets.com/assets/apple-touch-icon-... 这种带 hash 的路径。如果你瞎猜 /apple-touch-icon.png，只会得到一个 404。

Apple Touch Icon 藏身的三个地方

动手之前，先搞清楚去哪找：

方法一：用浏览器 DevTools 手动提取

这是最快的方法，适合快速看一眼。打开任意网站，右键点击选择“检查”（或者按 F12）。切换到“Elements”标签页，用 Ctrl+F（Mac 上 Cmd+F）搜索“apple-touch-icon”。

你会看到类似这样的代码：

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

复制 href 的值。如果是相对路径（比如 /path/to/icon-180.png），前面加上网站的域名。在新标签页打开这个 URL，图标就到手了。

如果找不到 Link 标签怎么办？

有些网站，特别是现代 PWA，完全省略了 HTML 标签，直接依赖 manifest。这时候找这个：

<link rel='manifest' href='/manifest.json'>

打开那个 JSON 文件，搜索 sizes: '180x180' 或 sizes: '192x192' 的对象。那就是你要的 Apple Touch Icon。

方法二：用 Mzu favicondl 智能提取

如果你经常提取图标——比如在分析竞品网站或者收集设计参考——手动操作很快就烦了。这时候 Mzu favicondl 就派上用场了。

把网站 URL 粘贴到工具里，它会自动扫描三个位置：HTML link 标签、manifest.json 和根目录。它会找到所有尺寸的 Apple Touch Icon，并让你直接下载。再也不用在 DevTools 里翻来翻去，或者瞎猜路径了。

这对像 Apple.com 这样的网站特别有用，它从不同路径提供多个尺寸（152x152、167x167、180x180）。Mzu favicondl 一次性全拉下来。

小技巧：检查 Precomposed 变体

旧版 iOS（iOS 7 之前）用 apple-touch-icon-precomposed，会去掉光泽效果。现代 iOS 忽略这个属性，但有些老网站还在用。如果你从老网站提取图标，记得检查两种 rel 值。Mzu favicondl 自动处理这个，但如果你手动操作，别漏了 precomposed 标签。

方法三：控制台一行代码搞定

如果你喜欢命令行，这里有个 JavaScript 片段，可以在 DevTools 控制台里运行：

const links = document.querySelectorAll('link[rel*="apple-touch-icon\)]');
links.forEach(link => console.log(link.href));

这会把页面上所有 Apple Touch Icon URL 打印出来。如果什么都没出现，说明网站可能用了 manifest。运行这个：

fetch('/manifest.json')
  .then(r => r.json())
  .then(m => m.icons.filter(i => i.sizes.includes('180'))
  .forEach(i => console.log(i.src)));

这会获取 manifest 并筛选出 180x180 的图标——这是 Apple Touch 的标准尺寸。

提取到图标后怎么用

拿到图标文件后，你可以用它作为自己设计的参考。但别直接复制——要分析它。注意大品牌是如何在 180x180 像素下把 logo 简化成单一可识别的形状。苹果用它的轮廓。Google 用 'G' 标记。Stripe 用 'S'。

如果你想设置自己的 Apple Touch Icon，看看我们的 Apple Touch Icon: 完整设置指南，里面有需要的 HTML 和尺寸。如果你还在纠结为什么图标在 iOS 上不显示，我们的 Favicon 不显示？7 个常见原因及解决方法 覆盖了最常见的坑。

总结

从网站提取 Apple Touch Icon 并不复杂，只要你知道去哪找。DevTools 让你立刻看到 link 标签。manifest 是后备方案。如果你经常做这事，Mzu favicondl 能省去重复劳动。

下次在 iPhone 主屏幕上看到漂亮的图标时，你就知道怎么把它弄到手了——也知道怎么为自己的网站做一个同样好看的。