Favicon生成器

📖 工具介紹

做網站圖標的小工具，不用裝設計軟件，也不用去記各種尺寸規範。中間是一塊實時預覽畫布，左邊改任何參數，右邊立刻重畫，所見即所得。支援文字和 Emoji 兩種內容模式，透明背景和圓角都能調。

字型給了十來種開源中英文字型，字重從 200 到 900 九檔，還能疊斜體、下劃線、刪除線、描邊、發光、大小寫轉換和字距調整。背景色預設跟著你網站的主題色走，文字顏色會按背景亮度自動取深色或淺色，保證任何配色下都看得清。

匯出時一次能打包好幾種尺寸，16×16 到 512×512 之間任意勾選，格式支援 PNG、ICO、WebP 和 SVG。ICO 會把多個尺寸合成一個真正的多解析度圖標檔案，SVG 則是矢量，放大不模糊。

做圖標時最容易踩的坑是尺寸和背景。瀏覽器標籤頁上只有十六像素見方，塞三個字進去就是一團糊；而 favicon 檔案如果背景是白的，放在深色瀏覽器工具欄上會顯得突兀。所以這裡把預設背景直接設成網站主題色，並讓文字顏色按亮度自動取深色或淺色，省掉這一步的反覆試錯。

生成完之後別忘了收尾：把 favicon.ico 放在網站根目錄，多數瀏覽器會自動去找它；再在頁面 head 中加入 PNG 版本的 link 標籤，移動端儲存到主屏幕時會用上更高清的那張。改過圖標之後如果瀏覽器還顯示舊的，清一下快取就能看到新的。

圓角這個參數值得單獨提一句。同一份圖標，圓角設成零是方的，設到百分之五十會變成完整的圓形，中間的取值是常見的圓角矩形效果。不同平臺對圖標形狀的處理不一樣，iOS 傾向於給方形圖標加圓角遮罩，Android 則常見圓形，所以選一箇中間值通常兩邊都不突兀。

✨ 功能特點

• 文字與 Emoji 兩種內容模式，文字可單獨調字號、字重、字距與偏移量
• 十幾種開源字型可選，字重九檔，另有斜體、下劃線、雙下劃線、刪除線等樣式開關
• 描邊、陰影、發光等效果可覆蓋，做出有層次的圖標
• 大小寫轉換與寬窄字距一鍵切換，省掉手動調整
• 背景色預設跟隨網站主題色，文字色按背景亮度自動取黑白，切主題時同步更新
• 一次匯出多種尺寸，PNG、ICO、WebP、SVG 四種格式，ICO 支援多解析度合成

🚀 使用方式

1. 在文字模式輸入品牌縮寫或首字母，或切到 Emoji 模式挑一個圖形
2. 選字型與字重，需要就開啟描邊、發光等效果開關
3. 調整背景色與圓角，勾選透明背景可獲得無底色圖標
4. 在尺寸區勾選需要的尺寸，選擇匯出格式
5. 點匯出按鈕下載，把生成的檔案放到網站根目錄並加上對應的 link 標籤

⚠️ 注意事項

• 字型需聯網載入：字型檔案來自在線字型服務，斷網時會退回系統字型，預覽與匯出外觀會有差異
• 小尺寸會丟細節：16×16 下複雜文字和細描邊會糊成一團，小圖標建議只用一兩個字元
• SVG 不含位圖：匯出 SVG 時它是純矢量描述，用位圖字型渲染的效果在別的機器上可能不一致
• 瀏覽器兼容性：WebP 在老舊瀏覽器上支援有限，追求最大兼容請用 PNG 或 ICO
• ICO 合成有上限：一次勾選的尺寸過多會讓 ICO 檔案變大，通常選 16、32、48 三檔就夠用