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 : 自訂站點圖示