幾件有關 favicon 你必須知道的事

阿恆

April 3, 2009

甚麼是 favicon？

Favicon 是 favorite icon 的簡稱，幾乎所有專業網站都有 favicon，它是一個由不同解像度的圖標結合成的檔案，例如它可能結合了一個 16x16 和一個 32x32 的 .bmp 檔案於一身，Favicon 的檔案延伸名稱是 .ico。在大部分的瀏覽器，這個圖標會在網址旁邊或者在書籤頁裏面顯示。通常 favicon 反映了該網站的設計或者有關機構的商標。

甚麼是 .ico 檔案？

Favicon 是一個由不同解像度的圖標結合成的檔案，內含的圖標有些是 16x16，有些是 32x32，有些只有 16 種顏色，有些有 256 種顏色，瀏覽器或其他使用 favicon 的系統會根據當前的需要，選擇最適合的解像度和顏色數量的版本來顯示，倘若沒有完全吻合要求的版本，它們可能要把圖表拉大、縮小、降低顏色的數量等等，這些操作可能會使圖標的素質變得不理想。

.ico 和 .bmp 檔案有甚麼不同？

不少人誤以為 .ico 等於 .bmp，其實 .ico 是 .bmp 的集合，它有自己的檔案格式，一個 .bmp 檔案必須透過轉換程式才可以變成 .ico 檔案。很多網站的 favicon 包含一個 16x16 和一個 32x32 解像度的圖標，16x16 的版本用來在網址列和瀏覽器的書籤中顯示，有些瀏覽器容許用戶把網址列的圖標拉到桌面成為一個網址捷徑，這時 32x32 的版本便派上用場。微軟建議 .ico 檔案包含以下三個圖標：

16x16 – 16 色
32x32 – 16 色
48x48 – 256 色

Favicon 必須命名為 favicon.ico 嗎？

雖然你可以在 HTML 中自行定義 favicon 的檔案名稱（見後文），但仍然建議你使用「favicon.ico」，因為有些瀏覽器會自動搜索這個檔案。

如何在網頁內指定 favicon？

1
2
3
<link rel="icon" 
      type="image/ico" 
      href="http://example.com/favicon.ico">

Favicon 應該放在網站甚麼地方？

應該把 favicon 放在網站的根目錄，即是 http://www.yourdomain.com/favicon.ico，有些瀏覽器會自動在這裏搜尋你的 favicon。

怎樣建立 .ico 檔案？

有些人誤解把 .bmp 檔案改名成 .ico 便是了，微軟的視窗和 IE 似乎正確把它顯示出來，當然那只是漂亮的誤會，檔案的名字變了但是它的內容仍然是 BMP 格式。

PhotoShop 可以把檔案儲存為 .ico 格式，但 PhotoShop 對一般人來說太昂貴了，用它來製作 favicon 也有點大材小用。在 HTML-Kit (一個免費的 HTML、XML、CSS、JavaScript、PHP 編輯器) 的網站有一個網上自動 favicon 產生器 FavIcon from Pics，只要上傳一個不限大小和解像度的圖檔，它便會替你產生對應的 favicon。

favicon