Favicon 和 PWA 圖標生成器

01
源圖片
或者使用 AI 生成
02
配置平臺
已選 1 個平臺
03
預覽

1 個平臺

等待上傳圖片

上傳圖片後,您可以實時預覽每個平臺的效果

源圖片

協助改善圖示工具

上傳、選擇平台或匯出有問題嗎?請告知頁面、瀏覽器、平台與重現步驟。

聯絡表單會在新分頁開啟,保留目前工作。不會自動附加圖片或設定,請勿填入機密資訊。

提供工具意見(在新分頁開啟)
工具幫到你了嗎?
導出素材之後,歡迎用一杯咖啡支持作者繼續維護免費體驗。
  • 全部處理在瀏覽器本地完成,圖片不會上傳伺服器。
  • 一次導出覆蓋 iOS、Android、Chrome 等主流平臺。

每一杯咖啡都將用於伺服器成本與功能迭代。

Favicon 是在瀏覽器標籤頁中代表您網站的小圖標。對於漸進式 Web 應用 (PWA),您還需要 Web 清單和用於移動主屏幕的更大圖標。

安裝網站小圖示與 PWA 圖示

Web ZIP 包含 favicon.ico、16/32 px PNG、180 px Apple touch 圖示、192/512 px PWA 圖示、site.webmanifest 與 1200x630 的 og.png。

Web ZIP 檔案說明

兩張 PWA PNG 是一般正方形圖示,檔名與尺寸對應 site.webmanifest 的 icons 陣列;og.png 是獨立的分享圖片。

將圖示接入網站

  1. 將 Web 內的檔案複製到網站公開目錄並發布至網域根路徑,或依所選目錄調整引用。
  2. 修改 site.webmanifest 的 name 與 short_name。start_url 與 scope 相對於 manifest 所在位置;匯出的圖示路徑以 / 開頭。圖示放在子目錄時,請修改這些路徑。
  3. 在 HTML head 加入 manifest、favicon 與 Apple touch 引用。使用 HTTPS 或 localhost。在瀏覽器開發工具中檢查 manifest,確認每個圖示 URL 回傳圖片,而非 HTML 備援頁面。
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

這些圖示未按 maskable 素材設計。ZIP 不加入 service worker 或離線功能,只有圖示不能保證可安裝。請在目標瀏覽器與裝置上測試。

閱讀 Web、PWA 與 Chrome 整合指南

先設計圖案,再匯出平台檔案

分別檢查 favicon.ico、PNG 圖示及 manifest 範例,替換範例路徑,部署後測試瀏覽器分頁與已安裝 PWA。

AI 創作按點數計費,請先查看顯示的費用;圖示縮放及平台檔案匯出免費。

維護方內容複核日期:聯絡維護者

複核範圍為頁面說明及已聲明的工具能力。發佈前請在自己的專案檢查匯出檔案。

平台參考資料:Web App Manifest