Command Palette

Search for a command to run...

PN

PNG 转 ICO 转换器

在浏览器中将 PNG 图片批量转换为 ICO 图标(favicon)

赞助Toolz.dev 所用的主机Hostinger Partner
用 Hostinger 让你的网站上线
  • 免费域名
  • 免费 SSL
  • 30 天退款保证
Trustpilot 评分 4.6,超过 73,000 条评价
领取优惠 优惠码

什么是 PNG 转 ICO 转换器?

PNG 转 ICO 转换器会把 PNG 图片按你指定的每个尺寸生成一份正方形副本,并打包进同一个 .ico 文件。这正是大多数人第一次操作时容易搞错的地方:.ico 不是换了个特殊扩展名的单张图片,而是一个小型容器,开头有一个目录,列出其中每张图片以及各自的起始位置。无论是浏览器绘制标签页图标,还是桌面绘制快捷方式,读取文件时都会查看这个目录,并选取最接近所需尺寸的条目。

本页会写入四种尺寸,打开页面时默认全部勾选:16、32、48 和 256 像素。每个勾选的尺寸都会成为 .ico 内的一张正方形图像,以保留 Alpha 通道的 PNG 压缩格式存储,并按从小到大的顺序写入。取消不需要的尺寸,文件就会变小。如果四个全部取消,转换器会退回到写入全部四种尺寸,因为空图标不是有用的文件。256 的上限是格式本身决定的,而不是工具的限制:ICO 目录条目用一个字节记录宽度,所以 256 是 .ico 能容纳的最大图像尺寸,并且会以特殊值 0 存储。

请从一张方形 PNG 开始,且其尺寸至少要不小于你勾选的最大尺寸。转换器会把图片缩小到每个正方形尺寸,而缩小的效果是好看的。如果源图只有 64 px 却勾选了 256,那么 256 的条目就是把 64 px 图像放大四倍,在高 DPI 屏幕上显示时会模糊、有色块。用设计工具导出一张 512x512 的图片,就足以应对所有情况,还有富余。

非方形徽标是另一个常见问题。转换器会把图片拉伸以填满每个正方形,而不是任由其溢出或自行猜测裁剪,并且会明确告诉你:拖入一张 1024x256 的文字标志,该行会显示“图片尺寸为 1024x256,因此已拉伸为 16、32、48、256 px 的正方形。”无论如何,拉伸后的文字标志在 16 px 时根本看不清。解决办法是在转换前就想好小尺寸应该显示什么,而不是转换之后。通常的做法是只裁剪出单独的图形符号,或者把文字标志放到带透明边距的方形画布上,这样既能保持比例,又只是在图标里显得小一些。

下面是一次完整的操作。拿一个名为 logo.png 的 512x512 文件,保持四个复选框全部勾选,然后拖进来。它会立即转换:该行显示输入大小、一个箭头、输出大小和大小变化,下方有提示“包含 16、32、48、256 px 图标。”,点击该行的下载图标会保存 logo.ico。取消勾选 256,文件会自动重新转换:同一个源文件现在生成一个轻得多、包含三个图像的文件,因为 256 px 那一项占了大部分体积。一起拖入八个品牌 PNG,“全部下载(8 张图片)”会生成包含所有 .ico 文件的 converted-ico.zip,重复的名字会被编号,而不是互相覆盖。

一切都在客户端运行。你的浏览器会解码 PNG,在画布上按每个所需尺寸绘制,将每个正方形编码为 PNG,并在内存中组装成 .ico,因此图片不会离开你的设备,页面加载完成后即使断开网络也能继续使用。每种尺寸都会保留透明度,背后不会填充任何颜色。源文件附带的元数据和颜色配置文件会在画布处理步骤中被丢弃。超过 100 兆像素的图片会被拒绝并给出提示,空文件也会被拒绝,文件字节大小没有上限。该工具免费,无需注册,每日转换次数有限制。

如何将 PNG 转换为 ICO

  1. 添加 PNG 文件

    将 PNG 图片拖到标有“将 PNG 图片拖放到此处或点击上传”的区域,或点击该区域选择文件。每个文件一添加就会开始转换。边长 256 px 或更大的方形源图在各种图标尺寸下效果最佳。

  2. 选择图标尺寸

    在“图标尺寸”下,勾选你想放进 .ico 的正方形尺寸:16px、32px、48px 和 256px 默认都已勾选。每勾选一项,文件里就多一张图像,勾选或取消勾选任何一项都会让所有已添加的文件重新转换。

  3. 检查每个结果

    每一行都会显示缩略图、状态、带有大小变化的大小信息,以及列出已写入尺寸的说明。如果非方形图片不得不被拉伸成正方形,还会显示警告和真实尺寸。点击缩略图可查看放大的图标,并对比转换前后的效果。

  4. 下载图标

    点击某一行的下载图标可保存单个文件,或点击列表标题处的“全部下载(n 张图片)”,它会保存包含整批文件的 converted-ico.zip。

为什么要将 PNG 转换为 ICO?

如今很多地方都可以直接使用普通 PNG 作为图标,所以不妨问一句:为什么还值得制作这种较旧的容器格式?有三种场景仍然需要真正的 .ico 文件。

放在网站根目录的 favicon.ico

当页面没有声明图标时,浏览器和许多其他显示网站图标的工具会去请求 /favicon.ico。该地址上的一个 .ico 文件就能满足所有这些请求,而且因为它包含多种尺寸,所以在标签页、书签栏和固定的快捷方式中都显示得恰到好处。

Windows 快捷方式、文件夹和安装程序

Windows 会读取 .ico 文件,用作快捷方式图标、自定义文件夹图标以及应用程序内嵌的图标。它会选取与当前视图匹配的条目,因此同一个文件既能用于小图标列表视图,也能用于超大图标视图。单独一张 PNG 做不到这一点。

保留设计导出文件中的透明度

从设计工具导出的徽标通常是背景透明的 PNG,这正是正确的起点。这里写入的每种尺寸都以 PNG 形式存放在容器内,所以无论是 16 px 还是 256 px,透明背景都会保留下来。如果你手上的是照片呢?JPG 转 ICO 转换器可以处理这种情况,不过 JPG 本身不带透明度。

PNG 与 ICO:该用哪个

PNG 与 ICO 作为图标格式的对比
特性PNGICO
文件包含的内容一张图片。多张方形图像,每种尺寸一张,并带有列出它们的目录。
压缩方式无损。取决于每个条目。本页将每个条目都存储为无损 PNG。
透明度完整的 Alpha 通道。32 位和 PNG 条目支持完整的 Alpha 通道,本页写入的正是这种。
动画标准 PNG 不支持。不支持。
最大图像远超图标所需的任何尺寸。每个条目 256 x 256 像素。
典型文件大小单个图标尺寸的图像,文件较小。较大,因为包含每一种尺寸。256 px 的条目占了大部分体积。
浏览器和软件支持所有浏览器和编辑器都支持。当前的浏览器接受将其用作 favicon。所有浏览器都支持将其用作 favicon,Windows 则用于快捷方式和应用程序图标。
最适合艺术作品、网页图片,以及通过 link 标签声明的图标。favicon.ico、Windows 图标,以及任何需要一个文件涵盖多种尺寸的场合。

Favicon 尺寸详解

.ico 内的每种尺寸之所以存在,是因为总有地方会以大致这个尺寸绘制图标。具体哪个程序使用哪个条目,会因浏览器、操作系统和显示缩放而异,所以请把下面的列表当作常见情况,而不是硬性规定。

各 ICO 尺寸的常见用途
尺寸常见用途
16 px标准显示器上的浏览器标签页、地址栏和书签列表。
32 px高密度显示器上的浏览器标签页,以及 Windows 中的任务栏和快捷方式图标。
48 pxWindows 中的桌面快捷方式和中等图标视图。
256 px大图标和超大图标视图,以及超高密度屏幕。

最需要用心的是小尺寸图标,因为人们一整天看到的就是它们,细节也最先在这里丢失。带有文字标志、细线轮廓或标语的徽标,通常需要为 16 px 和 32 px 准备更简单的版本:只保留图形符号,笔画要粗到即使只有几个像素宽也不会消失。

手机的触控图标(Touch Icon)是单独的文件。例如 iPhone 主屏幕快捷方式要用更大的 PNG,并通过专门的 link 标签声明,.ico 无法代替它。

隐私与安全

  • 调整大小和打包都在客户端完成,使用的是浏览器的 Canvas API。PNG 和生成的 .ico 文件都不会离开当前标签页。
  • 尚未发布的徽标或品牌标志,无需交给第三方服务即可转换。
  • 每日用量检查会发送文件数量、总字节数和目标格式,不包含文件名和图像像素。
  • PNG 中的元数据和色彩配置文件不会复制到图标条目中。
  • 生成的图标会保存在内存中,直到您将其移除、点击“全部清除”或关闭标签页,服务器上不会保留任何副本。

主要功能

  • 一个文件包含四种图标尺寸

    16、32、48 和 256 px,每种尺寸都是 .ico 内部的一张独立图像。只勾选您需要的尺寸,其余的不会写入

  • 带 Alpha 通道的 PNG 压缩条目

    每个方形图像都以 32 位 PNG 的形式存放在容器内,因此透明徽标在每种尺寸下都保持透明,背后不会填充任何背景

  • 非方形源图提示

    文字标志或横幅图会被拉伸以填满方形,列表行会显示原始尺寸,方便您返回裁剪或补边,而不是直接得到一个被压扁的图标

  • 批量转换并打包为 ZIP

    一次添加整套品牌 PNG,并以 converted-ico.zip 的形式打包下载,同名文件会自动编号而不是互相覆盖

常见问题

把 PNG 拖到本页的上传框中,待该文件行显示“完成”后下载 .ico 即可。保持勾选“图标尺寸”选项时,文件一添加,浏览器就会按每种尺寸绘制图像并在本地合成 .ico,无需点击任何按钮。无需安装任何软件,也不会上传任何内容。

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

png to icopng to ico filepng to ico converterconvert png to icopng to ico generatorchange png to icopng to ico formatconvert png to favicon icohow to convert png to icohow to save png as icofree online png to ico converter