网站图标（favicon，即“收藏图标”的缩写）会出现在浏览器标签页、书签和移动设备主屏幕上。它是一个虽小但重要的品牌标识点，但要在所有浏览器和设备上正确实现却相当复杂。以下是具体操作方法。

什么是网站图标（Favicon）？

网站图标（favicon）是与网站关联的小图标。它会显示在：

在浏览器标签页中，页面标题旁边。

在浏览器的书签和历史记录中

在 iOS/Android 主屏幕上，当用户保存您的网站时（Apple 触摸图标）

在 PWA 安装程序中作为应用图标

在搜索引擎结果中（有时）

一套完整的网站图标设置需要多种尺寸和格式，以涵盖所有这些情况。

所需的网站图标尺寸

尺寸用途16×16 像素浏览器标签页（标准）32×32 像素浏览器标签页（高 DPI），任务栏48×48 像素Windows 网站图标180×180 像素苹果触控图标（iOS 主屏幕）192×192 像素安卓 Chrome 浏览器主屏幕512×512 像素PWA 启动画面，高分辨率上下文SVG现代浏览器（无限可缩放）

第一步：从高分辨率源图像开始

请创建或导出尺寸至少为 512×512 像素的正方形 PNG 格式徽标/图标，并添加透明背景。这将作为您生成所有较小尺寸图像的源文件。

便于使用网站图标的设计技巧：

保持简洁——复杂的设计在 16×16 的屏幕上难以辨认。

使用高对比度——浅色背景搭配深色图标，反之亦然。

避免使用细线——细线在尺寸较小时会消失。

在 16×16 分辨率下测试 — 在设计工具中缩小尺寸以验证可读性

步骤 2：生成所有尺寸的网站图标

与其手动调整每个所需尺寸，不如使用网站图标生成器。PicsSizer 的网站图标生成器 可以读取您的源图像并生成完整的图标包：

上传您的 512×512（或更大）的源 PNG 图片。

预览每种尺寸的外观

下载包含所有必需尺寸的完整网站图标包

步骤 3：添加 HTML

请将以下标签添加到 HTML 的 部分：

第四步：创建 Web 应用程序清单

对于 Android 主屏幕图标和 PWA 支持，请创建 site.webmanifest 文件：

{

"name": "Your Site Name",

"short_name": "SiteName",

"icons": [

{

"src": "/icons/android-chrome-192x192.png",

"sizes": "192x192",

"type": "image/png"

},

{

"src": "/icons/android-chrome-512x512.png",

"sizes": "512x512",

"type": "image/png"

}

],

"theme_color": "#ffffff",

"background_color": "#ffffff",

"display": "standalone"

}

SVG 图标方法

对于现代浏览器而言，SVG 格式的网站图标是理想之选：

无限可扩展 — 在任何分辨率下都清晰锐利

文件体积小——通常小于 2 KB

支持深色模式 — 您可以在 SVG 中使用 CSS 媒体查询

在 SVG 中使用媒体查询来实现深色模式：

所有现代浏览器（Chrome、Firefox、Safari 14+、Edge）都支持 SVG 网站图标。

解决常见网站图标问题

网站图标未显示：

检查文件是否存在于 href 中指定的路径。

强制刷新浏览器（Ctrl+Shift+R / Cmd+Shift+R）

检查浏览器开发者工具的网络选项卡，查看 favicon 请求是否出现 404 错误

网站图标在电脑端显示，但在移动端不显示：

确保已为 iOS 设置 apple-touch-icon 。

确保 Android 的 Web 清单文件存在并已链接

更新后仍显示旧版网站图标：

浏览器会大量缓存网站图标。请添加一个清除缓存的查询字符串： href="/favicon.png?v=2"

网站图标模糊或像素化：

从更高分辨率的源图像（最低 512×512）重新生成

检查您是否针对每种情况使用了正确的大小

完整的网站图标清单

源图像尺寸为 512×512 像素（透明 PNG 格式）

favicon.ico（ICO 文件中包含 16×16 + 32×32 像素，适用于旧版 IE 浏览器）

favicon-16x16.png

favicon-32x32.png

apple-touch-icon.png (180×180)

android-chrome-192x192.png

android-chrome-512x512.png

favicon.svg（可选，但推荐）

site.webmanifest

HTML 标签位于 中

使用 PicsSizer 的网站图标生成器 从单个图像生成整个图标包，或者查看 网站图标大小指南 获取完整参考。