國慶閱兵典禮上，一面國旗能做到比遊覽車車身還大，紅底黃色的圖案纖毫畢現。同一面國旗別在西裝領口時，卻只剩一枚金屬別針大小，圖案沒有變，尺寸卻差了數百甚至上千倍，能被認出來的，往往只剩幾塊顏色與一個最簡單的輪廓。
網站上的 favicon 設計，做的其實是同一件事，把一整套識別塞進一小塊畫布，只是這塊畫布只有 16 像素或 32 像素見方，比手機裡任何一個 App 圖示都還小上好幾圈。不少網站已經有正式 Logo，favicon 卻不是糊成一團，就是縮小到連自己人都認不出那是什麼。
這篇要談的是 favicon 設計本身這件具體的動作，把手上現成的 Logo 改造成一枚在 16 像素下依然辨識得出來的小圖示，不重新討論 Logo 的品牌定位，也不涉及印刷輸出規格，只從一個最容易被忽略的前提講起，那就是為什麼不能直接把 Logo 等比例縮小就了事。
Favicon 為什麼不能只是縮小版的 Logo？
32 像素見方的 favicon，只有 1024 個像素格可以用；16 像素見方更只剩 256 格，等於要把一整套識別塞進比手機 App 圖示還小得多的空間。根據 MDN Web Docs 的 favicon 詞條，16×16 像素正是瀏覽器分頁裡最經典、也最早被固定下來的標準尺寸，而 Google Search Central 的官方文件則明訂，要讓 favicon 出現在搜尋結果頁面，圖檔必須是正方形，最小可以只有 8 像素見方，但要清楚顯示，強烈建議做到 48 像素見方以上。
把 Logo 直接等比例縮小丟進這個尺寸，最先壞掉的通常是三種東西。細線最先出問題，原本一條清楚的邊框或筆畫，縮到十幾個像素之後不是斷裂就是模糊成一片；漸層緊接著出問題，顏色的漸變在這麼小的畫布裡沒有足夠的像素可以過渡，最後只會糊成一塊中間色；小字幾乎必然無法辨識，任何小於幾個像素高度的文字，縮小後都只會變成一坨看不出筆畫的雜訊。
這也是為什麼 favicon 設計不該被當成單純的縮小作業，而該當成一次重新翻譯。翻譯的目標不是保留 Logo 的每一筆細節，而是留住那種讓人一眼就認得出來的感覺，即使犧牲掉大部分的視覺資訊也在所不惜。所以問題從來不是要不要縮，而是要留下什麼、拿掉什麼，這正是下一步該回答的判斷。
Logo 裡，哪個元素禁得起縮到最小？
面對一個現成的 Logo，可以先把它拆成幾個組成元素，分別是獨立存在的圖形符號、品牌名稱的文字本身、外圍的輔助線條或裝飾，還有標語或副標。拆開之後，對著每一塊做一次自我檢查，拿掉這一塊，別人還認得出這是我們嗎。多數 Logo 拿掉標語與裝飾線條後，核心識別度幾乎不受影響，這正是縮小設計時第一批該犧牲的對象。
Nielsen Norman Group 一篇談圖示易用性的研究指出，縮小尺寸下的設計要盡量簡化，聚焦在物件最基本的特徵上，而不是做出高度寫實的畫面，理由是簡化過的圖形反而辨識得更快。文中還提出一個判斷法，叫做五秒法則，如果你想超過五秒都想不出一個合適的圖示來代表某個東西，這個圖示大概就沒辦法有效傳達那個意義了。這套邏輯套用在 favicon 設計上一樣成立，能撐住五秒法則的元素，才值得留到最後一步。
不同型態的 Logo，禁得起簡化的分量也不一樣，實際上可以分成三種常見情況。
帶獨立符號的 Logo
如果 Logo 本身就帶一個不靠文字也看得懂的獨立圖形，這是最好處理的起點。把那個圖形單獨抽出來，直接縮到 16 像素測試是否還看得清楚，通常只需要簡化內部細節，或是把線條加粗到能撐住這個尺寸即可，不太需要動到整體造型。
純文字或字母的 Logo
純用文字打造的 Logo，完整字串直接縮進 favicon 裡，通常只會變成看不清楚的一團色塊。這時候比較常見的做法，是抽出品牌名稱的第一個字，或前兩個字母，用加粗、放大的方式重新設計這一兩個字本身，而不是直接把原本纖細的字體整組縮小。
圖文合一的複合型 Logo
如果 Logo 是圖形加文字組成的複合型，兩個都硬塞進小尺寸，結果通常是兩個都認不出來。比較安全的判斷原則是留圖不留字，因為圖形的辨識速度本來就比文字快，除非這組文字的字型設計本身已經有很高的識別度，值得單獨留下來當作 favicon 的主體。
先拿掉這些細節：漸層、細線與小字
確定留哪個元素之後，可以把該拿掉的細節一次列出來，逐項處理乾淨。
- 標語或輔助文字：縮到 16 像素幾乎必然看不清楚，是第一個該拿掉的部分。
- 背景裝飾與陰影：在這麼小的尺寸下只會變成一團雜色，看不出裝飾的用意，不如整塊拿掉。
- 漸層過渡色：縮小之後漸層會糊成一塊中間色，不如換成一個乾淨的單一色塊。
- 過細的線條：線寬如果沒有對齊到整數像素，縮小後會忽隱忽現、看起來像雜訊，要加粗到能對齊像素網格的寬度。
把這幾項拿掉之後留下的判斷原則很簡單，每個看不出所以然的細節，都是在製造雜訊，不是在傳達品牌。
顏色與對比，怎麼決定縮到最小還認不認得出？
細節拿掉乾淨之後，接下來決定看不看得清楚的，往往不是造型，而是顏色數量與對比夠不夠強。顏色愈少愈好認，建議把 favicon 的顏色壓在兩到三色以內，如果 Logo 本身有一個夠強的單色版本，甚至只用一色反而是最保險的選擇。
背景色也是一個常被忽略的決定。用透明背景，favicon 的圖形邊界就要靠使用者所在分頁的底色撐住，萬一使用者剛好開著淺色主題，淺色的圖形很可能整個融進背景裡消失不見；改用純色底色，則要另外確保圖形和底色之間的對比夠強，不然一樣會糊在一起看不清楚。
判斷對比夠不夠強，不能只靠肉眼順不順眼這麼主觀，可以借用一個現成的客觀門檻。W3C 的 WCAG 2.1 規範裡有一條專門針對非文字對比的標準，明訂使用者介面元件與圖形物件，和相鄰的背景顏色之間至少要有 3:1 的對比比例。這條標準原本是為了可及性設計而訂，但同樣可以拿來檢查 favicon 縮到最小尺寸時，圖形跟底色是不是分得夠開。favicon 本來就要在畫面裡搶一小塊注意力，對比拉得比一般設計還誇張一點，通常才是對的方向。
16px、32px、180px，為什麼不能只用同一張圖？
顏色與對比在最小尺寸下站穩之後，另一個常被誤解的地方，是同一份設計能不能通吃所有尺寸。很多人做 favicon 的順序是先畫一張大圖，再用縮放工具產生其他尺寸，實際上比較好的順序是反過來，先在最小尺寸的像素網格上把造型定案，確認在最擠的空間裡依然看得懂，再往上一路疊加細節，做出 32 像素、180 像素等更大版本的圖檔。
常見的幾個尺寸，各自對應不同的使用情境。16 像素是瀏覽器分頁裡最常見的顯示尺寸；32 像素則用在高解析度螢幕的分頁，以及桌面書籤列；180 像素是蘋果裝置把網站加進主畫面時使用的圖示尺寸，Apple 官方的人機介面指南對這類圖示也有類似的要求，底色不能透明，要做成不透明的滿版方形圖，圓角不用自己處理，系統本身就會自動裁切；192 像素與 512 像素則是 Android 裝置與網頁應用程式安裝到主畫面時採用的規格。Google Search Central 的官方文件也提到，favicon 建議做到 48 像素見方以上，才能在各種介面裡都顯示清楚。
同一份設計，各個尺寸應該個別微調，而不是統一縮放了事，最擠的 16 像素版本可能只留得下一個色塊，180 像素版本卻可以把符號的內部細節多留一點回來。
深色模式的瀏覽器分頁，favicon 也要換個樣子嗎？
尺寸之外，還有一個越來越常被考慮進去的變因，就是使用者當下開的是淺色還是深色的瀏覽器主題。現在主流瀏覽器已經支援用向量格式的 SVG 取代點陣圖做 favicon，而 SVG 最大的好處，是可以在檔案裡直接寫一段依照使用者目前是淺色或深色主題切換樣式的規則。MDN Web Docs 的 prefers-color-scheme 文件說明，這是一個 CSS 媒體查詢語法，能依系統目前的深淺色設定，自動套用不同的樣式規則。放到 favicon 上，同一個檔案就能在淺色主題顯示深色圖形，深色主題自動換成淺色圖形，不需要另外做兩份檔案分開管理。
這個做法還不是每個瀏覽器都完整支援，有些瀏覽器雖然認得這段 CSS 語法，卻不會把它套用在 favicon 本身上，顯示出來的還是固定的預設版本。比較舊的瀏覽器也還沒有能力讀取 SVG 格式，一定要保留原本的點陣圖版本當備援，不能只靠這個新格式。
深色版本也不能只是把顏色簡單反相就交差，一樣要重新走過前面提到的簡化與對比檢查，確認在深色底色下，線條夠不夠粗、對比夠不夠明顯，縮到 16 像素依然看得懂，才算是真正做完。
設計完不算數，縮到實際尺寸檢查才算數
不管是淺色版、深色版，還是不同尺寸的版本，「設計完」這三個字本身就容易被誤解。favicon 設計完成後，不能只在放大檢視的狀態下看順不順眼，一定要把檔案縮到實際顯示的尺寸，用正常視力看一次。瀏覽器分頁的顯示尺寸通常就是 16 或 32 像素，放大三倍、五倍去看順眼的圖案，縮回實際尺寸經常整個走樣。
檢查也不能只測一種背景，至少要在淺色分頁、深色分頁，還有書籤列常見的白色底色下各看一輪，任何一種背景下糊掉，都算沒通過。
更嚴格的測試，是找一個沒看過這個 Logo 的人，把縮小後的 favicon 單獨拿給他看，只看 5 秒，再問他看到了什麼。Nielsen Norman Group 在談圖示可用性測試的文章裡，把這種做法稱為脫離情境測試，做法是把圖示單獨拿給使用者看，不搭配文字標籤或其他介面元素，請對方猜這個圖示代表什麼，如果對方的回答跟原本想表達的完全對不上，這個設計就該回頭重做。
通過實際尺寸、多種背景，還有陌生人五秒辨識這三關，favicon 設計才算真正做完，而不是停在設計軟體裡放大看起來還不錯的階段。
閱兵典禮上的國旗縮到別針大小時，留下的是幾塊顏色與一個簡單圖形，不是整面旗子的每一道摺痕。favicon 也是同樣的道理，它從來不是 Logo 的縮小版，而是 Logo 經過一輪篩選之後，留下那個不管縮到多小都還站得住腳的符號。
下次要改版 Logo 或重做官網之前，不妨先問自己一句，眼前這個 favicon 撐不撐得住縮到 16 像素。答得出來，代表這套識別已經準備好被塞進那一小塊畫布；答不出來，就代表還有東西可以再篩掉一層。
簡化到 16 像素還能認得出來，靠的是原本的造型夠簡潔。歡迎參考龐果的 Logo 設計服務，簡潔不代表簡陋，而是把品牌精華濃縮到最短的辨識時間裡。