製作一個 favicon 只需要三步：準備一張方形圖片，轉成 ICO 檔案，往 HTML 裡加一行 <link> 標籤。轉換這一步用我們的圖片轉 ICO 工具在瀏覽器裡就能完成——不必上傳，不必註冊。整個活兒五分鐘左右。下面把每一步裡真正要緊的細節講清楚。
favicon 到底是什麼
favicon 是綁定在網站上的小圖示。它出現在瀏覽器分頁、書籤列表、瀏覽紀錄裡，有些瀏覽器還會把它放在網址旁邊。在分頁列裡它只有 16×16 像素，卻往往是訪客開了八個分頁之後唯一還能看到的品牌識別。
經典的 favicon 是一個 .ico 檔案，而 ICO 有一個在此至關重要的特性：它是容器。單個 ICO 檔案可以裝下同一影像的多個解析度——通常是 16×16、32×32 和 48×48——瀏覽器按場景自動挑選。分頁列取 16，Retina 螢幕取 32，Windows 捷徑對話框取 48。容器格式的原理見我們的 ICO 格式深度解析。
這個慣例來自 1999 年的 Internet Explorer 5，它會自動向每個造訪過的網站請求 /favicon.ico。檔名就這麼留了下來。而圖示的觸及範圍後來還在擴大：Google 在行動搜尋結果旁邊顯示 favicon，這個 16 像素的小方塊已經悄悄成了你搜尋摘要的一部分，不只是分頁裝飾。
第一步：準備原圖
原圖決定 favicon 是清晰銳利還是一坨污漬。三條規則：
裁成方形。 favicon 是方的。如果你的標誌是橫寬的，先裁切或補齊成方形畫布，否則轉換會把它壓扁。
保持簡單。 16×16 一共只有 256 個像素。細線條、漸層、小字都會化成雜訊。一個粗重的圖形，或一兩個粗體字母能活下來；細節豐富的插畫活不下來。測試方法：把圖縮到縮圖大小——你在那個尺寸認不出它，瀏覽器分頁也認不出。
從大圖做起。 至少從 512×512 開始。縮小能掩蓋瑕疵，放大只會製造瑕疵。
原圖的檔案格式基本無所謂。圖示帶透明背景就用 PNG 或 WebP——JPG 存不了透明度，透明區域會被壓到白底上。純色底上的扁平標誌，用 JPG 也行。
第二步：把圖片轉成 ICO
把原始檔案拖進對應格式的轉換器：PNG 轉 ICO、JPG 轉 ICO 或 WebP 轉 ICO。工具在你的瀏覽器本機解碼圖片，把標準尺寸打進一個 ICO 容器，給你一個檔案下載。沒有任何上傳，整個流程都在你的電腦上跑。
多尺寸容器正是該用 ICO 而不是把 PNG 改個名的原因。一張 512×512 的 PNG 直接當 favicon 用，會逼著瀏覽器現場縮小，而自動縮小對精細圖形從不客氣。ICO 裡裝的是手工調優過的小尺寸版本，瀏覽器只管挑。
ICO 裡該裝哪些尺寸、什麼時候需要 ICO 之外的額外檔案，是單獨一個話題——我們的 favicon 尺寸指南 有完整表格，包括 iOS 主畫面用的 apple-touch-icon 尺寸。
第三步：接入你的網站
把 favicon.ico 放到網站根目錄，然後在頁面的 <head> 裡加一行：
<link rel="icon" href="/favicon.ico" sizes="any" />
sizes="any" 這個提示告訴瀏覽器檔案裡有多個解析度，讓它挑最合適的，而不是預設當成 16×16。
把檔案放在 /favicon.ico 的意義不止於 link 標籤。對於什麼都沒宣告的網站，瀏覽器會自動請求這個路徑；RSS 閱讀器、爬蟲預覽之類的工具也會往這裡找。根目錄的 favicon 連忘了寫標籤的頁面都能涵蓋到。
現代瀏覽器也接受 PNG favicon，宣告方式如下：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
PNG favicon 單檔更小、產生更容易，但相容性的王座仍歸 ICO：它在有史以來每個瀏覽器裡都能用，它是 /favicon.ico 自動請求所期待的格式，而且一個檔案涵蓋所有尺寸。兩個都發——根目錄放 ICO 外加 PNG 宣告——是大多數網站最終落地的雙保險方案。
檢查效果
強制重新整理頁面（favicon 快取得非常頑固），然後看分頁、書籤列和瀏覽紀錄。如果圖示在分頁尺寸下發糊，問題幾乎從來不在轉換器——在原圖。回到第一步，簡化圖形，重新轉換。
你的標誌檔案現在多半正躺在某個資料夾裡。把它拖進轉換器，接上 link 標籤——你的分頁就不再是那個空白的文件圖示了。