iOS各子目录书签图标异常：多工具书签显示同一图标问题

我之前也碰到过一模一样的情况——同域名下不同子目录的工具，明明各自配了不同的favicon，Safari书签却死活只显示同一个图标。结合你的场景，给你几个经过验证的解决方案：

1. 把相对路径改成绝对路径 #

你当前用的href="icon.png"是相对路径，Safari有时候会因为域名级别的缓存优先级，默认复用了某个子目录的图标。改成绝对路径，明确指定每个工具的图标位置：

<!-- tool1页面的代码 -->
<link rel="shortcut icon" type="image/png" href="/tool1/icon.png">

<!-- tool2页面的代码 -->
<link rel="shortcut icon" type="image/png" href="/tool2/icon.png">

<!-- tool3页面的代码 -->
<link rel="shortcut icon" type="image/png" href="/tool3/icon.png">

这样每个工具的图标引用都完全独立，不会出现路径混淆的问题。

2. 彻底清理Safari的favicon缓存 #

Safari的favicon缓存堪称顽固分子，就算你改了代码，它可能还抱着旧图标不放。试试这几步操作：

• 先删除所有相关的书签，然后完全退出Safari（不是后台挂着，要划掉进程）
• 打开Safari的「设置」→「隐私与安全」，点击「清除历史记录与网站数据」（如果舍不得全清，也可以单独清除你的子域名数据，但操作起来麻烦，直接清缓存更彻底）
• 重新打开Safari，访问每个工具页面后再添加书签

3. 给每个图标设置唯一的文件名 #

三个工具都用icon.png作为文件名，Safari很可能会把它们当成同一个缓存文件。把文件名改成tool1-icon.png、tool2-icon.png、tool3-icon.png，再对应修改link标签：

<!-- tool1页面的代码 -->
<link rel="shortcut icon" type="image/png" href="tool1-icon.png">

从文件名层面彻底区分开，能有效避免缓存混淆。

4. 添加适配iOS Safari的多尺寸图标标签 #

iOS Safari对书签图标（包括添加到主屏幕的图标）有特殊的识别逻辑，多添加几个不同属性的link标签，能让Safari更精准地抓取对应工具的图标：

<!-- tool1页面的示例代码 -->
<link rel="icon" type="image/png" sizes="16x16" href="/tool1/icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/tool1/icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/tool1/icon.png">

这些额外的标签不仅能优化主屏幕图标显示，也会帮助Safari正确区分不同子目录的书签图标。

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