圖示工坊
一個標誌進，一整套出：瀏覽器分頁、導覽列標誌、iPhone 主畫面、Android / PWA、Chrome 擴充功能、圓形頭像。每個尺寸都依平台公布的規則繪製與命名，並在真實介面裡、以實際顯示的大小預覽。
將圖片拖曳到這裡，或點擊選擇
JPG / PNG / WebP / AVIF / GIF（僅取第一幀）；建議 2560px 以上。
建議使用 1024×1024 的正方形標誌；非正方形也可，會依比例留白嵌入。
你實際會拿到什麼
三個值得先知道的坑
iOS 圖示不能帶 alpha
把帶 alpha 的 PNG 交給 apple-touch-icon.png，系統會把透明像素填成黑色——深色手機上出現一圈暗環，看起來像壞掉的素材。這裡會強制把那些尺寸做成不透明。
maskable 只保證中央 80%
Android 自適應圖示會被裁成啟動器的形狀（圓形、圓角矩形、水滴形），只有中央 80% 保證看得見：512 的安全圓直徑只有 410px。把文字或關鍵形狀往邊緣推，在主畫面上就會被切掉。
在 16px 下只剩剪影
分頁裡的 favicon 是 16×16——總共 20 個像素。細線、漸層、小字全部消失，只剩色塊。產生後把預覽放大到 8 倍看輪廓；如果認不出來，就簡化標誌。
常見問題
檔案沒問題，但上線後網站就是不採用時我的圖片會被上傳到哪裡嗎？
不會。解碼、嵌入、編碼都在瀏覽器 canvas 裡執行，這個頁面沒有接收檔案的端點——打開網路面板：除了頁面自己的靜態資源，沒有任何請求帶著你的圖片。
20 個檔案都要放上去嗎？
不用。最低限度是 favicon.ico（舊版用戶端只會要這個）加一個 PWA 圖示（192 或 512，這是安裝性檢查看的）。其餘依你要上的平台補充。iOS 主畫面這組有 4 個尺寸（180 / 167 / 152 / 120）；只做 iPhone 的話 180 就夠。
換了新圖示，分頁還是顯示舊的？
favicon 是網路上最難搞的快取之一，常常比引用它的 HTML 活得更久。本機用強制重新載入（⌘/Ctrl + Shift + R）；正式環境還要等 CDN 與瀏覽器快取過期。想立刻驗證，就在 link 的 href 後面加 ?v=2——網址一變就會重新抓取。這一切都跟你產生的檔案無關。
favicon.ico 和 PNG 兩個都要嗎？
要，而且不需要拆開處理。favicon.ico 供應直接要求 /favicon.ico 的舊版用戶端，裡面已經內含 16 / 32 / 48，瀏覽器會依顯示密度挑；PNG 則是給現代瀏覽器與閱讀器的明確宣告。
為什麼 favicon.svg 放大後會模糊？
因為那兩個檔案是包在 SVG 裡的點陣圖，不是真正的向量。點陣圖無法轉成向量——在 16px 上描路徑只會變成雜訊，誠實嵌入反而更好。它們存在的目的是讓檔名與引用對得上；正式上線請設計端用同一個檔名匯出真正的向量 SVG。
來源要多大？可以不是正方形嗎？
用 1024 × 1024 的正方形標誌，剛好能完整覆蓋最大的輸出。非正方形也可以：它會依比例嵌在畫布中央，短邊留白，絕不拉伸，留白量由留白滑桿控制。
卡片上顯示「來源太小」是什麼意思？
那個尺寸的畫布超過你來源的可用範圍，那些像素只能往上插值，看起來就會軟——問題在輸入，不在匯出。換更大的來源，或打開「不放大」直接嵌入原始像素，看到像素格而不是模糊。
我選了方形，為什麼頭像還是方的？
它一直都是方的。512 匯出的是方形畫布，圓形是上傳後由平台套上的。形狀選圓形時，匯出的 PNG 四角是透明的，而某些頭像位置會把透明填成白或黑——不確定時就保持方形。
拖動留白滑桿會一直重算嗎？
會重算，但做了合併：你停手才繪製，期間再有變動就取消前一次。重繪時舊結果會留在畫面上，最後一次性換掉，所以拖動過程不會把頁面打成一堆骨架。
ZIP 裡還有什麼？
一份 README.txt：來源名稱與尺寸、若有裁切則記裁切範圍、這次的繪製參數（形狀 / 留白 / 背景 / 透明）、完整檔案清單，以及兩段程式碼。同事不用問你就能接手。壓縮檔名像 icons-20261024-1208.zip，帶本機時間戳。