檢視 Favicon 的原始碼

'''Favicon'''是 _ favorites icon _ 的縮寫，亦被稱為'''website icon'''（網站圖示）、'''page icon'''（頁面圖示）抑是'''urlicon'''（URL 圖示）。 Favicon 是佮某一个網站抑是網頁相關聯的圖示。網站設計者會當加種方式建立這種圖示，煞目前也有真濟網頁瀏覽器支援此功能。瀏覽器會當將 favicon 顯示佇瀏覽器的網址列中，原仔會當佇咧書籤列表的網站的名前，猶閣會當囥佇標籤式瀏覽介面中的頁標題進前。

上代先，定義一个 favicon 的方法是共一个名為「favicon . ico」的檔案佇咧 Web 侍服器的根 kha-tá-lok-guh 落，Internet Explorer 的我的上愛（即書籤）伊會當自動顯示該檔案。後來出現了一種閣較靈活的方法，就算用 HTML 來是任何一个網頁指示其圖所儲存的位置。這種方法是透過佇咧頁面的 ` < head > ` 部份添加兩个 link 元件來實現的。按呢乎，任何一个適當大細的（十六 × 十六像素抑閣較大）的圖像攏會當用做的圖像 favicon。就算講按呢，多數的情況下猶是使用 ICO 格式。其他網頁瀏覽器這馬嘛支援 PNG（會當紮網路圖片）格式，和 GIF（圖形交換格式）動畫圖像格式的。

市面上濟濟的瀏覽器同時支援前述兩種方法。正因此，佇網路侍服器愛接受足濟嘿「favicon . ico」檔案的請求，就算該檔案根本無存在。網站管理員誠不滿，因為按呢會增加大量的侍服器紀錄檔項，並致使真濟無必要的磁碟讀取和 CPU、網路資源的占用。另外一个捷看著的問題是，做清除瀏覽器的緊取了後，favicon 可能會消失。

==歷史==

一九九九年三月，Internet Explorer 上早干焦共 favicon 用佇我的上愛（比如講 MSIE 五曉空）。 這產生一寡關於隱私問題的考慮，因為網站有的人會當透過檢查存取紀錄檔察看偌濟人落載矣 ` favicon . ico ` 檔案，判斷有偌濟人將𪜶的網站囥入我的上愛中間。毋過，自從濟濟其他的瀏覽器開始佇每改存取的時陣攏共 favicon 顯示佇咧網址列頂懸，按呢就袂閣是一个問題矣。

===標準化===

Favicon 伊的功能頭上早是微軟仔創設，若微軟公司 Internet Explorer 網頁瀏覽器會對每一个網站攏請求 favicon。微軟支援的 link 標籤無遵對 World Wide Web Consortium（W 三 C，全球資訊網協會）的 HTML 建議喔 [一]，因為乎：

* ` rel ` 屬性著愛包含一个用空格做分隔符的 link 類型的列表，所以一个包含兩个詞的 link 類型袂使予人遵守標準的瀏覽器理解。
*「. ico」檔案類型（一種用於著 Microsoft Windows 上圖示的光柵格式）無一个註冊的 MIME 類型，而且若像人佇彼當陣嘛袂使予多數瀏覽器理解。毋過二空空三年，這格式佇咧 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 四配空一 Specification W 三 C Recommendation 二十四 December 一千九百九十九》，rel 屬性的取值干焦有：

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

你若欲採用其他的價值，應當咧 head 標籤內底的 profile 屬性中進行自訂。W 三 C 予出著一个建議：《 How to Add a Favicon to your Site》。

簡單講：

一 . 佇咧 head 標籤內底加入 profile 屬性指向 http : / / www . w 三 . org / 十分之二千空五 / profile。
二 . 用 link 標籤指向 Favicon URI，rel 足值為 icon

一个捷看會著的錯誤是無指定 profile。

==教示講==

過去，為著保證 favicon 出現，網站設計者佮開發者採用濟種的方法。真歹明確地保證 favicon 會當佇所有的電腦頂懸顯示講，就算是用仝一版本的一種瀏覽器。

下列代碼另外一个局限就是伊共 favicon 關連著矣某一个特定的 HTML 抑是 XHTML 文件頂懸。為著避免這點，favicon . ico 檔案應該置佇咧根 kha-tá-lok-guh 落。多數瀏覽器共自動檢測閣使用伊。

* 建議包括以下兩行 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：包括加種解析度（上捷使用的是十六 × 十六佮三十二 × 三十二，Mac OS X 有當時仔六十四 × 六十四佮一百二十八 × 一百二十八）猶閣有位深（位元每一个素）（多數使用四、八、二十四 bpp，即十六、兩百五十六佮一千六百萬色）。
* GIF：使用十六 × 十六，兩百五十六色。
* PNG：使用十六 × 十六，兩百五十六色抑是二十四位元。

'''注意'''：當 ` favicon . ico ` 佮文件根囥佇咧 kha-tá-lok-guh 時，將會去予一寡無處理 ` link ` 元件的瀏覽器揣著，就算講無你的徛點無向伊的連結。

==參考==

==外部連結==

* W 三 C 網路標準化組織關於如何添加 favicon 的建議
* 按怎使用 PHP 添加 favicon。
* MSDN Library : Win 三十二的圖示
* Online favicon editor : 線頂製作 Favicon 圖示
* 開放式 kha-tá-lok-guh 計畫中和 Image Generation : Favicons 相關的內容（有一寡過時仔的資訊）
* MSDN Library : 自訂站點圖示

[[分類: 待校正]]