具有巨大影响力的小图标
图标是浏览器选项卡、书签列表、浏览器历史记录以及（自 2019 年以来）Google 移动搜索结果中显示的小图标。这些微小的图像承载着不成比例的品牌影响力。研究表明，用户主要使用图标识别来区分打开的选项卡，而不是选项卡文本。丢失或通用的图标会使您的网站更难在多个打开的选项卡中找到。
网站图标大小和格式
| 格式 | 尺寸 | 需要用于 |
|---|---|---|
| 首次代币发行 | 16×16, 32×32 | 旧版浏览器选项卡支持 |
| 巴布亚新几内亚 | 192×192 | Android 主屏幕图标，PWA |
| 巴布亚新几内亚 | 512×512 | PWA 启动画面、高 DPI 显示器 |
| 苹果触摸图标 | 180×180 | iOS“添加到主屏幕” |
| 静止无功发生器 | 可扩展 | 现代浏览器——任何尺寸都完美清晰 |
Google 搜索连接
自 2019 年以来，Google 在移动搜索结果中的 URL 旁边显示网站图标。缺少的图标显示通用地球图标。像素化或低质量的网站图标会向用户发出信号（也可能向 Google 发出质量信号），表明该网站可能维护不善。保持你的网站图标清晰和最新是一个小但真正的 SEO 考虑因素。
💡专业提示：将您的网站图标设计为以 16×16 像素工作。从大型矢量设计开始，然后专门优化小型版本 - 不要只是缩小规模。在 256 像素下看起来很棒的细节在 16 像素下通常会变得浑浊。
如何向您的网站添加网站图标
- 首先将您的网站图标创建为 512×512 PNG
- 使用转换器生成 ICO（多尺寸：16、32、48）
- 地方
图标.ico在您网站的根目录中 - 添加到您的 HTML
<头>:<link rel="icon" href="/favicon.ico"> - 添加苹果触摸图标：
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> - 在您的应用程序中引用 192px 和 512px 图标
清单.json用于 PWA 支持
为什么有些网站显示的图标损坏了？
最常见的原因：HTML 中的文件路径不正确、服务器为 favicon.ico 返回 404 或 CORS 限制阻止跨域 favicon 请求。大多数浏览器会积极缓存网站图标请求——在更改网站图标后清除浏览器缓存。