# 怎麼做一個到十六畫素還看得清的網站圖示

網站圖示不是把 logo 縮小的一張圖。它是一組固定尺寸的圖，裝在一個多數人從沒開啟過的容器裡，而其中最小的那一張，才是所有人真正看到的。這一頁講你需要哪些尺寸、旁邊還得放哪些檔案，以及 logo 縮下去撐不住時該怎麼辦。

[開啟圖片轉 ICO](https://abox.tools/zh-TW/image-to-ico/): 進去一張圖，出來的是瀏覽器、Windows 和 Mac 各自要的每一個尺寸。

最後更新 2026年8月26日

## 先說結論

開啟[圖片轉 ICO](https://abox.tools/zh-TW/image-to-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` 旁邊，而不是塞進它裡面，為什麼，下面講手機那幾個檔案時會說。

![預設列表和每個預設包含的尺寸：網站圖示是十六、三十二和四十八畫素，下面是檔案裡將放進什麼的摘要。](https://abox.tools/screens/make-a-favicon/preset.webp)

一個 .ico 是個容器，這就是裡面裝什麼的清單。預設不過是通往瀏覽器真正會索取的那一組的近路。

## 十六畫素這道坎

這一段沒人會提前告訴你。十六畫素在普通螢幕上大約四毫米，一共 256 個點，比這句話裡的字還少。凡是為招牌、名片或者網站頁頭設計的東西，縮到這個尺寸幾乎沒有能活下來的。

按先後順序，消失的是這些：

- **文字。**一個文字標塞進方塊裡，高度大約三個畫素。它不會變成小字，它會變成一道灰槓。所以幾乎每個既有符號又有名字的公司，網站圖示都只用那個符號；而沒有符號的，就用單獨一個字母。
- **細線。**一個 512 畫素 logo 上的一畫素描邊，到十六畫素時是三十二分之一個畫素。它會渲染成邊上一層淡淡的灰霧，或者乾脆消失。
- **漸變和陰影。**根本沒有過渡的餘地。一層柔和的投影會變成一圈髒邊。
- **細節裡的細節。**一個「寫著字的文件」圖示，會變成一個方框加一團汙漬。

解決辦法不是某個設定，是另畫一張：一個簡化的標記，一兩個形狀，高對比，除了單個字元不要文字。有意識地按 32 或者 48 畫素去畫這一版，拿它當源圖。

工具能做的，是在你釋出之前把問題擺給你看。[圖片轉 ICO](https://abox.tools/zh-TW/image-to-ico/) 裡的預覽，每個尺寸都按螢幕上的真實大小畫出來，而這是判斷這件事唯一的辦法。一個十六畫素的圖示顯示成六十四畫素，看起來都很好，什麼都說明不了。

![一條預覽條，同一個標誌分別畫在十六、三十二、四十八、六十四和一百二十八畫素上。](https://abox.tools/screens/make-a-favicon/sizes.webp)

十六畫素的版本，就擺在你設計的那一版旁邊。標誌需不需要簡化，由這張圖說了算。

## 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](https://abox.tools/zh-TW/image-to-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](https://abox.tools/zh-TW/image-to-ico/) 裡勾上 *macOS 圖示*就能出一個，旁邊要不要 Windows 那個檔案隨你。兩個平臺都發的東西，兩個檔案都要，而且它們是同一趟裡、從同一張圖畫出來的。

## 檢查它到底生效了沒有

瀏覽器快取網站圖示的勁頭比快取別的什麼都大，所以「我傳上去了，可什麼都沒變」，通常是快取的事，不是你做錯了。重新去改檔案之前，先試兩件事：

- 直接開啟 `https://yoursite.com/favicon.ico`。檔案能下下來，說明它在那裡，你看到的是快取。要是 404，那就是沒放在根目錄。
- 用無痕視窗開啟你的站，那裡通常有自己獨立的圖示快取。

在 Windows 上，把 `.ico` 放進一個資料夾，然後在資源管理器裡切換檢視大小：小、中、大、超大分別從同一個檔案裡取不同的條目來畫，於是每一張你都能按系統實際顯示的樣子看到。

在 Mac 上，`.icns` 用預覽開啟，側邊會把每個槽位都列出來。訪達裡也有同樣的招：把它丟進一個資料夾，拖動檢視選項裡那個尺寸滑塊，就能看著它在裡面那幾張圖之間切換。

## 這些事一樣都不用上傳

縮放一張圖，瀏覽器做了很多年了；而一個 `.ico` 無非是六個位元組的檔案頭、每張圖十六個位元組的條目，然後就是那些圖。做它的過程裡沒有哪一步需要伺服器，這裡的工具也確實沒用：頁面的 `Content-Security-Policy` 把它可能聯的地址全列了出來，沒有一個是本站的。

這件事在這裡比在別處更值得在意。交給免費網站圖示產生器的那個 logo，相當多的時候屬於還沒釋出的品牌，圖示往往是最早做出來的東西之一，也是最晚公佈的東西之一。與其聽我們說，不如把頁面開啟，拔掉網線，照做一個試試。[把檔案傳給線上轉換器安全嗎？](https://abox.tools/zh-TW/guides/is-it-safe-to-upload-files/)裡還有另外三個檢查，用在任何工具上都管用。