瀏覽器端favicon產生原理
整個產生流程在您的瀏覽器分頁中執行，使用Canvas API和fflate壓縮函式庫。無需伺服器端處理，無需上傳，無需第三方服務。
- 載入來源圖片，或將文字或表情符號渲染到離屏畫布上。如果選擇了圖片，瀏覽器會原生解碼。如果選擇了文字模式，頁面將在畫布上以所選字型、前景色和背景色繪製您的文字。
- 對於每個目標尺寸（16、32、48、180、192、512像素），頁面建立一個精確尺寸的離屏畫布，然後使用Canvas API將來源內容繪製到其上。瀏覽器內建的圖片縮放功能自動透過雙線性或雙三次濾波處理縮小，在每個尺寸下產生清晰的favicon。
- 每個畫布透過
canvas.toBlob()匯出為PNG Blob。預覽面板顯示所有六種尺寸，供您在下載前檢查結果。從檔案名稱構建即用型 HTML區塊和Web應用程式manifest片段（manifest.json），方便直接放入網站head標籤中。 - 點擊下載ZIP時，頁面將所有PNG Blob讀入記憶體，使用fflate將它們與
manifest.json一起打包成單個ZIP壓縮檔，並一鍵觸發下載。整個打包過程在瀏覽器中完成——任何階段都不會上傳任何內容。
為什麼在瀏覽器中產生favicon？
- 完整的favicon集消除了瀏覽器首次造訪時的favicon未找到404錯誤，確保您的網站在書籤、瀏覽器分頁和PWA安裝介面中看起來專業。缺少尺寸意味著瀏覽器要麼不載入任何內容，要麼退回到模糊的最鄰近縮放。
- 捆綁的 HTML和manifest片段讓您無需手動編寫六個標籤和一個JSON manifest區塊。貼上到網站head中，根據需要調整路徑，幾秒鐘而非幾分鐘即可完成。
- 在缺乏照片編輯器的鎖定企業裝置上，用戶端產生是唯一的選擇。由於不上傳任何內容，不存在資料外洩風險，敏感或品牌圖片也無需合規審查。
- 文字和表情模式讓您無需任何圖片即可產生favicon。輸入品牌首字母、一個字母或表情符號，選擇字型和顏色，即可獲得完整的一套——非常適合個人專案、原型或只需要臨時佔位符favicon的網站。
常見favicon產生應用場景
每個被使用者收藏或安裝的網站都需要favicon。以下是瀏覽器端產生器節省時間的三種場景。
- 搭建新的登陸頁面或微型網站。在一分鐘內從品牌Logo產生完整favicon集，將標籤複製到網站head中，部署即可。無需設計工具。
- 為漸進式Web應用程式產生PWA圖示。manifest.json需要192×192和512×512的PNG圖示。與其他favicon一起一步產生，無需手動調整Logo大小。
- 為原型和暫存站點建立佔位符。輸入單個字母或表情符號，選擇背景色，即可獲得逼真的favicon，無需等待設計團隊的最終品牌素材。
實例：從公司Logo產生favicon集
您有一個500×500的PNG Logo，需要為新行銷網站準備完整的favicon集。
開啟此頁面，將Logo PNG拖入上傳區域。圖片載入後預覽會顯示在尺寸網格旁邊。點擊產生favicon。頁面將Logo繪製到六個離屏畫布上（16、32、48、180、192、512像素），並顯示每個結果。預覽面板下方出現即用型 HTML區塊，包含16/32/48尺寸的rel="icon"條目、180尺寸的apple-touch-icon連結以及PWA圖示的manifest連結。下方的manifest片段列出192和512圖示。點擊下載ZIP — 頁面透過fflate將所有六個PNG和manifest.json打包成單個ZIP壓縮檔。整個過程只需兩秒，除了初始頁面載入外不消耗任何頻寬。
工具產生哪些favicon尺寸？
六種尺寸：16×16、32×32和48×48用於標準瀏覽器favicon，180×180用於Apple觸控圖示，192×192和512×512用於PWA manifest圖示。每種尺寸都輸出為PNG格式。現代瀏覽器透過接受PNG格式的favicon。
可以從文字或表情符號產生favicon嗎？
可以。切換到文字或表情模式，輸入文字或貼上表情符號，選擇字型、前景色和背景色，然後點擊產生。文字會以高解析度渲染到離屏畫布上，然後縮放到每個目標favicon尺寸。
圖片會上傳到伺服器嗎？
不會。圖片永遠不會離開您的裝置。頁面使用瀏覽器的File API將圖片讀入記憶體，並使用Canvas API縮放和匯出每個favicon。產生時開啟DevTools網路面板——唯一的出站請求是初始頁面載入和廣告呼叫。沒有圖片資料傳輸。
接受哪些格式的圖片上傳？
瀏覽器能解碼的任何格式：PNG、JPEG、WebP、GIF和SVG（由瀏覽器柵格化）。檔案大小限制為每次上傳10 MB。
ZIP下載如何運作？
頁面使用fflate函式庫（按需從共享vendor路徑載入）將所有產生的PNG和manifest.json打包成標準ZIP壓縮檔。打包完全在瀏覽器記憶體中進行——無需上傳，無需伺服器往返。ZIP以Blob下載形式一鍵提供。
這些favicon可以用在任何網站上嗎？
可以。產生的PNG favicon適用於所有支援標籤的現代瀏覽器。180×180的Apple觸控圖示覆蓋iOS和Safari。192×192和512×512的PWA圖示滿足Android Chrome和其他支援PWA的瀏覽器的manifest要求。
有真正的.ico格式選項嗎？
目前版本輸出PNG，因為所有現代瀏覽器都透過接受PNG。真正的多解析度.ico格式尚未支援，可能會在將來的版本中新增。