# 圖片轉 ICO 網站圖示、Windows 和 macOS 應用圖示

進去一張圖，出來的是瀏覽器、Windows 和 Mac 各自要的每一個尺寸。

> 在瀏覽器裡把 PNG、JPEG 或 SVG 做成一個真正多尺寸的 .ico，或者一個 macOS 的 .icns。網站圖示、Windows 應用圖示、Mac 應用圖示，加上網站需要的蘋果和安卓那幾個檔案。什麼都不上傳。

本頁是一個完全在你的瀏覽器裡執行的互動式工具，地址是 https://abox.tools/zh-TW/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-TW/guides/make-a-favicon/): favicon.ico 裡到底該裝哪幾個尺寸，iPhone、安卓和 Mac 另外要哪些檔案，以及為什麼一個在海報上好好的 logo，到了十六畫素就沒了。

## 工具箱裡還有

- [圖片轉 Data URI](https://abox.tools/zh-TW/image-to-data-uri/): 整張圖變成一行文字，直接貼進 CSS 或者 HTML。
- [SVG 轉圖片](https://abox.tools/zh-TW/svg-to-image/): 說個尺寸。向量圖本來就沒有尺寸可丟。
- [圖片轉 SVG](https://abox.tools/zh-TW/image-to-svg/): 一個形狀，一條輪廓。不該有的東西，點一下就好。
- [身高對比圖](https://abox.tools/zh-TW/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 送出去轉換的工具，拔線那一刻就停了。

## 這條隱私承諾怎麼核實

- **你的 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` 裡是頁面上每一個尺寸的來歷。