如何制作 favicon
让 favicon 处处正常显示所需的尺寸、格式和代码。
favicon 就是浏览器标签页、书签里，以及 Google 移动搜索结果中网站旁边的那个小图标。没有 favicon 的网站看起来像没做完，模糊的 favicon 则更糟。做一个好的 favicon 只需要几分钟。
从合适的图案开始
favicon 最小会以 16 × 16 像素显示，所以带文字标识的完整 Logo 根本看不清。请使用简单的标志：Logo 中的图形部分、一个首字母，或者一个品牌色的醒目形状。测试方法是把它在屏幕上缩小到四分之一：如果还能认出是什么，就没问题。
从一张至少 512 × 512 像素的正方形图片开始，最好是透明背景的 PNG。如果你的 Logo 不是正方形，就把比例锁定为 1:1，把它裁剪成正方形。
你需要的文件
| 文件 | 尺寸 | 用途 |
|---|---|---|
| favicon.ico | 包含 16、32 和 48 像素三个版本 | 浏览器、旧系统，以及对 /favicon.ico 的默认请求 |
| PNG 图标 | 32 × 32 和 192 × 192 | 现代浏览器、Android 主屏幕 |
| apple-touch-icon.png | 180 × 180 | iPhone 和 iPad 主屏幕书签 |
Google 搜索结果中也会显示你的 favicon。它必须是至少 48 × 48 像素的正方形，并且能被抓取。
制作 ICO 文件
把你的正方形 PNG 拖放到 PNG 转 ICO 工具中，它会生成一个真正的 .ico 文件，包含浏览器需要的各种小尺寸。至于 PNG 版本，把同一张正方形图片分别调整尺寸为 180、192 和 32 像素即可。
添加到你的网站
把 favicon.ico 上传到网站根目录，确保可以通过 yoursite.com/favicon.ico 访问，然后在页面的 head 中加入以下代码：
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/zh/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/zh/apple-touch-icon.png">
在 WordPress 中，进入“外观”、“自定义”、“站点身份”，上传一张正方形图片作为“站点图标”，WordPress 会自动生成各种尺寸。Shopify、Wix 和 Squarespace 也都在网站设置或主题设置中提供了 favicon 选项。
新 favicon 不显示怎么办
浏览器对 favicon 的缓存非常顽固。可以用无痕窗口打开网站，或者直接访问 yoursite.com/favicon.ico 并刷新。Google 重新抓取你的首页后，可能需要几天甚至几周才会更新搜索结果中的图标。
常见错误
- 使用带小字的完整 Logo，缩到 16 像素就成了一团模糊。
- 透明背景上的白色图标，在浅色浏览器标签页上会完全看不见。
- 只提供一个 16 像素的小文件，在高分辨率屏幕上会显得模糊。
- 忘了放 /favicon.ico 文件，而有些浏览器和爬虫无论页面怎么写都会请求它。