為什麼還要再做一個 favicon 產生器
搜尋「favicon generator」的第一頁大多是中小型獨立網站——這是好消息,代表排名並沒有被大品牌鎖死。這些網站做錯的地方不是轉檔,而是收尾:只給你 favicon.ico 和可能三張 PNG,接著 manifest、maskable 版本,以及真正要放進文件 head 的標記,都得自己來。
所以這個工具是以「一次做完」為目標打造的:
- 整組圖示,不只是 .ico。 內含 16/32/48 的 favicon.ico、favicon-16x16.png、favicon-32x32.png、180 的 apple-touch-icon.png、Android 192/512,以及在不透明背景上、內容留在安全區內的 maskable 512。
- 片段對得上你的技術棧。 可直接貼上的 HTML head 區塊,以及會產生同一組標籤的 Nuxt 3 app.head 設定——如果你寫 Vue,「貼進 nuxt.config.ts 就能用」才是真正省時間的地方。
- 上線前就看得出來。 16 與 32 像素的真實尺寸預覽,加上淺色/深色模式的模擬瀏覽器分頁,讓「在 16 像素糊成一團」的標誌在這裡就被抓到,而不是在正式環境。
- 對透明度的代價誠實以告。 iOS 會把透明的主畫面圖示合成在黑底上,而 maskable 圖示需要不透明的安全區。工具會直接說明,並把背景色填在兩者後面,而不是交付一個在某個平台會壞掉的圖示。
所有產物都由你分頁裡的 canvas 產生:你拖進來的檔案不會被上傳、不會建立分享連結,ZIP 也在本機組裝。.ico 容器是以 PNG 內容逐位元組組出來的,因此在今天所有重要的瀏覽器都能用——包含大家真正看到的那個 16 像素分頁圖示。