什麼是網站圖示產生器？
這款網站圖示產生器可從上傳的圖片、輸入的首字母或一個表情，產生網站所需的全部圖示尺寸。選擇一種來源，即可取得包含 16×16、32×32 和 48×48 的 ICO 檔案、可無損縮放的 SVG，以及適用於 Apple Touch 圖示和 Android 主畫面的 PNG 版本，直接放入專案即可使用。
可以從圖片開始，也可以輸入一到三個字母並搭配字型和形狀，或直接選一個表情。工具接著會渲染六個 PNG(16、32、48、180、192、512 像素)、一個清晰的 SVG，以及一個多解析度 ICO，後者包含 Windows 標籤頁仍會用到的三個小尺寸。所有檔案打包成 ZIP，含 site.webmanifest 和可直接貼到 <head> 中的 link 標籤。方形的 SVG 或 PNG 來源縮放效果最乾淨。
使用方法
- 選擇來源：上傳一張方形圖片（PNG、JPG 或 SVG，建議 512×512 或更大）、輸入首字母並選擇字型和形狀，或挑選一個表情。
- 預覽所有標準尺寸的產生圖示（16px、32px、48px、180px、192px、512px）。
- 下載完整的圖示包ZIP檔案，包含ICO檔案、所有PNG尺寸以及可直接貼到頁面標頭的HTML link標籤。
何時使用
- 為新網站或 Web App 加上瀏覽器分頁與主畫面圖示。
- Logo 改版後,在現有網站上統一刷新品牌圖示。
- 產生符合 manifest 規範的 PWA 圖示,用於「加到主畫面」。
結果
一位開發者上傳了新創公司1024×1024的Logo。工具產生了完整的圖示集，包括favicon.ico（16/32/48）、apple-touch-icon.png（180×180）和Android圖示（192/512），以及HTML meta標籤程式碼。
常見問題
- 為什麼 favicon 需要這麼多不同尺寸?
- 每個平台請求的尺寸都不一樣:Chrome 分頁用 32 像素,書籤用 16,iOS 主畫面用 180,Android 主畫面用 192,PWA 啟動畫面用 512。一次出完整套,圖示在任何地方都能保持清晰。
- 我該上傳 PNG、SVG 還是 JPG?
- SVG 最好,它能無損縮放到任何尺寸。其次是 512×512 的 PNG。JPG 也行,但有損壓縮可能讓圖示邊緣出現光暈,在 16 和 32 像素下尤其明顯。
- ICO 檔裡到底裝的是什麼?
- ICO 是一種容器格式。這裡產生的 ICO 包含三層點陣圖(16、32、48 像素),Windows 會根據顯示位置(工作列、檔案列表、瀏覽器分頁)自動挑最合適的那一層。
- 解壓後這些檔案要放到專案的哪裡?
- 解壓到網站的 public 根目錄,和 index.html 放在一起。提供的 link 標籤用根路徑(/favicon.ico、/apple-touch-icon.png),所以純 HTML 專案或 Next.js、Astro、Vite 等框架都不必額外設定。
- 我換了 favicon 但瀏覽器還顯示舊的怎麼辦?
- 瀏覽器會非常積極地快取 favicon。強制重新整理頁面(Windows 上 Ctrl+Shift+R,Mac 上 Cmd+Shift+R),或者在 link 標籤後加查詢字串如 /favicon.ico?v=2 強制重新抓取。快取通常一天內會自動失效。