PNG 转 Favicon:免费在线 ICO 转换器(2026)

PNG 是最常见的图片格式,但如果没有正确的配置,浏览器不会接受原始 PNG 作为 favicon。本指南讲解 PNG 到 favicon 的转换原理、一个完整包里包含什么,以及如何避免朴素缩放带来的模糊结果。

"PNG 转 favicon"实际上意味着什么

一个正规的 favicon 不是一个文件——而是一个包。当你转换 PNG 时,输出应包括:

一个捆绑了 16×16、32×32 和 48×48 的 .ico 文件
16、32、180、192 和 512 像素的单独 PNG
一个 180×180 的 apple-touch-icon.png
一个关联图标的 site.webmanifest

你可以使用单个 PNG 作为 favicon,写法为 <link rel="icon" type="image/png" href="/icon.png">,但会失去对旧浏览器的兼容性,并且无法支持 iOS/Android。

如何将 PNG 转换为 favicon(免费)

打开 Favicon.one 生成器并上传你的 PNG。
工具会将其缩放到每种所需尺寸——完全在你的浏览器中完成。
下载 ZIP,其中包含 .ico、所有 PNG 和 manifest。
解压到网站根目录,并添加 HTML link 标签。

所有处理都在客户端运行。你的 PNG 不会被上传到服务器,因此敏感的 logo 可以保持私密。

为什么透明度很重要

PNG 支持透明度;JPEG 则不支持。透明的 PNG favicon 可以让浏览器标签页背景透出来,这比一个白色方块专业得多。如果你从 JPEG 开始,请先转换为 PNG 并去除背景。

避免模糊的 favicon

自动生成的 favicon 最主要的抱怨就是 16×16 下的模糊。原因和解决方法:

细节太多。复杂的 logo 缩到 16px 会变成一团糊。使用简化版本——单个字母或形状效果最好。
线条太细。极细的线在小尺寸下会消失。使用粗壮、高对比度的形状。
源文件分辨率低。至少从 512×512 开始(1024×1024 更好)。绝不放大。
同时提供 SVG。矢量 favicon 在任何尺寸都保持清晰——请参阅我们的 SVG vs PNG 指南。

.ico 文件里有什么?

ICO 格式很特殊:单个 .ico 可以内嵌多个不同尺寸的 PNG/BMP 图片。当浏览器请求 favicon.ico 时,它会收到所有尺寸并为当前显示环境选择最合适的一个。这就是为什么一个好的 .ico 是兼容性最好的 favicon 格式——自 Internet Explorer 以来的每个浏览器都支持它。

转换后的完整 HTML

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">