什么是ICO圖標(biāo)
favicon，即Favorites Icon的縮寫，是指顯示在瀏覽器收藏夾、地址欄和標(biāo)簽標(biāo)題前面的個性化圖標(biāo)。 以圖標(biāo)的方式區(qū)別不同的網(wǎng)站。
ICO是Windows的圖標(biāo)文件格式，此格式圖標(biāo)文件可以存儲單個圖案、多尺寸、多色板的圖標(biāo)文件。一個圖標(biāo)實際上是多張不同格式的圖片的集合體，并且還包含了一定的透明區(qū)域。
Mac OS中使用的是ICNS格式。
ICO，圖標(biāo)格式，即指英語的“icon”，其MIME類型為image/x-icon，是一種用于圖標(biāo)顯示的圖幀式。除了一般圖片常見的顏色外，一般還用調(diào)色板定義了透明色和反色。
常見尺寸
下面是一些平臺favicon最佳尺寸列表：
圖標(biāo)常見尺寸有16×16（小圖標(biāo)）、32×32、48×48，另外24×24、64×64、128×128也比較常見。256×256多見于Windows Vista以上版本的Windows操作系統(tǒng)中。
16X16：顯示在地址欄、工具欄及應(yīng)用左上角
32X32：顯示在電腦最下方的任務(wù)欄上、微信發(fā)送的框里
48X48：桌面快捷圖標(biāo)
256X256:蘋果桌面應(yīng)用
8×8、10×10、20×20多用于工具欄的按鈕。
- 絕大多數(shù)桌面瀏覽器：16×16, 32×32以及盡可能大
- Android Chrome：192×192
- Google TV：96×96
較舊的操作系統(tǒng)不支持超過128×128的圖標(biāo)，所以向用于舊的操作系統(tǒng)的圖標(biāo)文件中添加大圖標(biāo)沒有意義。
ICO格式的圖片和PNG格式圖片是不一樣的，PNG圖片就是一張單獨的圖片，但是作為Favicon的ICO格式圖片應(yīng)該是一組16×16、32×32和48×48圖像集合。所以，一張PNG圖標(biāo)格式轉(zhuǎn)換成ICO格式后尺寸會大很多，是因為這個ICO圖標(biāo)包含了多個尺寸。系統(tǒng)會自動判斷調(diào)用哪個大小的圖標(biāo)
怎么設(shè)置favicon.ico
第一種方式：放在根目錄
這種方法最簡單，在服務(wù)器根目錄下放一個 favicon.ico 的文件，瀏覽器發(fā)現(xiàn)后就會使用。（把做好的favicon.ico圖標(biāo)文件上傳到網(wǎng)站根目錄，并命名為xxx.ico就可以了； ）
注意：這種方式，ico文件的名稱一定要叫：favicon
第二種方法：link標(biāo)簽
在head里面加入代碼：
<link rel="shortcut icon" href="ico文件url">
//這是一種過時的用法，可以被淘汰掉用西面這種寫法
<link rel="icon" type="image/x-icon" href="/path/to/icons/favicon.ico">
//引用ico格式
<link rel="icon" type="image/svg+xml" href="./assets/images/favicon.svg">
//引用SVG格式
<link rel="icon" type="image/png" href="./assets/images/favicon.png">
//引用png格式
注：這種方式，圖標(biāo)的名稱就可任意命名了，只需要路徑填上即可，根目錄下”./“可以省略。
此外我們也可以用PNG圖標(biāo)
ico支持所有瀏覽器，對于現(xiàn)代桌面瀏覽器，推薦使用PNG圖標(biāo)作為favicon。
我們還可以使用sizes屬性指定PNG圖標(biāo)的尺寸，這樣瀏覽器自己可以選擇合適的小圖標(biāo)。
<link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
在不同瀏覽器下測試發(fā)現(xiàn)Chrome，F(xiàn)irefox，IE edge下小圖標(biāo)均換成了圓角的“圖標(biāo)”。
然后我們打開控制臺看下chrome瀏覽器下請求的尺寸是32X32的PNG圖標(biāo)
再看下Firefox的請求則是16X16和128X128兩個尺寸
為什么要引用多個尺寸
ICO是Windows的圖標(biāo)文件格式，此格式圖標(biāo)文件可以存儲單個圖案、多尺寸、多色板的圖標(biāo)文件。一個圖標(biāo)實際上是多張不同格式的圖片的集合體，并且還包含了一定的透明區(qū)域。
我們知道一張小圖被放大很多，圖片就會變得很模糊；相反，如果很大的圖片縮成很小，圖片也會看不清，也就是大家說的圖片花了。
最佳的解決方法就是按對應(yīng)場景設(shè)計不同分辨率圖標(biāo)集成為一個 ico 格式的圖標(biāo)
ico_test.ico 是由右邊7個 png 合成的，每個 png 上的數(shù)字對應(yīng)了自己的分辨率，然后我把ico_test.ico應(yīng)用到一個測試程序上，得出效果如下:
favicon的圖片在線轉(zhuǎn)換(免費無廣告)
https://realfavicongenerator.net/
favicon與404
本地網(wǎng)頁開發(fā)的時候，Chrome瀏覽器經(jīng)?？梢钥吹?favicon.ico 404錯誤，這個可以忽略，只要線上服務(wù)器跟地址有favicon.ico就可以了，不要擔(dān)心上線會出問題，因為網(wǎng)頁如果沒有指定favicon瀏覽器會自動從域名的根目錄下查找名為favicon.ico的文件，如果找不到就會404。
如果本地這個錯誤提示讓你很煩，則你可以制作一個和線上favicon.ico形狀圖形一樣，但顏色不同的favicon.ico放在本地開發(fā)目錄的跟地址中。比如：線上favicon用藍色系的，本地環(huán)境的favicon.ico使用紅色系；
這樣一眼就看清楚到底是線上環(huán)境還是本地環(huán)境，免得數(shù)據(jù)測試的時候不小心在線上環(huán)境操作。我找了張css-tricks的示意圖：
如何讓網(wǎng)站不去請求favicon圖標(biāo)
在做 H5 混合應(yīng)用的時候，不希望產(chǎn)生 favicon.ico 的請求?？梢栽陧撁娴?<head> 區(qū)域，加上如下代碼實現(xiàn)屏蔽：
<link rel="icon" href="data:;base64,=">
或者詳細一點
<link rel="icon" href="data:image/ico;base64,aWNv">
favicon與base64
favicon除了使用線上地址，還支持base64格式內(nèi)聯(lián)，例如：
<link rel="icon" href="data:image/x-icon;base64,AAABAA...8AAA==" type="image/x-icon" />
file://協(xié)議打開的本地HTML靜態(tài)頁面可以使用這種方式讓瀏覽器地址欄的favicon顯示。
[參考文章]
[1]https://www.zhangxinxu.com/wordpress/2019/06/html-favicon-size-ico-generator/?shrink=1.
[2]http://www.itdecent.cn/p/58007c9a762d.
[3]https://www.cnblogs.com/kunmomo/p/13398818.html
[4]https://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32x32-or-16x16
