先說結論
開啟圖片轉 ICO，丟一張至少 256 畫素的方圖進去，預設保持網站圖示，下載 favicon.ico。把它放在網站根目錄，讓 https://yoursite.com/favicon.ico 這個地址能應答。不管你的 HTML 裡提沒提它，每個瀏覽器都會去要這個地址，所以嚴格來說，別的什麼都不用做。
下面講的，是「技術上有這個圖示」和「這個圖示看得清」之間的差距：裡面該裝哪些尺寸、iPhone 和安卓另外要什麼，以及你的 logo 縮到十六畫素寬撐不住時該怎麼辦。
為什麼是一組尺寸，而不是一張圖
.ico 是個容器。裡面裝著同一樣東西在不同尺寸下的好幾張完整的圖，讀它的那個東西挑離自己需要最近的那一張。
聽起來像冗餘，其實不是。一個要按十六畫素畫你圖示的瀏覽器有兩條路：讀一張你親手畫的十六畫素版本，或者當場把一張更大的縮下去。第二條更差，而且差得看得見，一個細節豐富的 logo 自動縮小之後就是一團糊，而一張你親眼看過的十六畫素版本，你至少有機會把它簡化。這個格式裝好幾個尺寸的全部意義，就是給你這個機會。
網站的慣例是三個尺寸，每個都有來由：
- 16×16，瀏覽器分頁、位址列、書籤選單。這是人們真正看到的那一個。四個裡你只保得住一個，就保它。
- 32×32，書籤欄、指向你網站的 Windows 桌面快捷方式，以及高解析度螢幕上的多數瀏覽器，它們是拿 32 縮下去畫分頁圖示的。
- 48×48，Google 在搜尋結果裡讀網站圖示用的尺寸，也是 Windows 的中等圖示檢視。
比這更大的，該以 PNG 的形式放在 .ico 旁邊，而不是塞進它裡面，為什麼，下面講手機那幾個檔案時會說。
十六畫素這道坎
這一段沒人會提前告訴你。十六畫素在普通螢幕上大約四毫米，一共 256 個點，比這句話裡的字還少。凡是為招牌、名片或者網站頁頭設計的東西，縮到這個尺寸幾乎沒有能活下來的。
按先後順序，消失的是這些：
- 文字。一個文字標塞進方塊裡，高度大約三個畫素。它不會變成小字，它會變成一道灰槓。所以幾乎每個既有符號又有名字的公司，網站圖示都只用那個符號；而沒有符號的，就用單獨一個字母。
- 細線。一個 512 畫素 logo 上的一畫素描邊，到十六畫素時是三十二分之一個畫素。它會渲染成邊上一層淡淡的灰霧，或者乾脆消失。
- 漸變和陰影。根本沒有過渡的餘地。一層柔和的投影會變成一圈髒邊。
- 細節裡的細節。一個「寫著字的文件」圖示，會變成一個方框加一團汙漬。
解決辦法不是某個設定，是另畫一張：一個簡化的標記，一兩個形狀，高對比，除了單個字元不要文字。有意識地按 32 或者 48 畫素去畫這一版，拿它當源圖。
工具能做的，是在你釋出之前把問題擺給你看。圖片轉 ICO 裡的預覽，每個尺寸都按螢幕上的真實大小畫出來，而這是判斷這件事唯一的辦法。一個十六畫素的圖示顯示成六十四畫素，看起來都很好，什麼都說明不了。
logo 不是方的，該留白還是該裁？
圖示永遠是方的，而多數 logo 不是，所以總得動點手腳。三種答案，好壞不等。
留白把整張圖留住，上下墊空。這是穩妥的預設選項，對一個橫長的文字標卻是錯的：一個寬是高三倍的東西放進方塊裡，只佔到三分之一的高度，在十六畫素下，就是五個畫素的 logo 加十一個畫素的空。
裁中間取正中最大的那個方塊。對一個組合標，也就是符號旁邊跟著公司名的那種，這一刀往往兩邊都切著。更好的辦法是自己先把源圖裁到只剩那個符號，再拿去轉。
拉伸把畫面擠成方的。幾乎沒有哪種情況下它是對的，之所以還提供，主要是為了讓工具不至於一聲不吭就替你這麼做。
橫長 logo 的通用答案是：別拿整個 logo 去轉。拿它身上單獨拎出來也立得住的那一塊去轉。
透明還是純色底？
網站圖示一般該用透明。瀏覽器標籤欄因瀏覽器和主題不同，可能是灰的、白的或者近黑的，而一個透明圖示在哪一種上都待得住。一個把白底畫進去的圖示，在深色標籤欄裡就是一個白方塊。
有兩個例外值得知道：
- 純深色、別的什麼都沒有的 logo，在深色模式下會消失。你的標記本來就是白底黑圖的話，給它配個彩色底，而不是透明底，或者加一圈淺色描邊。
- Apple touch icon 必須不透明。iOS 會把它畫在自己那個圓角磁貼上，透明會被渲染成黑色。凡是能產生這個檔案的工具，都該替你把它壓平，這裡的這個會，預設壓到白色上。
一個網站需要的、.ico 之外的那些檔案
favicon.ico 管得了瀏覽器和 Windows，管不了手機，而多數自己動手做的圖示套件，就停在這裡了。另外三個平臺各要各的檔案，各有各的名字，而且它們誰都不會去看 .ico 裡面：
- iOS 在有人把你的站新增到主屏時，讀 180×180 的
apple-touch-icon.png。沒有它，iOS 就拿頁面截圖頂上，看起來像出了什麼差錯。 - 安卓和各種安裝提示讀的是 Web 應用 manifest，也就是
site.webmanifest，它指向 192 和 512 畫素的 PNG。那個 512 也是 Web 應用啟動畫面上顯示的那張。 - Windows 開始選單磁貼讀
browserconfig.xml，它指向一張 150×150 的 PNG。三者裡最不要緊的一個，也就四行 XML。
還有一個特別容易做錯：安卓的啟動器會把自適應圖示裁成手機喜歡的形狀，圓形、方圓形、圓角方形都有可能，而只有畫面中間那 80% 是保證留得住的。一張畫得頂到邊的圖示會被削掉四角。所謂 maskable 圖示就是這麼回事：同一張圖，有意識地在方塊裡畫小一圈，並在 manifest 裡單獨宣告。
在圖片轉 ICO 裡勾上網站套件，這些、manifest，還有指向它們的那段 HTML，全都給你。那段 HTML 裡有一樣是故意不寫的：favicon.ico 的 <link>。瀏覽器本來就會自己去要那個地址，再寫一遍，等於同一個檔案被取兩次。
Windows 應用圖示是另一套尺寸
圖示要是給程式用而不是給網站用，尺寸就變了。Visual Studio 內建那個預設 app.ico 裡裝的是 16、32、48 和 256，也就是三個外殼尺寸，加上開始選單和資源管理器超大圖示檢視要用的那個大的。
高解析度螢幕下 Windows 還會要 20、24、40、64 和 96，缺了就拿最接近的尺寸重取樣。這要不要緊，取決於你的圖示：形狀扁平的挺得過重取樣，細節多的挺不過。把它們加上，檔案大約翻一倍，而對一個應用來說這根本不算什麼。這筆帳跟網站圖示完全是兩回事，網站圖示是每個訪客都要取一次的。
關於體積還有一點：位元組都壓在那個 256 的條目上。不壓縮存，它自己就 264 KB；在圖示裡按 PNG 存，通常不到 30。PNG 條目從 Windows Vista 起就讀得了，所以不用它的唯一理由，是軟體真的比那還老，或者是某個自己解析圖示的安裝程式、嵌入式工具。
Mac 讀的完全是另一個檔案
圖示要是給 Mac 應用而不是 Windows 應用用的，上面那些一條都不適用：macOS 根本不讀 .ico。它讀 .icns，換了個殼的同一個思路，一個容器裡裝好幾個尺寸，有三點不同值得知道。
- 尺寸是定死的。蘋果公開的就是十個槽位，沒什麼可挑：16、32、64、128、256、512 和 1024 畫素，其中 32、256 和 512 各出現兩次，因為它們既是自己那一檔，又是下一檔的 Retina 版本。
- 它一直做到 1024。
.ico到 256 就封頂了，所以一個 Mac 圖示檔案動輒幾百 KB，而一個網站圖示只有十幾 KB。對一個只發布一次的應用，這不算什麼；只有網站圖示才是每個訪客都要取的。 - 1024 畫素是你的圖稿必須扛得住的尺寸。這兩個問題是同一張圖的兩端：網站圖示得在極小時還能用，Mac 圖示得在極大時還立得住。一個按 512 匯出、再吹到 1024 的 logo，在 Retina 屏上發糊，App Store 也不收。
怎麼用：應用包把它放在 YourApp.app/Contents/Resources/，並在 Info.plist 裡寫上名字。給資料夾或者磁碟映像換圖示，就在訪達裡選中那個 .icns，按 Command-C，然後對著要換的東西「顯示簡介」，點左上角那個小圖示，按 Command-V。
在圖片轉 ICO 裡勾上 macOS 圖示就能出一個，旁邊要不要 Windows 那個檔案隨你。兩個平臺都發的東西，兩個檔案都要，而且它們是同一趟裡、從同一張圖畫出來的。
檢查它到底生效了沒有
瀏覽器快取網站圖示的勁頭比快取別的什麼都大，所以「我傳上去了，可什麼都沒變」，通常是快取的事，不是你做錯了。重新去改檔案之前，先試兩件事：
- 直接開啟
https://yoursite.com/favicon.ico。檔案能下下來，說明它在那裡，你看到的是快取。要是 404，那就是沒放在根目錄。 - 用無痕視窗開啟你的站，那裡通常有自己獨立的圖示快取。
在 Windows 上，把 .ico 放進一個資料夾，然後在資源管理器裡切換檢視大小：小、中、大、超大分別從同一個檔案裡取不同的條目來畫，於是每一張你都能按系統實際顯示的樣子看到。
在 Mac 上，.icns 用預覽開啟，側邊會把每個槽位都列出來。訪達裡也有同樣的招：把它丟進一個資料夾，拖動檢視選項裡那個尺寸滑塊，就能看著它在裡面那幾張圖之間切換。
這些事一樣都不用上傳
縮放一張圖，瀏覽器做了很多年了；而一個 .ico 無非是六個位元組的檔案頭、每張圖十六個位元組的條目，然後就是那些圖。做它的過程裡沒有哪一步需要伺服器，這裡的工具也確實沒用：頁面的 Content-Security-Policy 把它可能聯的地址全列了出來，沒有一個是本站的。
這件事在這裡比在別處更值得在意。交給免費網站圖示產生器的那個 logo，相當多的時候屬於還沒釋出的品牌，圖示往往是最早做出來的東西之一，也是最晚公佈的東西之一。與其聽我們說，不如把頁面開啟，拔掉網線，照做一個試試。把檔案傳給線上轉換器安全嗎？裡還有另外三個檢查，用在任何工具上都管用。