比你所知的更麻煩，但也沒那麼麻煩的 favicon_艾俠

　　Favicon，或者說網頁圖示，是個比我最初見到時麻煩了十倍的東西，所以在多次的網站改版中我一直對它視而不見。直到前幾天我終於對伺服器 log 裡每天都會出現的 404 for apple-touch-icon.png 失去了耐心為止。

Favicon 在今天最常出現在這個地方

　　這篇文章不會詳細解釋這些東西的現況。相對地，我只打算記述一條快速解決相關問題的途徑。如果對這整個問題有興趣，可以參考我在最後附上的連結，特別是 RealFaviconGenerator 的 FAQ，它很實務地說明了支援或不支援特定規格的理由。儘管我選擇忽視它的一些建議。

我要解決哪些問題，為什麼

　　隨著行動裝置的興起，多年前在個人電腦上已經逐漸穩定下來的 favicon 規格被掀起了一陣至今仍在擴大的混亂。行動裝置的像素密度比過去的電腦螢幕更高，而且當網站捷徑被存在手機桌面上時，瀏覽器會用這個圖示系統來產生桌面圖示；Android 版的 Chrome 開始隨著裝置的像素密度增加而想要解析度更高的圖，iOS 則隨著改版已經出現過十種以上的預設規格。在這樣的亂世中，我希望能以維護成本最低的方式，作出讓大多數裝置都找到能用的圖示的配置；我會放棄那些要求太特殊的裝置和系統。

　　其實拿一張大圖丟進 RealFaviconGenerator，它會直接產生出所有我們需要的東西。這個做法的問題在於大圖和小圖的表現力不同，有些圖案你會想在不同的尺寸使用不同構圖；而我也不是同意所有 RealFaviconGenerator 決定配置時的考量。這就是為什麼我要自己做 favicon。我最後在我的網站裡配置了以下兩個檔案：

favicon.ico（內含三種解析度，供多數 PC 瀏覽器使用）
解析度 152*152 的 png（公版規格，讓包括 iOS 和 Android 多數版本在內的行動作業系統自己抓它來縮圖）

繪圖方面

　　用可以動態調整物件尺寸和位置的原圖，會比較方便調整構圖；pixel art 在呈現小尺寸的複雜圖案時是很生動的風格，因此被許多網站採用，但也是更動解析度時最麻煩的一種，至少在我用的繪圖軟體 Inkscape 中很困難，我試了一段時間之後就放棄了。這裡是我最後作出的東西。

　　 →
16*16，細節會難以辨識，所以把小物件全部刪除，主視覺元素放大，並且加強對比；使用單純的邊框，輸出後只有 1 px。

　　 →
32*32，十字形神秘物體的面積縮小，加上放大成原圖三倍的花；邊框加上裝飾線。

　　 →
48*48，主視覺元素的面積再縮小，加上藤蔓；花的尺寸稍微縮小，維持在剛好能辨識是什麼的程度。

　　 →？
152*152，花再縮小；因為可能會被加上圓角或陰影的效果，把邊框拿掉。

favicon.ico

　　favicon.ico 原本是 Microsoft 發明的非標準規格，也是第一種能被瀏覽器辨識的網頁圖示，在歷經標準化之後，至今仍是最常見的 favicon 格式之一。如果你單單把一個 .png 檔的附檔名改成 .ico，現代大部分的瀏覽器都能認得出來（當作普通的 png 處理），不過實際上 .ico 和 .png 是不同的檔案格式。和 .png 相比，使用 .ico 最主要的好處是你可以在一個檔案裡面包有不同解析度的圖示，減少檔案管理上的麻煩；相對地，因為 .ico 不是常用的格式，如果慣用的軟體不能直接匯出，作業就會比較麻煩。

　　我用 GIMP 來做 favicon.ico。對它來說這是內建的匯出格式，你不用對齊圖層，不用改圖層名字，每個圖層在匯出時會自動變成該圖層解析度的圖示。需要注意的地方只有大的圖層要擺在下面，因為目前觀察到電腦版的 Firefox 似乎對大圖層在上的 .ico 有非預期的反應，有時候會特別拿大圖去縮成小圖示。

在 GIMP 中如上圖的配置，可以直接匯出成內含三種尺寸的 .ico 檔

　　流程 1. 你有幾個預先做好、解析度也已經調好的圖示，先以 GIMP 開啟最大的那個，然後使用檔案 > 開啟成為圖層（Ctrl+Alt+O），依序匯入解析度更小的圖層；現在你會有好幾個不同解析度的圖層，大的在下面，直接匯出選 .ico 格式即可。

　　流程 2. 你想用一張大圖直接產生不同解析度的圖示，那麼先確認它只有一個圖層（如果不是，圖片 > 影像平面化），然後複製 > 貼上成為 > 新圖層，接著把圖層的（而不是圖片的）解析度調成你需要的圖示裡最大的一個。接著再度貼上原始圖層，依序縮成更小的解析度。最後你會有好幾個不同解析度的圖層，同樣大的在下小的在上。接著把原始圖層刪除（隱藏沒用），匯出 .ico 即可。在這個流程中，必須注意的是每次你貼上的都是最大的那張圖，這樣可以減少圖片品質在轉換過程中的損耗。

　　不過如果你只想用一張大圖直接產生不同解析度的圖示，如同前面說過的，用 RealFaviconGenerator 也可以達成。

HTML 部分

　　Favicon 是個因為各家瀏覽器實作方式有所衝突，導致應用上有很多麻煩的東西；幸運的是這些麻煩大部分只有對於設計行動裝置 app、需要確保圖示在不同系統的桌面上顯示效果的人才需要在意（呃至少我這陣子還不用在意）。這裡我採用 W3C 的建議，用 link rel 指定 favicon.ico 的位址。雖然根據 RealFaviconGenerator 的 FAQ，這會導致某些瀏覽器優先採用 favicon.ico，而放棄讀取解析度更符合需求的圖示。

<link rel="icon" type="image/vnd.microsoft.icon" href="path/to/favicon.ico">
這行應用於所有電腦版的瀏覽器。如果上述不清楚自己要什麼的瀏覽器誤動作的問題對你來說是重要的，就不要加上面這行，然後把 favicon.ico 擺在根目錄，需要 favicon.ico 的瀏覽器會自己找到。
<link rel="apple-touch-icon" href="path/to/favicon-152.png">
<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">
這兩行將大部分來自行動裝置的請求指向 152*152 的檔案。
<link rel="icon" href="path/to/favicon-152.png">
最後將在前面幾行中找不到歸處的瀏覽器也指向 152*152。

　　我在這個配置下的 link 不使用 sizes 屬性。Sizes 在某些瀏覽器中不支援，而在某些瀏覽器中會影響載入的優先順序；它會讓事情變得複雜。在不標示 sizes 的情況下，電腦版的瀏覽器應該都會優先取用 .ico 的檔案，我藉此區分開電腦和行動裝置用的圖示。

　　由於各家瀏覽器和 favicon 有關的 bug 經常在變化，我沒有打算預先避開那些問題。遇到的時候再解決。