瀏覽器分頁、書籤與瀏覽紀錄上的那個小圖示,就是 favicon。做得好,網站看起來更完整,在一堆分頁裡也更容易一眼認出。
favicon 到底是什麼
它通常放在 /favicon.ico,而 .ico 是一種能在單一檔案裡裝多種尺寸的容器——常見的是 16×16、32×32、48×48。瀏覽器會依情境(分頁、書籤、工具列)挑最合適的尺寸。這也是為什麼真正的 .ico 勝過單張 PNG:一個檔案在任何尺寸都清晰。
從方形圖片開始
- 用方形來源,最好 256×256 以上。非方形會被裁切或加黑邊。
- 保持簡單——在 16px 下細節會消失。單一字母、標記或粗實的形狀最清楚。
- 帶透明背景的 PNG 很適合。
製作 .ico——完全不上傳
你的 logo 就是品牌,沒必要傳到來路不明的伺服器。以下工具全程在瀏覽器本機執行:
- PNG 轉 ICO / Favicon 產生器:拖入 PNG,得到含多種尺寸的
favicon.ico。
加到你的網站
把 favicon.ico 放在網站根目錄,並在頁面 head 內引用:
<link rel="icon" href="/favicon.ico" sizes="any">現代瀏覽器也接受 PNG 圖示,許多網站兩者都放。若圖示沒更新,請強制重新整理——瀏覽器對 favicon 的快取非常積極。
想要的是可縮放的 logo,而不是固定尺寸的圖示?看如何把 PNG 轉成 SVG。