文章
从 PNG 制作 Favicon
favicon 是浏览器在标签页、书签和历史记录列表中显示的小图形。正确制作 favicon 不只是缩放 logo：.ico 格式将多种分辨率打包进一个文件，现代浏览器更倾向于 PNG，移动设备有自己的 apple-touch-icon，Web 应用清单也需要自己的图标集。本文介绍每个组成部分，并说明如何从单个源 PNG 生成完整的图标集。
什么是 favicon 以及浏览器在哪里使用它
favicon 一词是"favorite icon"（收藏夹图标）的缩写。浏览器最初在 Internet Explorer 5（1999 年）的地址栏中显示它，随后在书签中也采用了它。如今它出现在浏览器标签页、书签工具栏、浏览历史、部分浏览器的新标签页，以及将网站固定时的操作系统任务栏中。在移动端，如果用户将网站添加到主屏幕，设备会使用一个相关但不同的图像，称为 apple-touch-icon，而不是标准 favicon。搜索引擎有时会在搜索结果旁边显示 favicon。图形设计得很小，便于快速视觉识别，但也因此难以制作好：在 16x16 像素下，复杂的 logo 会变成模糊的一片。favicon 文件本身经历了多种格式，.ico 仍然是兼容性最广的，PNG 现在成为大多数浏览器的现代默认格式。
.ico 容器：一个文件中的多种分辨率
.ico 格式是一个容器，而不是单张图像。一个 .ico 文件可以容纳多张不同分辨率的位图图像，每张都作为文件开头索引中的独立条目存储。三种最常见的尺寸是 16x16、32x32 和 48x48 像素。当 Windows 在资源管理器或任务栏中显示 favicon 时，会选择最适合显示上下文的条目。较旧的 Windows 版本在高密度任务栏槽中需要 48x48 条目。浏览器以 16x16 尺寸请求 favicon 用于标签页，但在检测到高密度显示器时可能使用较大的条目。将三种尺寸打包到一个 .ico 文件中，单个 HTTP 请求就能覆盖所有使用场景。以独立 PNG 分发也是有效的，但需要额外的 link 标签并增加 HTTP 请求。.ico 文件内的图像是标准 BMP 或 PNG 数据，因此容器每个条目只增加少量头部开销。
为小尺寸设计：简化图标
在 16x16 像素下，您只有 256 个像素。典型的带文字标志或精细细节的 logo 在这个尺寸下难以辨认。标准做法是创建一个简化的图标：单个字母、抽象形状或能代表品牌的图标，无需依赖细节。以下是一些需要预判的具体问题：细描边在小尺寸下会完全消失，尤其是在非视网膜屏幕上。字母组合和负空间细节会融合成灰色噪点。渐变几乎看不见。图标与背景之间的高对比度是清晰度最重要的因素。纯色形状配上单色背景，几乎总是比 16x16 的精细插画效果更好。32x32 和 48x48 尺寸更宽容，可以支持多一点细节，但 16x16 版本应该被视为约束基准。如果图标在 16x16 下仍不清晰，设计需要进一步简化。
完整现代方案：.ico、PNG 图标、apple-touch-icon、清单和 HTML link 标签
目前，公共网站的完整 favicon 设置需要五样东西。第一，网站根目录下的 favicon.ico（浏览器会直接请求 /favicon.ico 作为回退，不需要 link 标签）。第二，用于现代桌面浏览器的 32x32 PNG，通过 link 标签声明：`<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`。第三，用于标签页尺寸的 16x16 PNG：`<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`。第四，用于 iOS 主屏幕书签的 180x180 像素 apple-touch-icon：`<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`。第五，包含 192x192 和 512x512 PNG 的 Web 应用清单（site.webmanifest），用于 Android 和渐进式 Web 应用。PNG 和 .ico 内的 PNG 编码条目支持透明度，但 apple-touch-icon 应有不透明背景，因为 iOS 会忽略 alpha 通道并将透明区域填充为黑色。
在本地完成：favicon-generator 将您的图像保留在设备上
本站的 favicon-generator 接受 PNG 并生成完整的图标集：包含 16x16、32x32 和 48x48 条目的多分辨率 favicon.ico、用于直接 link 标签引用的独立 PNG 尺寸，以及 180x180 的 apple-touch-icon。所有这些都在您的浏览器中使用 Canvas API 和 JavaScript .ico 编码器完成。您的源图像不会被上传到任何地方；它保留在您的设备上。当源文件是公司 logo 或任何在您控制其去向之前不应离开设备的资产时，这一点非常重要。每个生成的文件都会作为独立文件提供下载，使用约定的文件名。将其复制到网站根目录，并在 HTML head 中添加相应的 link 标签即可。如果源 logo 的精细细节在 16x16 渲染中无法保留，您可以在将其拖入生成器之前进行裁剪或简化，或专门为 favicon 准备一张不同的源图像。
本文涉及的工具
常见问题
如果我声明了 PNG link 标签，还需要 favicon.ico 吗？
需要，原因有两点。第一，不读取您的 HTML 的浏览器（网络爬虫、RSS 阅读器、部分旧移动浏览器）会直接在域根目录查找 /favicon.ico。如果该文件不存在，每次页面加载都会产生 404 请求，这会在服务器日志中增加噪音，并造成不必要的小额往返。第二，较旧版本的 Internet Explorer 只识别 .ico 格式，会忽略 PNG link 标签。同时提供两者可覆盖所有情况。
我可以使用 SVG 作为 favicon 吗？
Chrome 和 Firefox 通过 `<link rel="icon" type="image/svg+xml" href="/favicon.svg">` 支持 SVG favicon。Safari 不支持 SVG favicon。由于 SVG favicon 与分辨率无关，它在任何显示密度（包括视网膜屏幕）下都会保持清晰，无需多种尺寸变体。实际建议是为支持 SVG 的浏览器声明 SVG link 标签，同时仍保留 .ico 作为回退以实现完整覆盖。SVG favicon 还可以包含 `prefers-color-scheme` 媒体查询，以在浅色和深色版本之间自动切换。
从什么图像开始能获得最佳效果？
带透明背景的 512x512 或更大尺寸的正方形 PNG 具有最大的灵活性。从大尺寸缩小比从小尺寸放大保留更多细节。如果您的主 logo 包含文字标志，可以考虑专门准备一个简化版本，只显示图标或标记，因为无论源分辨率如何，16x16 下的文字都无法阅读。图标与背景之间的高对比度是判断小尺寸是否清晰可读的最可靠指标。