網頁的linke rel="icon"詳解 favicon深究
字詞轉換是中文維基的一項自動轉換，目的是通過計算機程式自動消除繁簡、地區詞等不同用字模式的差異，以達到閱讀方便。字詞轉換包括全域性轉換和手動轉換，本說明所使用的標題轉換和全文轉換技術，都屬於手動轉換。
如果您想對我們的字詞轉換系統提出一些改進建議，或者提交應用面更廣的轉換（中文維基百科全站乃至MediaWiki軟體），或者報告轉換系統的錯誤，請前往Wikipedia:字詞轉換請求或候選發表您的意見。
Favicon是favorites icon的縮寫，亦被稱為website icon（網頁圖示）、page icon（頁面圖示）或urlicon（URL圖示）。Favicon是與某個
最初，定義一個favicon的方法是將一個名為“favicon.ico”的檔案置於Web伺服器的根目錄下，Internet Explorer的收藏夾（即書籤）可以自動顯示該檔案。後來出現了一種更為靈活的方法，即使用HTML來為任何一個網頁指示其圖示所儲存的位置。這種方法是通過在頁面的<head>部分新增兩個link元件來實現的。這樣，任何一個適當大小的（16×16
市面上多數瀏覽器同時支援上述兩種方法。正因此，網路伺服器要接受很多對“favicon.ico”檔案的請求，即使該檔案根本不存在。網站管理員對此很不滿，因為這樣會增加大量的伺服器日誌（Server log）項，並導致很多不必要的磁碟讀取和CPU、網路資源的佔用。另一個常見的問題是，當清除瀏覽器的快取後，favicon可能會消失。
Internet Explorer最早僅僅將favicon用於收藏夾（例如MSIE 6.0）。這產生了一些關於隱私問題的考慮，因為網站擁有者可以通過檢查訪問日誌察看有多少人下載了favicon.ico檔案，判斷有多少人將他們的網站放入收藏夾中。然而，自從新版本的Internet Explorer（例如MSIE 7.0）出現，以及很多其他瀏覽器開始在每次訪問時都將favicon顯示在位址列上，這就不再是一個問題了。
過去，為保證favicon出現，網站設計者和開發者採用了多種方法。很難明確地保證favicon可以在所有電腦上顯示，即使是用同一版本的一種瀏覽器。
下列程式碼另一個侷限就是它把favicon關聯到了某個特定的HTML或XHTML文件上。為避免這一點，favicon.ico檔案應置於根目錄下。多數瀏覽器將自動檢測並使用它。
建議包含以下兩行HTML程式碼：
<linkrel="shortcut icon"href="http://example.com/favicon.ico"type="image/vnd.microsoft.icon">
<linkrel="icon"href="http://example.com/favicon.ico"type="image/vnd.microsoft.icon">
然而，只有第一行是必須的，因為“shortcut icon”字串將被多數遵守標準的瀏覽器識別為列出可能的關鍵詞（“shortcut”將被忽略，而僅適用“icon”）；而Internet Explorer將會把它作為一個單獨的名稱（“shortcut icon”）。這樣做的結果是所有瀏覽器都可以理解此程式碼。只有當希望為新瀏覽器提供另一種備用影象（例如動畫GIF）時，才有必要新增第二行。
（1）在HTML中，link元件必須在head元件裡（在<head>和</head>之間）。
（2）對於XHTML，link必須使用“ />”結束（或“></link>”），而不可以使用“>”結束。
（3） href可以，但不必指向/favicon.ico的位置。它可以指向任何URL。
（4）影象通常可以使用任何被瀏覽器支援的影象格式。
（5） .ico檔案格式通常可以被所有可以顯示favicon的瀏覽器讀取。
設定伺服器，以傳送正確的MIME標識：
（1）ICO 檔案 image/vnd.microsoft.icon（或者亦可出於相容性原因使用image/x-icon。然而最好使用
IANA註冊的MIME型別，因為多數主流瀏覽器現在支援它）
（2）GIF 檔案 image/gif
（3）PNG 檔案 image/png使用適當的解析度和色深。
（4）ICO：包括多種解析度（最常使用的是16×16和32×32，Mac OS X有時使用64×64和128×128）以及位深（位元每
畫素）（多數使用4、8、24 bpp，即16、256和1600萬色）。
（5）GIF：使用16×16，256色。PNG：使用16×16，256色或24位。
注意：當favicon.ico被置於文件根目錄時，將會被一些不處理link元件的瀏覽器找到，即使沒有您的站點上沒有指向它的鏈
接。
標準化
Favicon功能最早由微軟創設，而微軟公司的Internet Explorer網頁瀏覽器會對每一個網站都請求favicon。微軟支援的link標籤不遵從World Wide Web Consortium（W3C，全球資訊網聯盟）的HTML建議[1]，因為：
（1）rel屬性必須包含一個用空格作分隔符的link型別的列表，所以一個包含兩詞的link型別不能被遵守標準的瀏覽器理
解。
（2）“.ico”檔案型別（一種用於MicrosoftWindows上圖示的光柵格式）沒有一個註冊的MIME型別，而且似乎在當時也
不能被多數瀏覽器理解。然而2003年，這一格式在IANA獲得註冊，其MIME型別是image/vnd.microsoft.icon，進
而消除了此問題的第一部分。
（3）在網站上使用保留地址（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 4.01 Specification W3C Recommendation 24 December 1999》，rel屬性的取值僅有：
Alternate Stylesheet Start Next Prev Contents Index Glossary
Copyright Chapter Section Subsection Appendix Help Bookmark
如果要採用其他值，應當在head標籤中的profile屬性中進行自定義。W3C給出了一個建議：《How to Add a Favicon to your Site》。
簡單地說：
在head標籤中新增profile屬性指向http://www.w3.org/2005/10/profile。用link標籤指向Favicon URI，rel值為icon
一個常見的錯誤是不指定profile。
對於標籤的格式
HTML:
<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico">
<link rel="icon" type="image/gif" href="http://example.com/image.gif">
<link rel="icon" type="image/png" href="http://example.com/image.png">
XHTML:
<link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico" />
<link rel="icon" type="image/gif" href="/somepath/image.gif" />
<link rel="icon" type="image/png" href="/somepath/image.png" />
【注意事項】
由於iPhone，iPod Touch以及一些Android系統的觸屏智慧手機的出現，開始出現了一種新的icon用法
<link rel="apple-touch-icon" href='xx.png'>
<link rel="apple-touch-icon-precomposed" href='xx.png'>
這個圖示的用途是用於在將網頁儲存到主螢幕時，顯示的相應圖示
相關的介紹：http://phonydev.com/apple-touch-icon/
http://allinthehead.com/retro/319/how-to-set-an-apple-touch-icon-for-any-site
後來在omif發現的問題。
<link rel="shortcut icon" href="<%= PUBLIC_URL %>assets/favicon.ico"> <link rel="icon" type="image/png" sizes="16x16" href="<%= PUBLIC_URL %>assets/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="<%= PUBLIC_URL %>assets/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="57x57" href="<%= PUBLIC_URL %>assets/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="<%= PUBLIC_URL %>assets/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="<%= PUBLIC_URL %>assets/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="<%= PUBLIC_URL %>assets/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="<%= PUBLIC_URL %>assets/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="<%= PUBLIC_URL %>assets/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="<%= PUBLIC_URL %>assets/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="<%= PUBLIC_URL %>assets/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="<%= PUBLIC_URL %>assets/apple-touch-icon-167x167.png"> <link rel="apple-touch-icon" sizes="180x180" href="<%= PUBLIC_URL %>assets/apple-touch-icon-180x180.png"> <link rel="apple-touch-icon" sizes="1024x1024" href="<%= PUBLIC_URL %>assets/apple-touch-icon-1024x1024.png"> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-320x460.png"> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x920.png"> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x1096.png"> <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-750x1294.png"> <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1182x2208.png"> <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1242x2148.png"> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-748x1024.png"> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-768x1004.png"> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1496x2048.png"> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1536x2008.png"> <link rel="icon" type="image/png" sizes="228x228" href="<%= PUBLIC_URL %>assets/coast-228x228.png"> <link rel="yandex-tableau-widget" href="<%= PUBLIC_URL %>assets/yandex-browser-manifest.json">