shortcut icon VS bookmark
shortcut icon：特指瀏覽器中地址欄左側顯示的圖標，一般放大小為16x16 或者 32*32（再大是完全沒有必要的！），後綴名為.icon的圖標；
bookmark：瀏覽器書簽、收藏用的圖標；
<head> <title>shortcut icon VS bookmark</title> <!-- 地址欄左側顯示的圖標 --> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <!-- 書簽、收藏用的圖標--> <link rel="bookmark" type="image/x-icon" href="favicon.ico"> </head>
圖片幾種大小規格
-
16*16
-
32*32
-
48*48
-
64*64
-
128*128
兼容：
對於不同的瀏覽器，方法是有差別的
1.瀏覽器通用：這大概是所有瀏覽器通用的在標簽頁加入指定圖標的方法：
把favicon.ico圖標放到網站根目錄下，在網頁的<head></head>中加入<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!DOCTYPE html> <html> <head> <title>shortcut icon</title> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> </head> <body> <h1>shortcut icon</h1> <p>特指瀏覽器中地址欄左側顯示的圖標，一般放大小為16x16 或者 32*32（再大是完全沒有必要的！），後綴名為.icon的圖標；</p> </body> </html>
2.對於IE或TT瀏覽器：把需要顯示的16x16像素的ICO圖標命名為favicon.ICO放置在網站根目錄下，瀏覽器會自動檢索
3.對於火狐瀏覽器：圖標格式沒有IE那麽嚴格，GIF和PNG格式的圖標也可以顯示，圖標名稱也可以不是favcion
把圖標放在根目錄後，在<head></head>中加入
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="gif_favicon.gif" type="image/gif" >
或
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="png_favicon.png" type=" image/png" >
4.特殊：vue框架要改配置文件build/webpack.dev.conf.js
附加：
圖片轉化為ico格式
在線工具：比特蟲http://www.bitbug.net
shortcut icon VS bookmark