1 选一张图
2 说清楚这个图标干什么用
一个图标文件装的不是一张图，是好几张：同一个 logo，按读它的那个东西要的每个尺寸各画一遍。要哪几个尺寸，这不是口味问题。浏览器要三个，高分屏笔记本上的应用要十个，Mac 要它自己那十个，而 Windows Vista 之前的东西，还要求换一种完全不同的存法。
Windows 图标，.ico 浏览器拿它当 favicon，Windows 拿它做应用、快捷方式和文件夹的图标。尺寸在下面自己挑。
macOS 图标，.icns Mac 应用包里装的就是它。苹果定死了十个槽位，从 16 像素到 1024，没什么可挑的，十个全写进去，来自七次绘制，因为一个 Retina 槽位和上一档尺寸画的是同一张图。
网站图标套件的其余部分 .ico 管得了浏览器标签页和 Windows，管不了 iPhone 主屏、安卓的安装提示，也管不了钉在开始菜单上的磁贴。那三样读的是一张 180 像素的 PNG、一份 Web 应用 manifest 和一个 XML 文件，谁都不会去看 .ico 里面。勾上这个，这些全给你，外加 manifest 和一段可以粘进页面的 HTML。
3 按它真正被看到的大小检查一遍
下载之前，最值得看的就是这一步。一个 512 像素下清清楚楚的 logo，到了浏览器标签页上只有十六个像素宽，它身上细的那些部分，文字标的笔画、一根发丝般的描边、一段渐变，全都撑不过去。下面每一格，都是拿你选的那个文件按真实尺寸画出来的。
做好了
把这段粘进你的 <head>
# 图片转 ICO 网站图标、Windows 和 macOS 应用图标 进去一张图，出来的是浏览器、Windows 和 Mac 各自要的每一个尺寸。 > 在浏览器里把 PNG、JPEG 或 SVG 做成一个真正多尺寸的 .ico，或者一个 macOS 的 .icns。网站图标、Windows 应用图标、Mac 应用图标，加上网站需要的苹果和安卓那几个文件。什么都不上传。 这是一个浏览器交互工具，地址是 https://abox.tools/zh/image-to-ico/。文件在运行该浏览器的设备上处理。主动分享和可选联网功能都在页面上说明。下文是它的文字说明；使用工具请打开该地址。 ## 你的图片**在浏览器里处理**，无须上传处理。 缩放和图标文件本身，都在你自己的浏览器里做出来。画面由浏览器自带的画布绘制，Windows 的 `.ico` 和 macOS 的 `.icns` 这两种容器，则由 `src/ico.js` 和 `src/icns.js` 里两百来行你能读的代码，拿这些像素拼出来。这个工具没有任何联网功能，不取东西，也不发东西。就算真有，这个页面的另一头也没有服务器能接住一个 logo。 - ✗ 不上传 - ✗ 不注册 - ✗ 没有水印 - ✓ 断网能用 - ✓ 开源 ## 不上传怎么做一个 .ico 文件 1. **选图。** 把 PNG、JPEG、WebP 或者 SVG 拖到下面的方框里，也可以一次挑好几张一起转。方图最省事，边长 256 像素往上，细节就够所有尺寸用了。浏览器直接从你的硬盘上读，这期间没有东西发出去。 2. **挑你需要的文件。** Windows 和浏览器读 `.ico`；Mac 读 `.icns`，另一种它根本不看。要哪个勾哪个，两边都发就都勾上。网站还另外需要苹果、安卓和磁贴那几张图，那是第三个勾选框。 3. **说清楚这个图标是干什么用的。** 网站图标要 16、32、48 像素；Windows 应用还要 256；要在高分屏笔记本上也好看的应用，还得补上 Windows 在 125% 和 150% 缩放下要的那些中间尺寸。按用途挑一个预设，或者自己一个个勾。每个尺寸旁边都写着谁要它。`.icns` 没得挑，苹果定死了十个槽位，十个全写进去。 4. **处理形状和背景。** 图标是方的，而多数 logo 不是。留白是把整张图留住，上下垫空；裁切是取中间那块；拉伸就是硬挤成方的。透明照旧是透明，除非你给它挑一个衬底色。 5. **下载之前，先看那个 16 像素的。** 日常最常被看到的就是这个尺寸，细笔画和小字也正是在这儿消失的。预览里每一格都按真实尺寸、用你自己的文件画出来。最小那个要是糊成一团，该改的是画得更简单，而不是换个设置。 6. **把文件拿走。** 一个 .ico，每个尺寸都在里面。你要的是网站图标时，它就叫 `favicon.ico`，因为浏览器就照这个地址找。勾了 macOS 的话，旁边还有一个 .icns，直接放进 Mac 应用包就行。再勾上网站那一套，就还有苹果、安卓和 Windows 磁贴用的图、一份 manifest，以及一段可以直接粘进页面的 HTML。只要不止一个文件，就打成一个 zip 下来。 ## 说得更细的版本 [怎么做一个到十六像素还看得清的网站图标](https://abox.tools/zh/guides/make-a-favicon/): favicon.ico 里到底该装哪几个尺寸，iPhone、安卓和 Mac 另外要哪些文件，以及为什么一个在海报上好好的 logo，到了十六像素就没了。 ## 工具箱里还有 - [图片转 Data URI](https://abox.tools/zh/image-to-data-uri/): 整张图变成一行文本，直接粘进 CSS 或者 HTML。 - [SVG 转图片](https://abox.tools/zh/svg-to-image/): 说个尺寸。矢量图本来就没有尺寸可丢。 - [图片转 SVG](https://abox.tools/zh/image-to-svg/): 一个形状，一条轮廓。不该有的东西，点一下就好。 - [身高对比图](https://abox.tools/zh/compare-heights/): 把身高打进去，把图带走。为了画它，不会往外送任何东西。 ## 常见问题 ### 我的图片会传到什么地方去吗？ 不会。画面由你自己的浏览器在你自己的硬件上解码和缩放，.ico 则由这个页面发出的代码拿这些像素拼出来。这个工具没有任何联网功能，不取东西，也不发东西。页面的 `Content-Security-Policy` 把它可能联的地址全列了出来，没有一个是本站的。 ### favicon.ico 里应该装哪几个尺寸？ 16、32 和 48。这不是偏好问题：16 是浏览器在标签页上画的那个，32 是 Windows 桌面快捷方式用的、也是好几个浏览器书签用的，48 是 Google 读取站点图标时用的尺寸。更大的应该以 PNG 的形式放在 .ico 旁边，而不是塞进.ico 里，这里的网站套件生成的正是那些。 ### Windows 应用图标需要哪些尺寸？ 16、32、48 和 256，这也正是 Visual Studio 自带那个默认 app.ico 里装的。16 用于标题栏和资源管理器的小图标视图，32 用于桌面和任务栏，48 用于资源管理器的中等图标，256 用于开始菜单和超大图标。高分屏下 Windows 还会要 20、24、40、64 和 96，没有的话它就拿最接近的尺寸重采样，“各种缩放都覆盖”那个预设会把它们一并放进去。 ### 为什么出来的文件比原图还大？ 因为 .ico 装的不是一张图，是好几张，而且小尺寸那几张是不压缩存的，好让什么东西都读得了。一个 32×32 的条目，无论画的是什么，都正好 4264 字节；一个 256×256 的不压缩条目是 264 KB，所以 64 以上的尺寸默认按 PNG 存。选“所有尺寸都用 PNG”，得到的是最小的文件；选“所有尺寸都不压缩”，得到的是兼容性最好的那个。 ### PNG 条目和不压缩条目有什么区别？ 只是像素在 .ico 内部怎么存。不压缩条目是 Windows 最早那套做法，一个位图文件头、上下颠倒的像素，外加一位透明掩码，历史上任何一个版本的 Windows 都读得了。PNG 条目则是把一整个 PNG 文件塞进图标里，大尺寸下能小上三到十倍，但要 Windows Vista 之后才认。默认是各取所长：64 像素以内不压缩，更大的用 PNG。 ### 能做超过 256 像素的图标吗？ 不能，谁也不能。这个格式用一个字节存边长，而 0 另有含义，它表示 256。这就是天花板，所以一个装着 512 像素图像的 .ico 不是更大的图标，是个坏文件。真要 512，你要的是 PNG，网站那一套里就带着，给安卓和 Web 应用启动画面用。 ### 透明会保住吗？ 两种条目都保住，而且除了 alpha 通道，还会一并写上老式的一位掩码，好让那些老到读不懂 alpha 的软件仍然把图标抠出来，而不是画成一个黑方块。唯一故意做成不透明的是网站套件里的 Apple touch icon：iOS 会把它合到自己的磁贴上，透明会变成黑色，所以它被压平到你选的背景色上，默认是白色。 ### 我的 logo 是很宽的文字标，怎么办？ 总得动点手脚，因为图标是方的。留白能把整个东西留住，但会变得很小，一个文字标塞进 16 像素的方块里，高度大概只有三个像素，根本看不清。裁中间通常更管用：把组合标里的那个符号单独拿出来用，几乎每个品牌的 favicon 都是这么干的。哪种做法扛得住，下载之前预览里就看得见。 ### 网站套件里都有什么，我全都需要吗？ 七个 PNG、一份 Web 应用 manifest、一个 browserconfig.xml，还有一段可以直接粘的 HTML。需要，因为 .ico 只管得了浏览器和 Windows：iPhone 主屏读的是一张 180 像素、名字另有规定的 PNG，安卓和各种安装提示读的是 manifest，钉在开始菜单上的磁贴读的是那个 XML。这三样谁都不会去看 .ico 里面。这些全在你的机器上生成，zip 里还附了一份说明，写清每个文件是干什么的。 ### 能顺便做 macOS 的图标吗？ 能，勾上 *macOS 图标*，就在 `.ico` 旁边多一个 `.icns`，也可以只要它。同一件事换了个容器，两边互不认账：Windows 要 .ico，Mac 应用包要 .icns。那边的尺寸没得挑，因为苹果公开的就是十个槽位，16、32、64、128、256、512 和 1024 像素，其中三个会出现两次，充当下一档的 Retina 版本。十个全写进去，来自七次绘制，所以 .icns 是更大的那个文件。 ### .icns 文件怎么用？ 给应用用的话，放进包里的 `YourApp.app/Contents/Resources/`，并在 `Info.plist` 的 `CFBundleIconFile` 里写上名字，每个 Mac 打包工具都有这么个字段。别的用途就更简单：在访达里选中这个文件，按 Command-C，然后对着要换图标的文件夹或者磁盘映像“显示简介”，点左上角那个小图标，按 Command-V。 ### 这个 .icns 跟 iconutil 做出来的一样吗？ 十个槽位一样，四字母类型一样，每个槽位里装 PNG 也一样，这正是 `iconutil` 从一个 `.iconset` 文件夹生成出来的东西。有一处是故意不同的：苹果那个工具还会写一个 `TOC` 元素，也就是后面各元素类型和长度的索引。它属于优化，不是格式的必需部分，没有它的话读取方就从头到尾走一遍，得到的答案完全相同。而一个错的索引比没有索引更糟，所以干脆不写。 ### 能一次转好几张图吗？ 能。列表上每张图都按同一套设置生成自己的 .ico，整批打成一个 zip，一张图一个文件夹，不然其中两个都叫 favicon.ico，一个会把另一个盖掉。你勾了哪些输出，每张图就都做哪些。点任意一行，就能把那张图换进预览。 ### 免费吗？要注册吗？ 免费，没有账号，不用登录，没有试用期，也没有水印。文件的数量和大小同样没有上限，因为没有哪台服务器在为它们掏钱，活是在你自己的机器上干的。本站带广告，经费就是这么来的，广告拿不到关于你图片的任何信息。 ### 断网能用吗？ 能。页面开一次之后断网，它照干不误。这也是证明“什么都没上传”最省事的办法。一个把 logo 送出去转换的工具，拔线那一刻就停了。 ## 这条隐私承诺怎么核实 - **处理在这个浏览器里完成。** 本工具在浏览器里处理输入和结果，处理代码不把它们上传去处理。Content-Security-Policy 限制可用资源和连接目的地，但已允许的主机仍可接收请求。策略不检查载荷，不能单独证明什么都没有发出。请把具体操作的请求与源码核对，或断网完成该本地操作。 - **这里没有任何东西会去联网取数据。** 整个 `src/` 里，一个 `fetch`、一个 `XMLHttpRequest`、一个 `sendBeacon` 都找不到。缩放就是往画布上做一次 `drawImage`，每个图标则是 `src/ico.js` 或者 `src/icns.js` 在这个页面里，给那些像素前面加上一个文件头。 - **文件的说明，是从它自己的字节里读回来的。** 成品图标旁边列出的那串尺寸，不是你勾了什么就写什么，而是 `readIcoDirectory` 或 `readIcnsElements` 从刚写好的文件里重新读出来的。万一写入的结果跟设置对不上，页面当场就会说，不用等到 Windows 什么都不画、macOS 画出一张白纸的时候才发现。 - **Google 加载了什么，又拿不到什么。** 广告脚本和统计脚本来自 Google，捐助按钮来自 Buy Me a Coffee。关于你图片的信息，一条都没给它们。读文件、缩放、写文件的每一行代码都从本站发出，也都摆在仓库里。 - **断网照样能用。** 断开网络，这个工具跟原来一模一样，因为它本来就没有联网这一步。这是最省事的一条证明。 **你可以自己核对。**上面这些不用你信。这个页面是仓库里的模板和配置生成出来的，构建脚本你能读，也能自己跑一遍，跑出来的结果就提交在 `dist` 分支上。拿实际发给你的内容，跟你自己从源码构建出来的结果对一遍就知道了： https://github.com/A-Box-of-Tools/website 最值得先读的几个文件：`config/site.toml` 里是 Content-Security-Policy，`src/ico.js` 和 `src/icns.js` 里是那两种图标格式，前者是目录、条目和掩码，后者是苹果定死的十个槽位；`src/sizes.js` 里是页面上每一个尺寸的来历。
不上传怎么做一个 .ico 文件
- 选图。把 PNG、JPEG、WebP 或者 SVG 拖到下面的方框里，也可以一次挑好几张一起转。方图最省事，边长 256 像素往上，细节就够所有尺寸用了。浏览器直接从你的硬盘上读，这期间没有东西发出去。
- 挑你需要的文件。Windows 和浏览器读
.ico；Mac 读.icns，另一种它根本不看。要哪个勾哪个，两边都发就都勾上。网站还另外需要苹果、安卓和磁贴那几张图，那是第三个勾选框。 - 说清楚这个图标是干什么用的。网站图标要 16、32、48 像素；Windows 应用还要 256；要在高分屏笔记本上也好看的应用，还得补上 Windows 在 125% 和 150% 缩放下要的那些中间尺寸。按用途挑一个预设，或者自己一个个勾。每个尺寸旁边都写着谁要它。
.icns没得挑，苹果定死了十个槽位，十个全写进去。 - 处理形状和背景。图标是方的，而多数 logo 不是。留白是把整张图留住，上下垫空；裁切是取中间那块；拉伸就是硬挤成方的。透明照旧是透明，除非你给它挑一个衬底色。
- 下载之前，先看那个 16 像素的。日常最常被看到的就是这个尺寸，细笔画和小字也正是在这儿消失的。预览里每一格都按真实尺寸、用你自己的文件画出来。最小那个要是糊成一团，该改的是画得更简单，而不是换个设置。
- 把文件拿走。一个 .ico，每个尺寸都在里面。你要的是网站图标时，它就叫
favicon.ico，因为浏览器就照这个地址找。勾了 macOS 的话，旁边还有一个 .icns，直接放进 Mac 应用包就行。再勾上网站那一套，就还有苹果、安卓和 Windows 磁贴用的图、一份 manifest，以及一段可以直接粘进页面的 HTML。只要不止一个文件，就打成一个 zip 下来。
说得更细的版本
怎么做一个到十六像素还看得清的网站图标 favicon.ico 里到底该装哪几个尺寸，iPhone、安卓和 Mac 另外要哪些文件，以及为什么一个在海报上好好的 logo，到了十六像素就没了。
工具箱里还有
常见问题
我的图片会传到什么地方去吗？
不会。画面由你自己的浏览器在你自己的硬件上解码和缩放，.ico 则由这个页面发出的代码拿这些像素拼出来。这个工具没有任何联网功能，不取东西，也不发东西。页面的 Content-Security-Policy 把它可能联的地址全列了出来，没有一个是本站的。
favicon.ico 里应该装哪几个尺寸？
16、32 和 48。这不是偏好问题：16 是浏览器在标签页上画的那个，32 是 Windows 桌面快捷方式用的、也是好几个浏览器书签用的，48 是 Google 读取站点图标时用的尺寸。更大的应该以 PNG 的形式放在 .ico 旁边，而不是塞进.ico 里，这里的网站套件生成的正是那些。
Windows 应用图标需要哪些尺寸？
16、32、48 和 256，这也正是 Visual Studio 自带那个默认 app.ico 里装的。16 用于标题栏和资源管理器的小图标视图，32 用于桌面和任务栏，48 用于资源管理器的中等图标，256 用于开始菜单和超大图标。高分屏下 Windows 还会要 20、24、40、64 和 96，没有的话它就拿最接近的尺寸重采样，“各种缩放都覆盖”那个预设会把它们一并放进去。
为什么出来的文件比原图还大？
因为 .ico 装的不是一张图，是好几张，而且小尺寸那几张是不压缩存的，好让什么东西都读得了。一个 32×32 的条目，无论画的是什么，都正好 4264 字节；一个 256×256 的不压缩条目是 264 KB，所以 64 以上的尺寸默认按 PNG 存。选“所有尺寸都用 PNG”，得到的是最小的文件；选“所有尺寸都不压缩”，得到的是兼容性最好的那个。
PNG 条目和不压缩条目有什么区别？
只是像素在 .ico 内部怎么存。不压缩条目是 Windows 最早那套做法，一个位图文件头、上下颠倒的像素，外加一位透明掩码，历史上任何一个版本的 Windows 都读得了。PNG 条目则是把一整个 PNG 文件塞进图标里，大尺寸下能小上三到十倍，但要 Windows Vista 之后才认。默认是各取所长：64 像素以内不压缩，更大的用 PNG。
能做超过 256 像素的图标吗？
不能，谁也不能。这个格式用一个字节存边长，而 0 另有含义，它表示 256。这就是天花板，所以一个装着 512 像素图像的 .ico 不是更大的图标，是个坏文件。真要 512，你要的是 PNG，网站那一套里就带着，给安卓和 Web 应用启动画面用。
透明会保住吗？
两种条目都保住，而且除了 alpha 通道，还会一并写上老式的一位掩码，好让那些老到读不懂 alpha 的软件仍然把图标抠出来，而不是画成一个黑方块。唯一故意做成不透明的是网站套件里的 Apple touch icon：iOS 会把它合到自己的磁贴上，透明会变成黑色，所以它被压平到你选的背景色上，默认是白色。
我的 logo 是很宽的文字标，怎么办？
总得动点手脚，因为图标是方的。留白能把整个东西留住，但会变得很小，一个文字标塞进 16 像素的方块里，高度大概只有三个像素，根本看不清。裁中间通常更管用：把组合标里的那个符号单独拿出来用，几乎每个品牌的 favicon 都是这么干的。哪种做法扛得住，下载之前预览里就看得见。
网站套件里都有什么，我全都需要吗？
七个 PNG、一份 Web 应用 manifest、一个 browserconfig.xml，还有一段可以直接粘的 HTML。需要，因为 .ico 只管得了浏览器和 Windows：iPhone 主屏读的是一张 180 像素、名字另有规定的 PNG，安卓和各种安装提示读的是 manifest，钉在开始菜单上的磁贴读的是那个 XML。这三样谁都不会去看 .ico 里面。这些全在你的机器上生成，zip 里还附了一份说明，写清每个文件是干什么的。
能顺便做 macOS 的图标吗？
能，勾上 macOS 图标，就在 .ico 旁边多一个 .icns，也可以只要它。同一件事换了个容器，两边互不认账：Windows 要 .ico，Mac 应用包要 .icns。那边的尺寸没得挑，因为苹果公开的就是十个槽位，16、32、64、128、256、512 和 1024 像素，其中三个会出现两次，充当下一档的 Retina 版本。十个全写进去，来自七次绘制，所以 .icns 是更大的那个文件。
.icns 文件怎么用？
给应用用的话，放进包里的 YourApp.app/Contents/Resources/，并在 Info.plist 的 CFBundleIconFile 里写上名字，每个 Mac 打包工具都有这么个字段。别的用途就更简单：在访达里选中这个文件，按 Command-C，然后对着要换图标的文件夹或者磁盘映像“显示简介”，点左上角那个小图标，按 Command-V。
这个 .icns 跟 iconutil 做出来的一样吗？
十个槽位一样，四字母类型一样，每个槽位里装 PNG 也一样，这正是 iconutil 从一个 .iconset 文件夹生成出来的东西。有一处是故意不同的：苹果那个工具还会写一个 TOC 元素，也就是后面各元素类型和长度的索引。它属于优化，不是格式的必需部分，没有它的话读取方就从头到尾走一遍，得到的答案完全相同。而一个错的索引比没有索引更糟，所以干脆不写。
能一次转好几张图吗？
能。列表上每张图都按同一套设置生成自己的 .ico，整批打成一个 zip，一张图一个文件夹，不然其中两个都叫 favicon.ico，一个会把另一个盖掉。你勾了哪些输出，每张图就都做哪些。点任意一行，就能把那张图换进预览。
免费吗？要注册吗？
免费，没有账号，不用登录，没有试用期，也没有水印。文件的数量和大小同样没有上限，因为没有哪台服务器在为它们掏钱，活是在你自己的机器上干的。本站带广告，经费就是这么来的，广告拿不到关于你图片的任何信息。
断网能用吗？
能。页面开一次之后断网，它照干不误。这也是证明“什么都没上传”最省事的办法。一个把 logo 送出去转换的工具，拔线那一刻就停了。