favicon.ico學習（一）什麼是 favicon.ico，為何我的瀏覽器會向其祕密傳送請求？
favicon.ico是什麼？
所謂favicon，即Favorites Icon的縮寫，是指顯示在瀏覽器收藏夾、位址列和標籤標題前面的個性化圖示。以圖示的方式區別不同的網站。
favicon.ico是一個網站必要的嗎？
不是必要的，當您使用瀏覽器瀏覽不同站點時，瀏覽器將自動傳送請求。如果您的瀏覽器收到有效favicon.ico檔案，將顯示此圖示。如果未收到，則不會顯示特殊圖示，會報404錯誤，並且會記錄到錯誤日誌中，所以最好的設定。
favicon.ico怎麼設定？
第一種方式：放在根目錄
這種方法最簡單，在伺服器根目錄下放一個favicon.ico的檔案，瀏覽器發現後就會使用。（把做好的favicon.ico圖示檔案上傳到網站根目錄，並命名為xxx.icon就可以了；）
注：這種方式，ico檔案的名稱一定要叫：favicon
第二種方法：link標籤
在head裡面加入程式碼：
<link rel="shortcut icon" href="ico檔案url">
或
<link rel="icon" href="../favicon.ico">
或
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
注：這種方式，ico檔案的名稱就可任意命名了。
第一種方法設定的是全站的，第二種方法可以針對某個網頁單獨設定ico（但是該圖示的路徑一定要使用絕對路徑）
favicon的格式一定是ico格式嗎？
favicon的格式不一定是ico格式，它可以是png，jpg甚至是gif，不過ico格式是所有瀏覽器都支援的。
favicon.ico的尺寸有16×16、32×32、48×48，在新增到桌面、工作列小尺寸的圖示就不是很理想了，這就需要多種尺寸相容各種裝置和情況。
favicon.icon檔案怎麼製作？
簡單的方式就是線上製作，推薦網址：ico圖示線上製作：http://www.faviconico.org/
如何讓網站不去請求favorites icon？
在做 H5 混合應用的時候，不希望產生 favicon.ico 的請求。可以在頁面的 <head> 區域，加上如下程式碼實現遮蔽：
<link rel="icon" href="data:;base64,=">
或者詳細一點
<link rel="icon" href="data:image/ico;base64,aWNv">
favicon.icon實戰
收銀臺首頁
收銀臺網站是有圖示的，從上圖就可以看出，收銀臺favicon.icon的設定使用了方法一，也就是將favicon.icon放在伺服器根目錄下
樂高
樂高網站沒有圖示，請求favicon.icon返回了302（HTTP響應狀dao態碼302並不是一個錯誤程式碼，襲302代表的意思bai其實是duURL重定向zhi，即是將當前連線訪問dao的URL重定向到新的URL。那如何得知新的URL呢，新的URL記錄在在HTTP響應Headers（HTTP響應首部）裡面，302響應首部中有一個Location欄位中，將Location欄位的內容提取出來，然後再訪問這個URL就可以了。）
補充
Favicon是favorites icon的縮寫，亦被稱為website icon（網頁圖示）、page icon（頁面圖示）或urlicon（URL圖示）。Favicon是與某個網站或網頁相關聯的圖示。網站設計者可以多種方式建立這種圖示，而目前也有很多網頁瀏覽器支援此功能。瀏覽器可以將favicon顯示於瀏覽器的位址列中，也可置於書籤列表的網站名前，還可以放在標籤式瀏覽介面中的頁標題前。
最初，定義一個favicon的方法是將一個名為“favicon.ico”的檔案置於Web伺服器的根目錄下，Internet Explorer的收藏夾（即書籤）可以自動顯示該檔案。[1]後來出現了一種更為靈活的方法，即使用HTML來為任何一個網頁指示其圖示所儲存的位置。這種方法是通過在頁面的<head>部分新增兩個link元件來實現的。這樣，任何一個適當大小的（16×16畫素或更大）的影象都可以用作favicon。儘管如此，多數情況下仍然使用ICO格式。其他網頁瀏覽器現在也支援PNG（行動式網路圖片）格式，和GIF（圖形交換格式）動畫影象格式。
市面上多數瀏覽器同時支援上述兩種方法。正因此，網路伺服器要接受很多對“favicon.ico”檔案的請求，即使該檔案根本不存在。網站管理員對此很不滿，因為這樣會增加大量的伺服器日誌項，並導致很多不必要的磁碟讀取和CPU、網路資源的佔用。另一個常見的問題是，當清除瀏覽器的快取後，favicon可能會消失。
標準化
Favicon功能最早由微軟創設，而微軟公司的Internet Explorer網頁瀏覽器會對每一個網站都請求favicon。微軟支援的link標籤不遵從World Wide Web Consortium（W3C，全球資訊網聯盟）的HTML建議[1]，因為：
-
rel屬性必須包含一個用空格作分隔符的link型別的列表，所以一個包含兩詞的link型別不能被遵守標準的瀏覽器理解。 -
“.ico”檔案型別（一種用於MicrosoftWindows上圖示的光柵格式）沒有一個註冊的MIME型別，而且似乎在當時也不能被多數瀏覽器理解。然而2003年，這一格式在IANA獲得註冊，其MIME型別是image/vnd.microsoft.icon，進而消除了此問題的第一部分。
-
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屬性中進行自定義。
指導
過去，為保證favicon出現，網站設計者和開發者採用了多種方法。很難明確地保證favicon可以在所有電腦上顯示，即使是用同一版本的一種瀏覽器。
下列程式碼另一個侷限就是它把favicon關聯到了某個特定的HTML或XHTML文件上。為避免這一點，favicon.ico檔案應置於根目錄下。多數瀏覽器將自動檢測並使用它。
-
建議包含以下兩行HTML程式碼：
<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元件的瀏覽器找到，即使沒有您的站點上沒有指向它的連結。
參考
https://zh.wikipedia.org/wiki/Favicon
https://www.zhangxinxu.com/wordpress/2019/06/html-favicon-size-ico-generator/