# 图片转 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` 里是页面上每一个尺寸的来历。