PNG 转 ICO 与 favicon 生成器
把 PNG 或 Logo 拖到本页任意位置,即可下载一个包含 16 到 256 px 所有尺寸的 .ico 文件,或包含应用图标、Web 应用清单和 HTML 标签的完整 favicon 套件。
试试
已经有文件了?
- 免费,无需注册
- .ico 和 16 到 512 px 的 PNG
- Apple touch icon
- Web 应用清单
松开即可打开 Logo
继续免费查找 Logo
该网站的更多图片
点击某个 Logo,可换成在该网站上找到的下一个,或将其移除。
把这个 Logo 变成 3D
适用于 Reels、TikTok 和 YouTube 的 3D Logo 动画视频、光泽感 3D 图片和 3D 打印文件,在浏览器中几秒钟即可生成。
实际效果
如何把 PNG 转成 ICO
拖入文件、检查图标、下载。图片在您的浏览器中转换,免费,无需账户。
拖入 PNG
把 PNG、JPG、WebP 或 SVG 拖到页面任意位置,或点击搜索框下方的拖入您自己的 Logo。要为已有图标的公司制作图标?输入它的网址,工具会取回它正在使用的图标。
以图标形式检查
图片会居中放在方形画布上(每个图标位置都要求方形),您可以在浏览器标签页中看到它实际 16 px 的效果,也能看到它作为手机应用图标的样子。
下载 ICO
点击 ICO,得到一个包含 16、24、32、48、64、128 和 256 px 的 .ico 文件;或点击 favicon,得到打包成一个 ZIP 的完整网站图标套件。
投入使用
把套件复制到您的网站,再粘贴现成的 HTML 代码行;或者让 Windows 快捷方式、文件夹或应用使用这个 .ico。
.ico 中的每种尺寸及其显示位置
ICO 是一个图标盒:一个文件里装着同一张图的多种尺寸,每个显示位置都能挑到最合适的那一个。
| 尺寸 | 显示位置 |
|---|---|
| 16 × 16 px | 浏览器标签页和书签;Windows 标题栏、右键菜单和系统托盘 |
| 24 × 24 px | Windows 任务栏、搜索结果和开始菜单的应用列表 |
| 32 × 32 px | 高分辨率屏幕上的标签页;Windows 开始菜单中固定的应用 |
| 48 × 48 px | 高分辨率屏幕上的任务栏;150% 显示缩放下的开始菜单固定项 |
| 64 × 64 px | 高分辨率屏幕上的开始菜单固定项和标题栏 |
| 128 × 128 px | 为 Windows 在大屏幕上生成中间尺寸的图标提供尺寸相近的源图 |
| 256 × 256 px | 最高显示缩放下的开始菜单固定项,也是 Windows 缩小生成所有更小尺寸的母版 |
MDN 的图片类型指南介绍了 ICO 文件“可以包含多个图标”,最大可达 256 × 256 px。Microsoft 的图标指南列出了 Windows 绘制每种尺寸的位置,并要求应用“至少提供 16 × 16、24 × 24、32 × 32、48 × 48 和 256 × 256”;下载的 ICO 全部包含,另有 64 和 128 px 用于中间尺寸。
favicon 套件逐个文件详解
网站所需的全部图标,都由一张图片生成,打包在一个 ZIP 中。
| 文件 | 说明 | 作用 |
|---|---|---|
| favicon.ico | 包含 16、32 和 48 px 的图标文件 | 浏览器在网站根目录查找的图标 |
| icon-256.ico | 全部尺寸:16、24、32、48、64、128 和 256 px | Windows 应用、桌面快捷方式和文件夹图标 |
| favicon-16x16.png、favicon-32x32.png、favicon-48x48.png | 透明背景的小方形 PNG | 浏览器标签页、书签和快捷方式 |
| favicon.svg | 矢量格式的图标(您的 Logo 有矢量版本时提供) | 在支持 SVG 图标的浏览器中,标签页图标任意尺寸都清晰 |
| apple-touch-icon.png | 180 × 180 px,白色背景,四周略留空白 | iPhone 和 iPad 主屏幕 |
| android-chrome-192x192.png、android-chrome-512x512.png | Web 应用图标 | Android 主屏幕、已安装的 Web 应用及其启动画面 |
| site.webmanifest | 列出应用图标的小型文本文件 | 让手机和浏览器把您的网站安装为应用 |
| add-to-your-head.html | 放进页面头部的代码行 | 复制粘贴,一次链接所有图标 |
180 px 的 Apple touch icon 是 Apple 的 Safari Web 内容指南(存档版)中规定的 iPhone 尺寸;正如 web.dev 所解释的,Chromium 内核浏览器在把网站安装为应用之前,会在清单中查找 192 和 512 px 的图标。
添加到网站:HTML 代码,直接粘贴
把套件复制到网站的根文件夹,再把四行代码粘贴到每个页面的头部。
套件中的 add-to-your-head.html 包含以下代码行;如果您的 Logo 是矢量图,还会包含 SVG 图标:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">如果 Logo 是图片,第二行则改为指向 32 px 的 PNG:
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">Google 搜索找到您的 favicon 时,会把它显示在您的网页旁边。Google 的指南要求图标为方形,至少 8 × 8 px,建议大于 48 × 48 px,并且 Googlebot 必须能够抓取首页和图标文件。
下载前先看实际尺寸效果
favicon 的好坏要在 16 像素下评判。预览会按这个尺寸显示您的图标,让您一次就选对图片。
在大图预览旁边,样机会展示您的图标在浏览器标签页中和作为手机应用图标的样子,以及完整 Logo 在浅色和深色网站页头中的效果。在标签页尺寸下糊成一团的细节,在这里就能发现,远在访客看到之前。
小图标适合简单的形状。在 16 px 下,图形或单个字母能看清,完整的公司名称却不行,所以裁剪到标志部分,或用 Logo 改色工具做一个醒目、干净的版本,它还能生成用于深色标签页的白色 favicon。
Windows 应用、文件夹和桌面图标
同一个 .ico 能让 Windows 快捷方式、文件夹或应用在每种尺寸下都有清晰的图标,从标题栏到开始菜单。
快捷方式。右键点击快捷方式,选择属性,再点击更改图标,然后浏览到您的 .ico。
文件夹。右键点击文件夹,选择属性,打开自定义选项卡,然后点击更改图标。
您正在开发的应用。把 .ico 交给开发人员,或放进应用的构建设置。由于其中包含 256 px 的图标,Windows 会把它缩小到每个更小的位置,而不是把小图标拉大,所以在高分辨率屏幕上也清晰锐利。
更多免费图标与 Logo 工具
- PNG 转 SVG矢量标志,任意尺寸都清晰
- 3D Logo 制作把同一个 Logo 做成 3D 图片或视频
- Logo 动画制作八种配乐 3D 动画
- Logo 片头制作用作视频片头的 3D Logo 演绎
- 旋转 Logo GIF 制作无缝 3D 旋转,做成循环 GIF
- Logo 转 STL 和 3MF把任意 Logo 转成 3D 打印文件
- SVG 转 STL把矢量图转成 3D 打印文件
- PNG 转 STL把图片转成 3D 打印文件
- 如何制作 3D Logo让平面 Logo 变立体的四种方法
- 如何制作 Logo 动画适配各平台的动效、声音和尺寸
- 如何 3D 打印 Logo尺寸、颜色、切片软件与问题排查
- Logo 转 SVG把 Logo 转成矢量图,用于印刷和切割
如何把 PNG 转成 ICO?
把 PNG 拖到本页任意位置,或点击“拖入您自己的 Logo”。它会以方形图标打开;点击“ICO”,得到一个包含 16、24、32、48、64、128 和 256 px 的 .ico 文件,或点击“favicon”,得到完整的网站图标套件。免费,全部在您的浏览器中完成。
favicon.ico 应该包含哪些尺寸?
对于网站,16、32 和 48 px 就能覆盖标签页、书签和高分辨率屏幕,套件中的 favicon.ico 正好包含这三种尺寸。对于 Windows 应用或桌面图标,Microsoft 要求至少提供 16、24、32、48 和 256 px,下载的 ICO 全部包含,另有 64 和 128 px。
如何用我的 Logo 制作 favicon?
把 Logo 拖到本页。它会居中放在方形画布上(每个图标位置都要求方形),下载 favicon 套件之前,您就能看到它在浏览器标签页中和作为应用图标的样子。在 16 px 下,Logo 中的图形或首字母最易辨认。
网站还需要 favicon.ico 吗?
非常值得保留。浏览器仍会向网站请求 /favicon.ico,Google 搜索接受 ICO 文件,而且一个 ICO 能容纳多种尺寸。主流浏览器也会读取页面头部链接的 PNG 和 SVG 图标,套件两者都提供。
如何把 favicon 添加到我的网站?
把套件中的文件复制到网站的根文件夹(首页所在的位置),再把 add-to-your-head.html 中的代码行粘贴到每个页面的头部。如果使用建站工具或网店平台,在网站图标设置中上传 512 px 的 PNG 即可。
可以用 PNG 制作 256 px 的 Windows 图标吗?
可以。下载的 ICO 包含 16、24、32、48、64、128 和 256 px。Microsoft 指出,有了 256 px 的图标,Windows 只会缩小、不会放大您的图标,所以每种尺寸都清晰。从至少 256 px 宽的 PNG 或矢量 Logo 开始即可。
favicon 最佳尺寸是多少?
是一组尺寸,而不是单一尺寸:favicon.ico 中的 16、32 和 48 px,180 px 的 Apple touch icon,以及 Web 应用清单所用的 192 和 512 px 图标。Google 建议用于搜索的 favicon 为大于 48 × 48 px 的方形。套件用一个文件就能生成全部尺寸。
这款工具对您有多大帮助?