你已經有 logo 了。你需要的，是把這個 logo 變成瀏覽器期待的那一堆小圖示檔案——一個 favicon.ico、幾張特定尺寸的 PNG、一個 web manifest，以及把它們接起來的 HTML。這個轉換是機械活，不裝任何東西、大約一分鐘就能搞定。
麻煩在於，不是每個 logo 都能優雅地縮小。所以下面既講快捷路徑，也講怎麼修好一個到了 16 畫素就糊成一團的 logo。
簡短版
- 把你的 logo 弄成一張正方形圖——最好 512×512 或更大，透明或純色背景。
- 丟進 Favicon 產生器。
- 下載生成的整套檔案，放進你的站點根目錄。
- 把提供的 HTML 片段粘進你的
<head>。
整件事就這些。產生器會輸出 favicon.ico、16/32/48/180/192/512 的 PNG、一個 webmanifest，以及那幾行現成的 <link> 標籤——省得你手動裁六張圖或猜 manifest 的寫法。
先處理好你的 logo——質量的成敗在這一步
favicon 在瀏覽器標籤頁裡是 16×16。任何扛不過這個尺寸的細節都是白費。在這兒花兩分鐘，結果在哪兒看都清晰。
做成正方形。 favicon 是方的。又寬又橫的 logo 會被加黑邊或壓扁。裁到最好認的那個元素——通常是標誌本身或單個首字母——放在正方形畫面中央。
去掉文字標。 完整的公司名在標籤頁尺寸下讀不出來。"Acme Corporation" 會糊成一道灰。留下符號，或一個字母，名字交給標籤頁標題去承載。
在深淺兩種主題下都檢查對比。 瀏覽器標籤頁有淺色也有深色。深藏青圖示在深色標籤上會消失；淺色圖示在淺色標籤上會消失。如果你的標誌是一塊純色，確保這個顏色在兩種背景上都讀得出。一圈淡描邊或一小塊純色底片會有幫助。
留出呼吸空間。 在正方形里加一點留白，別讓圖示頂到邊。它在每個位置都會更平衡。
從大圖開始。 512×512（或更大）的源圖，能給產生器乾淨的細節去縮小。先把小 logo 放大，只會把模糊烙進去。
透明還是純色背景？
都行——看你要什麼效果。
- 透明讓標籤頁或主屏的背景透出來。乾淨現代，還能適應深淺環境。適合你的標誌本身是個清晰形狀的情況。
- 純色底片（標誌後面一塊圓角色塊）保證圖示不管背後是什麼都讀得出。多數應用圖示就是這麼做的，如果你的 logo 偏細或對比低，這是更穩的選擇。
拿不準時，用品牌色做一塊純色底片是穩妥選項——它絕不會消失在同色背景裡。
下載之後：檔案放哪兒
產生器給你一套檔案和一段片段。兩條放置規則就夠了：
favicon.ico放在你的站點根目錄（/favicon.ico）。即使沒有<link>標籤，瀏覽器和 Windows 也會按名字去那裡找它。- 其餘檔案放哪兒都行，只要 HTML 片段裡的路徑對得上。多數人把它們全放在根目錄，片段原樣粘上。
然後就是那段 <head> 片段——圖示連結、apple-touch-icon 和 manifest 引用。貼上、部署、強制重新整理，你應該就能在標籤頁裡看到你的 logo。
為什麼在瀏覽器裡做？
因為你的 logo 從不離開你的機器。整個過程——讀取圖片、縮放到每個尺寸、打包 .ico、寫 manifest——都用 Canvas 在你的瀏覽器本地完成。什麼都不上傳到伺服器，無需註冊、沒有浮水印，第一次訪問後工具也能離線用。對於一個也許還沒釋出的品牌素材，把它留在第三方伺服器之外是明智的預設選擇。
只要你的 logo 是正方形、高對比、小尺寸下讀得出，生成整套就是最輕鬆的那一步了。