顯示標題欄中標題左側的小圖icon

時間 2019-11-13

標籤顯示標題欄中左側 icon 简体版

原文原文鏈接

如何顯示網站logo,定義網站收藏夾圖標瀏覽器

代碼與解釋

建議包含上面兩行HTML代碼，能夠支持ico格式的圖標ide

第一行是必須的，由於「shortcut icon」字符串將被多數遵照標準的瀏覽器識別爲列出可能的關鍵詞（「shortcut」將被忽略，而僅適用「icon」）；而Internet Explorer將會把它做爲一個單獨的名稱（「shortcut icon」）。這樣作的結果是全部瀏覽器均可以理解此代碼。測試

第二行，只有當但願爲新瀏覽器提供另外一種備用圖像（例如動畫GIF）時，纔有必要。動畫

你須要知道的：

在HTML中，link元件必須在head元件裏（在<head>和</head>之間)。網站

對於XHTML，link必須使用「 />」結束（或「></link>」），而不能夠使用「>」結束。spa

href能夠，但沒必要，指向/favicon.ico的位置。它能夠指向任何URL。設計

圖像一般能夠使用任何被瀏覽器支持的圖像格式。圖片

.ico文件格式一般能夠被全部能夠顯示favicon的瀏覽器讀取,favicon.ico放在網站根目錄下，將會被一些不處理link元件的瀏覽器找到，能夠不寫上面的代碼。

設置服務器，以發送正確的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 功能最先由微軟創設，而微軟公司的IE網頁瀏覽器會對每個網站都請求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」>。後來鑑於此功能將被用於全部新內容，多數瀏覽器都對此功能增長了支持。

爲了更好的應用於各個地方，最好使用標準化方式，通過測試除IE6瀏覽器只支持icon格式的圖標，新的瀏覽器對全部格式的圖片都支持的不錯。

因此若是不會作ico格式的圖片，能夠吧第二句中的rel="icon"改爲rel="shortcut ico"？

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

shortcut:快捷方式，捷徑

favicon:網站圖標（favorite icon）→網頁圖標，收藏夾圖標

icon:圖標