關於shortcut icon和icon代碼的區別介紹

shortcut icon和icon代碼之間究竟有何區別呢.下面介紹一下

語句一:<link rel="shortcut icon" href="favicon.ico" /> 

語句二<link rel="icon" href="animated_favicon.gif" type="image/gif" /> 
備註:語句一 Shortcut Icon 就是在網址列前面出現的Icon 
問題:語句二 icon的作用是怎麼?和語句一有什麼區別? 
指導 
過去,爲保證favicon出現,網站設計者和開發者採用了多種方法。很難明確地保證favicon可以在所有電腦上顯示,即使是用同一版本的一種瀏覽器。 
下列代碼另一個侷限就是它把favicon關聯到了某個特定的HTML或XHTML文檔上。爲避免這一點,favicon.ico文件應置於根目錄下。多數瀏覽器將自動檢測並使用它。 
建議包含以下兩行HTML代碼: 
CODE: 
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"> 
<link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"> 
然而,只有第一行是必須的,因爲“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元件的瀏覽器找到,即使沒有您的站點上沒有指向它的鏈接。 
標準化 
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">。後來鑑於此功能將被用於所有新內容,多數瀏覽器都對此功能增加了支持。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章