相信大家都看過瀏覽器網頁前面的這個圖示,可能非網頁開發者不知道該怎麼稱呼,他的正確名稱為 favicon,可以透過 HTML 的設定指定圖片。
目前 favicon 支援的格式很多種,傳統的格式為 .icon,如果你把 favicon.icon 的檔案放到網站的根目錄下,也就是 /favicon.ico,即使不在 HTML 設定預設也會去抓該張圖來顯示,而要設定的話可以使用以下幾種格式,不同的格式要對應不同的 type,像傳統的 .ico 就是:
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
或是目前比較常見的
<link rel="icon" href="favicon.ico" type="image/x-icon">
其他各種格式的話可以參考以下:
<link rel="icon" href="favicon.gif" type="image/gif">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
其中圖片大小 ico, fig, png 等是 16x16 或 32x32,若是使用 svg 就沒有圖片大小限制,而實際使用上有遇過一個狀況就是 .ico 的暫存時間會頗久,如果有要更新可能要花多一點時間才會看到更新後的內容要注意一下。
對我來說沒有設定 favicon 的網站看起來很討厭,希望大家在做網站的時候都可以記得設定一下 favicon。
網路上有一些工具可以協助我們製作 favicon 可以參考看看。