站点图标：Safari 和 Favicon 的最佳实践

什么是 favicon

简单地讲就是浏览器标签页或收藏夹里显示的这些图标。

详细介绍看百度百科就好：

Favicon（即"Favorites Icon"的缩写）是一个小型的图标文件，通常以.ico格式存在，用于标识特定网站或网页。这个图标通常显示在网页浏览器标签页、收藏夹和书签栏等位置，以提供与网站相关的可视标识。

怎样设置

创建Favicon图标：
- 使用图形设计工具（如Adobe Photoshop、GIMP等）创建 Favicon 图标。
- 如果输出 ico 格式，Macos Photoshop不能直接输出这种格式，需要使用插件 ICOFormat, 尺寸为 32x32 或者 16x16.
- 也可以设计 png svg 以适应现代浏览器的需求，后者为矢量图拥有无损放大的能力，
上传 Favicon 文件到你的网站根目录：
在你的网站的HTML文件的 <head> 部分添加:

1
2
3
4
5
6
7
8


<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- 这是标准的Favicon链接，指向一个.ico格式的图标文件。 -->

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 这是用于iOS设备的Apple Touch图标链接。尺寸一般为 180x180 -->

<link rel="icon" href=/favicon.svg" type="image/svg+xml">
<!-- 这是一个使用SVG格式的Favicon图标链接。 -->

关于 Macos 的 Safari 的缓存问题

Safari 会根据网站的域名为键值进行缓存网站的 favicon 和 apple-touch-icon 图标，这也就导致了如果某些网站更新了 ico 图标，而用户则无法获取最新的图标，但是 Macos 可以清除缓存重新下载方法如下：
- 首先删除收藏页到图标并关闭标签页
- 打开访达 App 输入快捷键 command + shift + G 输入 ～/Library/Safari 或 /Users/用户名/Library/Safari 进入目录在这里找到如图所示的两个文件夹，这就是缓存他们的图标，清除掉，重启 Safari 就好了

iOS Safari 的 favicon 图标清理掉十分困难，改时间，设置内清除浏览记录都不行，重度强迫症表示很难接受。
- 除非 重置系统或者刷机 才能清理掉这个缓存，或许某些 iOS 的缓存也是类似这种持久缓存，没用设置过期时间？或者bug？可能这也就是为什么有的人刷完机后觉得变流畅吧？这仅仅代表我的个人猜测。
- 但是对于某些高阶玩家：如越狱或某魔或有漏洞的系统版本用户 法力无边 用 Fliza 搜索 favicon 或者需要清理图标的域名找到对应的文件夹内图标删除即可，对于 2023 年。未来iOS的越狱已经越发艰难了，不少 App Store 上的软件已经限制了最低的系统版本，很少有人坚持低版本系统了。 不要为了越狱放弃升级的快乐 …
- 对于 iOS Macos 端用：Edge / Chrome 浏览器的用户就完全不会有这个烦恼，对应软件设置里清理掉缓存重启APP就好了

iOS网页以Web应用程序的方式运行

同上，在你的网站的HTML文件的 <head> 部分添加:

1
2
3
4
5
6
7
8
9


<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 这个<meta>标签用于指示iOS设备上的Safari浏览器，将网站添加到主屏幕后，是否以Web应用程序的方式运行。 -->

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 这个<meta>标签用于指定Web应用程序运行时的状态栏样式。 -->
<!-- 这个标签的content属性可以包含以下值，以定义状态栏的样式： -->
<!-- default：状态栏样式与系统默认一致。 -->
<!-- black：状态栏文字颜色为白色，背景为黑色。 -->
<!-- black-translucent：状态栏文字颜色为白色，背景为半透明黑色。 -->

调试完成后打开 Safari 点击分享按钮：

本文为本人遇到的问题一些 Favicon 的问题的解决方法的分享，感谢阅读！