俗话说“浓缩的都是精华”，这句谚语同样适用于不起眼的 favicon（网站图标）。这些微小的品牌徽章自 20 世纪 90 年代 Internet Explorer 时代起便出现在网络浏览器中，显示在浏览器标签页和书签视图中。Favicon 作为视觉提示，有助于客户将您的网站与公司的品牌形象联系起来。
是时候摆脱通用的浏览器图标了。只需片刻，您就能创建一个令人印象深刻的 favicon，并帮助客户在塞满标签页的浏览器窗口中轻松导航。
什么是 favicon？
网站图标（favicon）是一种小型图形，会显示在网页浏览器标签页、书签栏、收藏夹栏、浏览器历史记录结果以及搜索引擎结果页面（SERPs）的标题旁边。
Favicon 是“favorite icon”（收藏图标）的合成词，它作为您网站的视觉书签，帮助人们在打开多个标签页时轻松识别网页。当网站最小化时，favicon 可能会显示为任务栏快捷方式图标。当用户将您的网站加入书签时，favicon 同时充当书签图标，使其在众多已保存的网页中更容易被找到。
在某些操作系统中，从浏览器窗口拖放 URL 到桌面会创建桌面快捷方式图标，浏览器 favicon 也常被重新用作快捷方式图标。
使用 favicon 的好处
- 提高点击率 (CTR)
- 提升品牌知名度
- 改善用户体验和停留时间
网站图标不会直接提升 SEO 排名，但添加网站图标及其他 UX 改进措施，有助于打造更友好的网站。以下是其影响网站性能的方式：
提高点击率 (CTR)
Google 等搜索引擎会在搜索结果中显示网站图标。一个引人注目或易于识别的网站图标可以提升品牌认知度，增加用户访问意愿，从而提高点击率（CTR），而 CTR 是重要的电商 SEO 指标。
提升品牌知名度
当网站图标强化品牌标志时，它就像是在用户书签栏、标签页及搜索结果页面上的免费广告，有效增加品牌曝光度。
改善用户体验和停留时间
瞬间可识别的 favicon 能增加用户加入书签的可能性，这种行为会被 Google 等搜索引擎视为积极信号。这种微小的体验改进鼓励用户回访，从而增加流量和停留时间。
为您的网站创建 favicon 的指南
- 选择合适的尺寸
- 选择兼容的文件格式
- 考虑使用动态图标
优质图标需符合特定的尺寸和文件格式要求：
选择合适的尺寸
图标的理想尺寸为 16x16 像素，尽管也有 32x32 或 48x48 像素的设计。16x16 尺寸在所有浏览器的地址栏、标签页或书签视图中均得到支持，是最稳妥的选择。
选择兼容的文件格式
原始文件格式对转换效果至关重要。最常用的是 PNG 和 ICO：PNG 包含无损压缩和透明通道，缩放不失真；ICO 包含多尺寸和色彩深度图像，适配 Windows Explorer 且缩放良好。SVG 加载快、可无限缩放，但浏览器支持度较低。应避免使用 JPEG 等有损压缩格式。
考虑使用动态图标
动态 GIF 或 JavaScript 文件虽能增添亮点，但存在浏览器兼容性局限。请务必在多种浏览器中测试，确保图标在不同环境下均能正常显示。
流行的图标生成器
您可以使用在线工具制作契合品牌的自定义图标，以下是一些流行选项：
- Favicon.io：允许从图像、链接或文本创建图标并转换格式。下载后置于网站根目录，复制代码粘贴至 HTML head 标签即可。
- RealFaviconGenerator：交互式 API 工具，可指定主图像处理规则以生成适配多平台的网站图标。
- Favicon Generator：按平台生成图标，支持预览设计在不同设备和浏览器上的显示效果。
- Dan’s Tools：提供 Favicon.ico & App Icon Generator，支持上传现有图片转 ICO 格式，或浏览图标库获取设计灵感。
如何将图标添加到 HTML
创建图标后，需将其上传至网站并添加代码，以便浏览器和 Web 应用正确显示。
指向图标的指针代码应放在 HTML 文件的 <head> 部分。假设图标文件为根目录下的“brandXicon.png”，添加代码如下：
<link rel="icon" type="image/png" href="/brandXicon.png">
图标可存放在任意目录，根目录最为常见，请确保文件路径准确。
若需加载多个尺寸的图标，需在 <head> 内为每种大小编写独立代码，并使用“sizes”属性区分：
<link rel="icon" type="image/png" sizes="16x16" href="/brandXicon16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/brandXicon32x32.png">
如何为 Shopify 网站添加 favicon
Shopify 用户无需编程知识即可轻松添加：
- 在桌面浏览器进入在线商店管理面板。
- 选择“主题”>“自定义”打开编辑器。
- 点击齿轮图标进入“主题设置”。
- 选择“Favicon”（部分主题称为“Logo”）。
- 从商店库选择图片或上传新图片。
- 编辑“替代文本”以提升无障碍访问性（鼠标悬停时显示）。
- 保存更改并在不同浏览器中测试效果。
更多移动端添加信息请参阅 Shopify 帮助中心相关主题。
如何在 WordPress 上添加 favicon
- 进入 WordPress 仪表板，点击“外观”。
- 点击“自定义”查看选项列表。
- 点击“站点标识”控制标题、副标题和徽标等内容。
- 在“站点图标”部分点击“选择站点图标”上传新图片。
- 单击“发布”使更改生效。
- 在多种浏览器中测试显示效果。
如何在 Wix 上添加网站图标
Wix 默认带图标，高级套餐会员可自定义：
- 进入站点仪表板的“设置”。
- 在“网站图标”旁单击“管理”。
- 单击“上传图片”或“上传媒体”从计算机导入图像。
- 单击“添加到页面”，在标签页中预览效果。
- 单击“保存”后“发布”。
关于网站图标的常见问题解答
网站图标与标志相同吗？
网站图标是显示在搜索结果、标签页和书签栏中的小图标，用于标识页面；标志则代表整个品牌。大多数品牌的 favicon 与标志共享设计元素，若标志足够简洁，两者甚至可能完全相同。
网站图标的示例是什么？
网站图标通常显示为地址栏或标签页上的小图形，帮助用户视觉识别网站。例如，Shopify 的 favicon 使用了其标志中带有“S”字样的购物袋图案。
有设计网站图标的工具吗？
是的，有许多免费或付费工具可辅助设计，如 Favicon.io 和 RealFavIconGenerator 等在线生成器。