Picovert

PNG转ICO — 将PNG转换为网站图标（免费，无需安装）

Picovert 团队2026-04-305 分钟阅读

每个网站都需要网站图标（favicon）——出现在浏览器标签页、书签和地址栏中的小图标。 ICO是所有浏览器为向后兼容所需的传统favicon格式。使用免费的浏览器工具，将PNG标志或图片 转换为ICO只需几秒钟。以下是您需要了解的内容。

如何免费将PNG转换为ICO

  1. 打开Picovert的PNG转ICO工具。无需账号或安装。
  2. 拖入PNG文件。为获得最佳效果，请使用正方形PNG——512×512或256×256效果最好。
  3. 转换器会创建包含多种尺寸（16×16、32×32、48×48）的ICO文件。这些都嵌入在单个.ico文件中。
  4. 下载.ico文件并将其保存为网站根目录中的favicon.ico。

什么是ICO文件？

ICO（图标）是微软的图标容器格式。.ico文件可以在单个文件中存储多种分辨率和颜色深度的图像。 当浏览器显示favicon时，它会从ICO内嵌的图像中选择最合适的尺寸。这就是为什么精心制作的 favicon.ico包含16×16、32×32有时还有48×48版本——浏览器在每个上下文中使用合适的尺寸。

ICO文件也用于Windows桌面图标和应用程序图标。同一格式同时服务于网站favicon和系统图标。

创建favicon的推荐PNG尺寸

从正方形PNG开始。由于转换器会将其调整到目标尺寸，正方形比源文件尺寸更重要：

  • 512×512或256×256 — 理想的起始尺寸。大到足以清晰地降采样到32×32和16×16。
  • 最小64×64 — 小于此尺寸，16×16版本会变得非常模糊。
  • 必须是正方形 — Favicon总是正方形的。如果您的标志比高更宽，请在转换前添加 内边距使其成为正方形。

favicon.ico与PNG favicon——应该使用哪个？

现代浏览器直接支持PNG favicon，许多开发者现在使用PNG代替ICO。两种方法都有效。以下是各自的使用时机：

  • 根目录的favicon.ico：向后兼容所必需。旧版浏览器和部分邮件客户端即使没有<link>标签也会自动获取/favicon.ico。每个网站都应该有favicon.ico。
  • 通过link标签的PNG favicon：较大尺寸下质量更好，可以指定精确尺寸。 用于Apple Touch Icon（180×180）和现代高DPI屏幕。

最佳实践：两者都要有。一个favicon.ico用于根目录自动获取，以及在HTML head中声明的PNG favicon 用于现代浏览器。

如何将favicon添加到您的网站

将favicon.ico放在网站根目录，然后将以下内容添加到HTML的<head>中：

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

ICO链接上的sizes="any"属性告诉浏览器该文件包含多种尺寸。PNG回退处理偏好PNG的现代浏览器。 apple-touch-icon在有人将您的网站添加到iPhone主屏幕时使用——它应该是一个180×180的PNG。

在Next.js中创建favicon

在Next.js App Router中，直接将favicon.ico放在src/app/中。 Next.js会自动将其作为网站favicon提供。如需额外尺寸，在同一目录中添加icon.png或apple-icon.png。

PNG与ICO：主要区别

  • PNG：固定尺寸的单一图像。支持完整透明度。单个图像文件大小更小。
  • ICO：单个文件包含多种尺寸的容器。/favicon.ico请求所必需。 因为捆绑了多种尺寸，所以略大。

对于favicon，ICO格式的多尺寸功能很有用：它从单个文件处理浏览器标签的16×16和固定任务栏图标的32×32。

我可以将JPG转换为ICO吗？

可以——Picovert也支持JPG转ICO。 过程相同。请注意，JPG不支持透明度，因此如果您的标志有透明背景，请使用PNG源文件以在ICO中保留透明度。

常见favicon错误

  • 非正方形源图像 — 300×100的标志在被强制成正方形favicon时会变形。 先裁剪或添加内边距使其成为正方形。
  • 小尺寸时太复杂 — 复杂的插图在16×16时变得无法辨认。使用标志的简化版本 ——只要符号，不要完整的文字商标。
  • 将favicon.ico上传到错误位置 — favicon.ico必须在根目录中，可通过yourdomain.com/favicon.ico访问。
  • 忘记Apple Touch Icon — iOS为主屏幕书签图标使用单独的180×180 PNG。 请与favicon分开创建。