摘要：网站图标会出现在浏览器标签页、书签、手机主屏幕以及 Google 搜索结果中。一张 512×512 的源图，几秒钟就能生成您需要的所有尺寸。
网站图标是在各个平台和设备上代表您网站的小图标。它会出现在浏览器标签页、书签列表、历史记录菜单、渐进式网络应用启动器中，自 2019 年起，还会直接显示在 Google 移动端搜索结果中的站点名称旁。尽管占据的空间极小，网站图标在品牌识别和用户信任方面却发挥着超出比例的作用。
Google 的文档确认，网站必须拥有有效的网站图标，才能在搜索结果中展示它。没有网站图标的页面会显示一个通用的地球图标，这会降低视觉辨识度，与使用品牌图标的竞争对手相比可能拉低点击率。Google Search Central 指南详细说明了具体要求：文件尺寸必须是 48 像素的倍数、为正方形，并且 Googlebot 可以访问。
网站图标为何对 SEO 与品牌很重要
当用户在移动端浏览 Google 搜索结果时，网站图标是他们最先注意到的视觉元素之一。清晰、易识别的图标能立即建立品牌联想，并让您的搜索结果在使用默认图标的竞争对手中脱颖而出，从而提升点击率。
除搜索之外，网站图标还是持续存在的品牌触点。每个打开的浏览器标签页都会显示您的图标，每一条书签也会展示它。当用户把您的网站添加到手机主屏幕时，Apple Touch 图标或 Android Chrome 图标就成了您类似应用的形象。忽视这些资源的网站，看起来会显得未完工且不够专业。
渐进式网络应用（PWA）完全依赖于正确配置的网站图标。网络应用清单会引用多种分辨率的图标文件。缺少它们，安装提示可能不会出现，PWA 在主屏幕上也无法正确显示。
您需要的全部网站图标尺寸
完整的网站图标方案覆盖四个主要场景，每个场景都需要特定的文件尺寸：
浏览器图标使用 16×16 和 32×32 像素的 ICO 或 PNG 文件。它们会出现在标签页、地址栏和书签菜单中。32×32 版本还用于 Windows 任务栏快捷方式。
Apple Touch 图标需要 180×180 像素的 PNG。当用户把您的网站添加到主屏幕时，iOS 会使用它。如果没有，Safari 会改用页面截图，效果往往很差。
Android Chrome 图标需要在网络应用清单中引用 192×192 和 512×512 像素的 PNG。它们支撑 PWA 安装和“添加到主屏幕”功能。512×512 版本还用于启动画面。
Windows 磁贴使用 150×150 像素的 PNG，用于 Microsoft 开始菜单磁贴及其他 Windows 集成。可选的 browserconfig.xml 文件允许您自定义磁贴颜色。
我们的免费网站图标生成器可以从一张源图生成上述所有尺寸。上传一次，即可下载包含所有格式的完整包。
如何制作完美的源图
请从 512×512 像素或更大的正方形图片开始。SVG 格式最为理想，因为它可以无损缩放，但高分辨率的 PNG 同样很好用。
简洁是关键。网站图标显示尺寸极小，繁琐的细节会完全消失。最有效的网站图标使用大胆的形状、强烈的对比和极简的元素。想想 Twitter 的小鸟、GitHub 的猫或 YouTube 的播放按钮，它们在 16 像素下依然一眼可辨。
不要使用照片或带文字的完整标志。字母只有在采用粗体字体的单个字符时才有效果。许多品牌只使用首字母，或者标志图形的简化版本。
PNG 网站图标请使用透明背景。这样无论浏览器使用浅色还是深色主题，图标都能保持干净。ICO 格式可以在单个文件中包含多个尺寸，是旧版浏览器可靠的降级方案。
用正确的 HTML 实现网站图标
生成网站图标文件后，您需要在页面的 <head> 区域中加入正确的 HTML 标签。必备的标签包括：
<link rel="icon"> 标签指向您的主网站图标。现代浏览器直接支持 PNG：<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">。
<link rel="apple-touch-icon"> 标签指定 iOS 主屏幕图标。Apple 设备会寻找这个确切的关系属性。将 sizes 属性设为 180x180 效果最好。
<link rel="manifest"> 标签链接您的网络应用清单，其中列出了 Android Chrome 图标的尺寸与用途。这对 PWA 支持至关重要。
对于 Windows 磁贴，<meta name="msapplication-TileImage"> 标签提供磁贴图形。您还可以通过 <meta name="msapplication-TileColor"> 设定磁贴背景色。
我们的生成器会为以上所有标签提供可直接粘贴的 HTML 代码。只需把代码块复制到网站的 head 区域，将生成的文件上传到根目录，就能覆盖所有平台。
2026 年的网站图标最佳实践
让网站图标与品牌形象保持一致。图标应使用与您的标志和网站设计相同的色彩与视觉语言。各个触点的一致性会随时间积累品牌识别度。
请在多种浏览器和设备上测试您的网站图标。Chrome、Firefox、Safari 和 Edge 渲染网站图标的方式略有不同。如果提供的尺寸不对，在一个浏览器中清晰的图标，在另一个浏览器中可能变得模糊。
在支持的环境中使用 SVG 网站图标格式。现代浏览器可通过 <link rel="icon" type="image/svg+xml"> 接受 SVG 网站图标。SVG 可以完美缩放到任意尺寸，并支持深色模式媒体查询，让图标适应用户的系统偏好。
更新网站图标时要清除缓存。浏览器对网站图标的缓存非常激进。更换图标后，请附加版本号查询参数或修改文件名，强制浏览器获取新版本。
最后，始终在网站根目录的 /favicon.ico 保留一个 ICO 降级方案。无论您的 HTML 如何指定，仍有一些浏览器和工具会寻找这个默认路径。保留它，就能确保没有任何平台缺少您的品牌图标。
.webp){kind=small}
.webp){kind=small}
.svg)
.svg)
