這個頁面的程式碼沒跑起來。

直接從資料夾裡開啟 index.html,瀏覽器會攔下 JavaScript 模組,於是你選好圖片之後,頁面不會有任何反應。改用 http 把這個資料夾提供出去:

powershell -ExecutionPolicy Bypass -File serve.ps1

然後開啟 http://localhost:8080/。

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

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

語言: 繁體中文
檢視原始碼
你的圖片不會上傳。這裡根本沒有伺服器。

縮放和圖示檔案本身,都在你自己的瀏覽器裡做出來。畫面由瀏覽器內建的畫布繪製,Windows 的 .ico 和 macOS 的 .icns 這兩種容器,則由 src/ico.js 和 src/icns.js 裡兩百來行你能讀的程式碼,拿這些畫素拼出來。這個工具沒有任何聯網功能,不取東西,也不發東西。就算真有,這個頁面的另一頭也沒有伺服器能接住一個 logo。

即時檢查: 檢查中…

離線: 檢查中…

別信我們嘴上說的。開啟開發者工具,盯著「網路」面板,做一個圖示試試。沒有一條請求帶著圖片、縮圖、檔名,或者你選中內容裡的任何一個位元組。或者乾脆拔掉網線,照做不誤。

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。

要做什麼

.ico 裡裝哪些尺寸

畫法

3 按它真正被看到的大小檢查一遍

下載之前,最值得看的就是這一步。一個 512 畫素下清清楚楚的 logo,到了瀏覽器分頁上只有十六個畫素寬,它身上細的那些部分,文字標的筆畫、一根髮絲般的描邊、一段漸變,全都撐不過去。下面每一格,都是拿你選的那個檔案按真實尺寸畫出來的。

以 Markdown 檢視

不上傳怎麼做一個 .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 下來。

說得更細的版本

怎麼做一個到十六畫素還看得清的網站圖示 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 送出去轉換的工具,拔線那一刻就停了。