對favicon進行base64 編碼？

時間 2019-11-13

原文原文鏈接

打算給網站加上個標籤欄裏的圖標，相似這種。css

據維基百科，Favicon是favorites icon的縮寫，亦被稱爲website icon（網頁圖標）、page icon（頁面圖標）或urlicon（URL圖標）。Favicon是與某個網站或網頁相關聯的圖標。瀏覽器能夠將favicon顯示於瀏覽器的地址欄中，也可置於書籤列表的網站名前，還能夠放在標籤式瀏覽界面中的頁標題前。html

任何一個適當大小的（16×16像素或更大）的圖像均可以用做favicon。有兩種實現方法，第一種是將圖標命名爲「favicon.ico」，並置於web服務器的根目錄下，便可以自動顯示該文件。第二種方法更爲靈活，即便用HTML來爲任何一個網頁指示其圖標所存儲的位置。這種方法是經過在頁面的<head>部分添加兩個link組件來實現的：web

    <link rel="icon" href="Images/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon" />

這樣，圖標位置不必定要在web服務器根目錄下，名字也不必定是favicon.ico。我爲了更好的兼容性，兩種方法都用上了。結果測試的時候發現圖標在chrome上顯示不了，但IE、360、百度瀏覽器都是能夠的。就在我不得其解的時候，把目光投向其餘項目，發現居然有采用base64編碼的。相似這樣：chrome

<link rel="icon"
   href="data:image/ico;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAA

這是什麼意思呢？即圖片的 base64 編碼就是將一幅圖片數據編碼成一串字符串，使用該字符串代替圖像地址。因而找了個圖片在線轉換base64 的工具，轉換以後獲得一串字符串，用來替換原來的圖片地址。而後，刷新瀏覽器緩存，chrome上也能夠顯示了。。問題解決。瀏覽器

但爲何要這樣呢？咱們知道，網頁上的每個圖片，都是須要消耗一個 http 請求下載而來的，要是圖片的下載不用向服務器發出請求，而能夠隨着 HTML 的下載同時下載到本地那就太好了，而 base64 正好能解決這個問題。可是，這種方法也有侷限性，那就是被 base64 編碼的圖片尺寸要足夠小，不然將其製做轉化成 base64 編碼時，生成的 base64 字符串編碼會很長。想象一下，一個元素的 css 樣式編寫超過了 2000個字符，那對 css 總體的可讀性將會形成十分大的影響，代碼的冗餘使得在此使用 base64 編碼將得不償失。緩存

favicon圖標在這裏是沒問題的，由於這個圖標自己不會太大，這種轉換也就可行。服務器