图片转Favicon：从任何图像创建网站自定义图标

Q: 如何在 HTML 中引用 Favicon？

使用指向每个尺寸和格式的 标签，并为 iOS 添加 。浏览器会选择最佳匹配项。一套完整的 link 标签可以覆盖所有平台。

最后更新时间：June 28, 2026. 浏览器 favicon 支持不断发展；这里涵盖的核心尺寸和格式覆盖了当前的格局。

favicon 是当用户保存您的网站时，出现在浏览器标签页、书签列表和手机主屏幕上的小图标。将图片转换为 favicon 意味着需要创建正确尺寸和文件类型的资源，以确保该图标在所有出现的地方都保持清晰——从 16-pixel 的浏览器标签到 180-pixel 的 Apple Touch 图标。本指南涵盖了每个平台预期的尺寸、需要生成的文件格式，以及如何在微小尺寸下保持图标的可识别性。

快速答案：如何从图片创建 favicon？

从一个方形的源图片开始（或者使用 image cropper 进行裁剪），将其 resize 到标准的 favicon 大小 (16px, 32px, 180px, 512px)，并导出为 PNG 文件，以及用于旧版浏览器的 ICO 文件。在您的 HTML <head> 中使用适当的链接标签引用它们。请在浏览器标签页中测试 16px 版本，因为如果图标在这个尺寸下无法识别，再多的更大版本也无法修复。如果徽标是矢量图，也要保留 SVG 版本，以确保在高-DPI 屏幕上清晰渲染。

Favicon 需要哪些尺寸？

不同的上下文会在不同的尺寸下显示 favicon，提供正确的尺寸可以确保它在任何地方都保持清晰锐利。

Size	File	Used for
16x16	ICO / PNG	Browser tab (legacy)
32x32	ICO / PNG	Browser tab (retina)
180x180	PNG	Apple Touch icon
192x192	PNG	Android home screen
512x512	PNG	PWA / splash
Any	SVG	Modern browsers, high-DPI

16px 版本是最重要的 — 这是大多数人会在标签页中看到的内容。
Apple Touch icon 需要 180px，才能在 iOS 上实现清晰的桌面显示。
SVG 可以在任何分辨率下为现代浏览器服务，无需多个文件。
一个 ICO 可以捆绑多个尺寸以支持旧版系统。

如何设计一个在 16px 上也能正常显示的 favicon？

favicon 的挑战在于它必须在 16 像素上可识别，而这个尺寸非常小。在 512px 上看起来很棒的细节在 16px 上会消失，因此设计必须简单。

使用单一、醒目的形状 — 一个字母、一个标志或一个简单的图标。
避免使用细线和小文本 — 在 16px 上它们会消失。
使用高对比度，确保该形状在标签页背景上清晰可见。
出版前务必在实际尺寸下测试 16px 版本。

一个常见的错误是使用带有文字的完整 logo。在 16px 上，文字是无法辨认的，因此 favicon 看上去就像一团模糊的污点。解决办法是提取出最容易识别的单个元素 — 图标或首字母 — 并用它作为 favicon。SVG to PNG guide 介绍了如何在您需要的尺寸导出矢量标志。

您应该生成哪些文件格式？

由于浏览器支持随着时间发展，图标（favicon）需要涵盖多种格式才能确保其在所有地方都能正常工作。

ICO — 遗留格式，捆绑多种尺寸，受所有浏览器支持。
PNG — 现代标准，每种尺寸一个文件。
SVG — 矢量格式，可缩放至任何尺寸，受现代浏览器支持。
Apple Touch PNG — 特指 180x180，用于 iOS 主屏幕图标。

Format	When to use
ICO	遗留浏览器支持，捆绑尺寸
PNG	现代浏览器，按尺寸文件
SVG	现代浏览器，单个可扩展文件
Apple Touch PNG	iOS 主屏幕

为确保兼容性，请生成 ICO；为了广泛支持，请生成每种尺寸的 PNG 文件；如果源文件是矢量图，则应生成 SVG。image converter 负责格式生成，而 image cropper 首先获取原始方形图像。

如何在HTML中引用收藏夹图标？

生成的文件必须在页面的 <head> 中引用，这样浏览器才能找到它们。链接标签告诉浏览器在何种场景下使用哪个文件。

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

ICO 适用于带有捆绑尺寸的旧版浏览器。
SVG 为现代浏览器提供任何分辨率的支持。
Apple Touch 图标覆盖了 iOS 主屏幕保存图标。
将文件放置在网站根目录以实现最大兼容性。

Mozilla favicon guide 记录了链接标签和浏览器行为，而 Web.dev app icons guide 则涵盖了 Android 的可遮罩图标标准。部署后，请在真实的浏览器标签页和手机主屏幕上测试结果，因为渲染怪癖只在实际环境中才会显示出来。

为浅色和深色模式设计网站图标

现代浏览器和操作系统会在浅色模式和深色模式之间切换，一个在浅色标签页上看起来很棒的 favicon，在深色标签页上可能会“消失”。使用透明背景的 PNG 或带有自适应颜色的 SVG 可以处理这两种场景，因为图标是适应周围的界面（chrome），而不是携带自己的背景。

模式挑战	解决方案
深色图标在深色标签页上消失	添加微妙的轮廓或使用透明度
浅色图标在浅色标签页上消失	相同 — 使用轮廓或自适应颜色
在 16px 下难以阅读	简化形状，增加对比度

对于 SVG favicons，您可以在 SVG 内部使用 prefers-color-scheme media query 来为浅色和深色环境提供不同的颜色，这是最干净的解决方案。对于 PNG，带有足够内部对比度的形状和透明背景在两种模式下都适用。目标是无论用户运行的是浅色模式还是深色模式，该 favicon 在标签页上都能清晰显示，而这正逐渐成为常态而非例外。

常见的 favicon 错误

细节过多 — 在 16px 下，图标无法识别。请简化它。
非方形源图 — 先裁剪成正方形，否则图标会失真。
缺少 Apple Touch icon — iOS 保存时会显示一个通用的截图代替。
没有使用 SVG — 高 DPI 屏幕将渲染出模糊的 PNG，而不是清晰的矢量图。
忘记在 16px 上测试 — 大多数人看到的尺寸正是最容易被忽视的。

favicon 虽然很小，但它出现在网站展示的每一个地方——标签页、书签、主屏幕和搜索结果。在所有尺寸下都保持清晰且易识别的图标能够瞬间强化品牌形象；而模糊或缺失的 favicon 则表明缺乏专业度。花时间确保 16px 版本正确，生成完整的尺寸和格式集，那么这个图标无论出现在哪里都能干净利落地代表您的网站。投入的时间成本很小——只需一个下午的设计和导出工作——但每次用户在标签页、书签或主屏幕上看到您的网站时，都会得到回报，而这种情况发生的频率远超大多数团队的认知。

常见问题

Favicon 需要什么尺寸？

现代一套完整的 Favicon 尺寸包括：16×16、32×32、48×48（经典），以及 180×180（Apple touch icon）和 192×192 / 512×512（Android）。使用一张主图即可生成整个尺寸集。浏览器会根据不同的上下文选择合适的尺寸。

如何设计适用于 16px 的 Favicon？

保持简洁——一个醒目的形状，高对比度，不包含精细细节或文字。在 16px 下，任何复杂的元素都会变得模糊不清。提交前请务必在 16px 上测试设计；如果在这个尺寸下无法辨认，说明它过于复杂了。

Favicon 应该使用哪些文件格式？

ICO 用于兼容旧系统，PNG 用于现代浏览器和 Apple/Android 图标，而 SVG 则用于支持分辨率无关的版本。生成完整的尺寸集；单一格式无法覆盖所有设备。

如何在 HTML 中引用 Favicon？

使用指向每个尺寸和格式的 <link rel="icon"> 标签，并为 iOS 添加 <link rel="apple-touch-icon">。浏览器会选择最佳匹配项。一套完整的 link 标签可以覆盖所有平台。

我可以使用一张图片来生成所有尺寸的 Favicon 吗？

是的——一张单一的正方形主图（512×512 或更大）即可生成从 16×16 到 512×512 的完整尺寸集。设计主图时，要确保它在 16px 下依然清晰可辨（一个醒目的形状），这样最小的尺寸也能正常工作。一张主图，多种尺寸。

如何测试 Favicon？

在浏览器标签页中打开网站，检查 16px（标签页大小）、32px（书签）和 180px（Apple touch）下的图标。如果 16px 版本无法辨认，说明设计过于复杂——需要简化为一个醒目的形状。Favicons 虽然很小但无处不在，因此在所有尺寸下保持清晰、可识别的图标有助于品牌一眼被记住。

什么是 ICO 文件？

这是一种遗留容器格式，用于存储一个或多个不同尺寸的位图图像，主要用于老式浏览器（尤其是旧版 Internet Explorer）的 Favicon。现代浏览器使用 PNG 和 SVG，因此 ICO 主要是一个向后兼容层。建议在生成 PNG/SVG 集的同时也生成一个 ICO 文件，以确保无论浏览器多老，都能获得图标支持。