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

時間 2019-11-10

標籤關於 shortcut 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）以及位深（比特每像素）（多數使用四、八、24 bpp，即1六、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">。後來鑑於此功能將被用於全部新內容，多數瀏覽器都對此功能增長了支持。瀏覽器

1. icon-font圖標介紹
2. css選擇器（[class*=" icon-"], [class^=icon-] 的區別）
3. ICON
4. wx-icon和progress
5. Icon和LunchImage
6. 關於vue-svg-icon的使用方式
7. 關於icon小圖標的實現
8. CSS - icon圖標(icon font)
9. C# Icon轉Byte , Byte轉Icon
10. ABAP ICON
更多相關文章...
• ionic icon(圖標) - ionic 教程
• Markdown 代碼 - Markdown 教程
• IntelliJ IDEA 代碼格式化配置和快捷鍵
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。