Favicon 產生器
把文字、縮寫或本機圖片變成一整包網站圖標：favicon.ico、多尺寸 PNG、site.webmanifest 與 HTML 片段，全部在瀏覽器完成。
圖示內容
預覽與下載
HTML 連結程式碼
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Favicon 產生器可以做什麼
Favicon 是瀏覽器顯示在分頁、書籤與歷史紀錄上的小圖標。重點不只是圖好不好看，而是檔案齊不齊：網頁沒有宣告圖標時，瀏覽器會直接向網站根目錄要 /favicon.ico；手機與平板則需要 PNG 加上 web app manifest，才會把網站加到主畫面。
這個工具用 canvas 在瀏覽器裡畫圖，客戶的 Logo 或品牌縮寫都不會上傳。它會產出含 16、32、48 px 三種畫格的 favicon.ico、六種尺寸的 PNG、site.webmanifest，以及五行 link 標籤，可單獨下載或打包成一個 ZIP。
如何產生 Favicon
- 先選來源：輸入 1 到 4 個字元做文字圖標，或拖入本機的 PNG、JPG、WebP、SVG Logo。
- 調整字體、文字大小、顏色、形狀與留白，圖片模式則調整縮放方式；分頁預覽會即時更新。
- 把 16 px 與 512 px 的預覽並排比較。小尺寸糊掉時，改用更少的字元、更厚的形狀或更高的對比。
- 按「下載 .zip」，把檔案放到網站根目錄，再把 HTML 片段貼進 '<head>'；下方也可單獨下載 ico、PNG、manifest 與片段。
Favicon 範例
圓角底 + 品牌縮寫
AK、無襯線、文字大小 58%、白色字配藍綠色底、圓角、留白 8%
favicon.ico 內含 16/32/48 三種畫格，另附六種 PNG 與主題色 #0f766e 的 manifest
本機 Logo 做成 App 圖標
logo.png、完整顯示、透明背景、圓形
PNG 保留透明角落，favicon.ico 打包三個小尺寸畫格
單一字母、單色
U、展示字體、文字大小 85%、方形、無留白
紮實的方形圖標，縮到 16 px 仍然清楚
UrsaKit 與其他 Favicon 產生器比較
| 比較項目 | UrsaKit | realfavicongenerator.net | favicon.io | favicomatic.com |
|---|---|---|---|---|
| 價格 | 免費、免註冊 | 免費，進階功能付費 | 免費、免註冊 | 免費 |
| 產生位置 | 你的瀏覽器 | 對方伺服器 | 文字模式在你的瀏覽器 | 對方伺服器 |
| 是否上傳 Logo | 不會 | 會 | 只有圖片模式會 | 會 |
| 文字／縮寫模式 | 有 | 沒有 | 有 | 沒有 |
| favicon.ico 畫格 | 16、32、48 | 16、32、48 | 16、32、48 | 可自行勾選 |
| 附帶檔案 | PNG、manifest、HTML 片段 | HTML 與各平台指南 | PNG 與 manifest | PNG 與 Metro 磚 |
| 整包下載 | 一個 ZIP | 一個 ZIP | 一個 ZIP | 一個 ZIP |
常見問題
這個 Favicon 產生器要收費嗎？
不用。文字與圖片兩種模式、所有尺寸與 ZIP 打包都免費，不需要註冊，也沒有浮水印。
我的 Logo 會被上傳嗎？
不會。文字圖標用 canvas 繪製，圖片用 FileReader 讀取，兩者都留在瀏覽器裡，ZIP 也是本機組出來的。
到底需要哪幾個尺寸？
favicon.ico 內含 16、32、48 三種畫格就能涵蓋瀏覽器；再加上 favicon-32x32.png 與 favicon-16x16.png 給現代瀏覽器、180 px 的 apple-touch-icon.png 給 iOS，以及 192 與 512 px 給 manifest。
ICO 和 PNG 需要同時放嗎？
一起放最保險。仍會直接抓 /favicon.ico 的瀏覽器拿得到圖標，PNG 加 manifest 則讓 Android 與 iOS 的主畫面圖標保持清晰。
檔案要怎麼裝到網站上？
把 favicon.ico 與 PNG 放在網站根目錄（與 index.html 同一層），再把五行 link 標籤貼進 head。預覽下方的片段可以直接複製。
可以用自己的 Logo 取代文字嗎？
可以。把來源切到「圖片」，選擇 5 MB 以內的 PNG、JPG、WebP 或 SVG，再挑「完整顯示」或「填滿裁切」。