Favicons

**Favicon** 是 _favorites icon_ 的縮寫，亦被稱為 **website icon**（網站圖示）、**page icon**（頁面圖示）或 **urlicon**（URL 圖示）。Favicon 是與某個網站或網頁相關聯的圖示。網站設計者可以多種方式建立這種圖示，而目前也有很多網頁瀏覽器支援此功能。瀏覽器可以將 favicon 顯示於瀏覽器的網址列中，也可置於書籤列表的網站名前，還可以放在標籤式瀏覽介面中的頁標題前。

最初，定義一個 favicon 的方法是將一個名為「favicon.ico」的檔案置於 Web 伺服器的根目錄下，Internet Explorer 的我的最愛（即書籤）可以自動顯示該檔案。 後來出現了一種更為靈活的方法，即使用 HTML 來為任何一個網頁指示其圖示所儲存的位置。這種方法是透過在頁面的 `<head>` 部分添加兩個 link 元件來實現的。這樣，任何一個適當大小的（16×16 像素或更大）的圖像都可以用作 favicon。儘管如此，多數情況下仍然使用 ICO 格式。其他網頁瀏覽器現在也支援 PNG（可攜式網路圖片）格式，和 GIF（圖形交換格式）動畫圖像格式。

市面上多數瀏覽器同時支援上述兩種方法。正因此，網路伺服器要接受很多對「favicon.ico」檔案的請求，即使該檔案根本不存在。網站管理員對此很不滿，因為這樣會增加大量的伺服器紀錄檔項，並導致很多不必要的磁碟讀取和 CPU、網路資源的占用。另一個常見的問題是，當清除瀏覽器的快取後，favicon 可能會消失。

## 歷史

1999 年 3 月，Internet Explorer 最早僅僅將 favicon 用於我的最愛（例如 MSIE 5.0）。這產生了一些關於隱私問題的考慮，因為網站擁有者可以透過檢查存取紀錄檔察看有多少人下載了 `favicon.ico` 檔案，判斷有多少人將他們的網站放入我的最愛中。然而，自從許多其他瀏覽器開始在每次存取時都將 favicon 顯示在網址列上，這就不再是一個問題了。

### 標準化

Favicon 功能最早由微軟創設，而微軟公司的 Internet Explorer 網頁瀏覽器會對每一個網站都請求 favicon。微軟支援的 link 標籤不遵從 World Wide Web Consortium（W3C，全球資訊網協會）的 HTML 建議 [1]（頁面存檔備份，存於網際網路檔案館），因為：

* `rel` 屬性必須包含一個用空格作分隔符的 link 類型的列表，所以一個包含兩詞的 link 類型不能被遵守標準的瀏覽器理解。
* 「.ico」檔案類型（一種用於 Microsoft Windows 上圖示的光柵格式）沒有一個註冊的 MIME 類型，而且似乎在當時也不能被多數瀏覽器理解。然而 2003 年，這一格式在 IANA 獲得註冊，其 MIME 類型是 _image/vnd.microsoft.icon_，進而消除了此問題的第一部分。
* 在網站上使用_保留位址（reserved location）_ 與 Architecture of the World Wide Web（網際網路的結構）（頁面存檔備份，存於網際網路檔案館）矛盾，同時被認為是 _link squatting（連結劫持）_ 或 _URI squatting（URI 劫持）_ 。

Mozilla 瀏覽器透過一種遵從 Web 標準的方法添加了對 favicon 的支援。它採用 `rel="icon"` 並允許網路設計人員添加任何支援的圖像格式的 favicon。例如 `<link rel="icon" type="image/png" href="/path/image.png" />`。後來鑑於此功能將被用於所有新內容，多數瀏覽器都對此功能增加了支援。

根據《HTML 4.01 Specification W3C Recommendation 24 December 1999》，rel 屬性的取值僅有：

* Alternate
* Stylesheet
* Start
* Next
* Prev
* Contents
* Index
* Glossary
* Copyright
* Chapter
* Section
* Subsection
* Appendix
* Help
* Bookmark

如果要採用其他值，應當在 head 標籤中的 profile 屬性中進行自訂。W3C 給出了一個建議：《How to Add a Favicon to your Site》（頁面存檔備份，存於網際網路檔案館）。

簡單地說：

1. 在 head 標籤中加入 profile 屬性指向 http://www.w3.org/2005/10/profile（頁面存檔備份，存於網際網路檔案館）。
2. 用 link 標籤指向 Favicon URI，rel 值為 icon

一個常見的錯誤是不指定 profile。

## 指導

過去，為保證 favicon 出現，網站設計者和開發者採用了多種方法。很難明確地保證 favicon 可以在所有電腦上顯示，即使是用同一版本的一種瀏覽器。

下列代碼另一個局限就是它把 favicon 關聯到了某個特定的 HTML 或 XHTML 文件上。為避免這一點，favicon.ico 檔案應置於根目錄下。多數瀏覽器將自動檢測並使用它。

* 建議包含以下兩行 HTML 代碼：

　
: 然而，只有第一行是必須的，因為「shortcut icon」字串將被多數遵守標準的瀏覽器辨識為列出可能的關鍵詞（「shortcut」將被忽略，而僅使用「icon」）；而 Internet Explorer 將會把它作為一個單獨的名稱（「shortcut icon」）。這樣做的結果是所有瀏覽器都可以理解此代碼。只有當希望為新瀏覽器提供另一種備用圖像（例如動畫 GIF）時，才有必要添加第二行。

* 在 HTML 中，`link` 元件必須在 `head` 元件里（在 `<head>` 和 `</head>` 之間）。
* 對於 XHTML，link 必須使用「 `/>`」結束（或「`></link>`」），而不可以使用「`>`」結束。
* `href` 可以，但不必指向 `/favicon.ico` 的位置。它可以指向任何 URL。
* 圖像通常可以使用任何被瀏覽器支援的圖像格式。
* `.ico` 檔案格式通常可以被所有可以顯示 favicon 的瀏覽器讀取。
* 設定伺服器，以傳送正確的 MIME 標識：
  * ICO 檔案 `image/vnd.microsoft.icon`（或者亦可出於相容性原因使用 `image/x-icon`。然而最好使用 IANA 註冊的 MIME 類型（頁面存檔備份，存於網際網路檔案館），因為多數主流瀏覽器現在支援它）
  * GIF 檔案 `image/gif`
  * PNG 檔案 `image/png`
* 使用適當的解析度和色深。
  * ICO：包括多種解析度（最常使用的是 16×16 和 32×32，Mac OS X 有時使用 64×64 和 128×128）以及位深（位元每像素）（多數使用 4、8、24 bpp，即 16、256 和 1600 萬色）。
  * GIF：使用 16×16，256 色。
  * PNG：使用 16×16，256 色或 24 位元。

**注意**：當 `favicon.ico` 被置於文件根目錄時，將會被一些不處理 `link` 元件的瀏覽器找到，即使沒有您的站點上沒有指向它的連結。

## 參考

## 外部連結

* W3C 網路標準化組織關於如何添加 favicon 的建議（頁面存檔備份，存於網際網路檔案館）
* 如何使用 PHP 添加 favicon（頁面存檔備份，存於網際網路檔案館）。
* MSDN Library: Win32 的圖示（頁面存檔備份，存於網際網路檔案館）
* Online favicon editor: 線上製作 Favicon 圖示（頁面存檔備份，存於網際網路檔案館）
* 開放式目錄計劃中和 Image Generation:Favicons 相關的內容（有些過時的資訊）
* MSDN Library: 自訂站點圖示（頁面存檔備份，存於網際網路檔案館）