favicon-gen

favicon-gen 技能是一款專為開發者與網頁設計師打造的自動化設計到產品化工具，旨在快速生成高品質的網站圖示組合。它透過接收原始輸入（如品牌標誌、首字母或特定品牌顏色），自動產出所有符合現代網頁標準的格式，包括 favicon.svg、favicon.ico、apple-touch-icon.png 及 Android/PWA 專用圖示，免除繁瑣的手動圖像處理需求。此技能亦能自動產生必要的 site.webmanifest 檔案，並提供整合所需的標準 HTML 標籤。

• 從單一原始 SVG 自動生成多種尺寸（16x16, 32x32, 180x180, 192x192, 512x512）。

• 支援多種設計方法：從標誌擷取圖示、從首字母建立縮寫圖示 (Monogram)、以及生成品牌化形狀（圓形、方形、盾牌）。

• 內建處理平台特定細節的邏輯，例如確保 iOS 圖示具備實心背景，以避免常見的「黑色方塊」渲染問題。

• 直接整合 ImageMagick 以進行強大的圖像轉換與處理。

• 提供循序漸進的工作流程，用於測試 16x16 尺寸的可讀性，並針對小尺寸螢幕簡化圖示設計。

• 先決條件：系統需安裝 ImageMagick (convert 指令)。

• 輸入：接受原始標誌檔案、品牌顏色 hex 代碼或用於縮寫圖示的文字。

• 輸出：包含標準化圖示檔案的完整目錄及客製化的 manifest.webmanifest。

• 使用場景：初始化新網站專案、替換預設 CMS 圖示（如 WordPress 的 W 標誌）、排解行動裝置主畫面圖示渲染問題，或確保網頁應用程式的 PWA 相容性。

• 最佳實踐：務必測試小比例的可讀性，並在縮寫圖示中使用粗體字以維持在較小尺寸下的清晰度。