Favicon 產生器

新

從圖片或文字製作完整的 favicon 圖示組並下載 ZIP。

Drop an image, click to browse, or paste PNG, JPG, SVG or WebP — a square 512×512+ logo works best. Processed on your device.

Background Transparent

Shape

Padding 0% App name (for manifest)

Drop an image above to generate your favicon set — or switch to Text or Emoji to build one from a letter or emoji.

Live preview

Browser tab

My App

Bookmarks bar

My App

iOS home screen

My App

Android home screen

My App

Generated sizes

Apple touch (180) and Android (192/512) icons use a solid background; the 192 and 512 are maskable with a built-in safe zone.

HTML for your <head>

site.webmanifest

Runs entirely in your browser. Nothing is uploaded.

在瀏覽器中生成完整的 favicon 圖示集

這款 favicon 生成器可建立現代網站或 Web 應用所需的全部圖示——瀏覽器 favicon、多尺寸 favicon.ico、Apple touch icon 以及可遮罩的 PWA manifest 圖示——僅需一個來源檔案。選擇圖片、文字字母標誌或表情符號，調整背景、形狀和內距，即可下載包含所有檔案的 ZIP 壓縮檔，以及可直接貼到 <head> 的 HTML 程式碼片段。

與將圖片傳送至伺服器的工具不同，這裡的一切都在 HTML canvas 上本地渲染，速度快、免費、無需註冊，且您的 logo 完全私密。無需帳戶、無需等待伺服器處理、無廣告干擾。

支援圖片、SVG、字母或表情符號

三種輸入模式涵蓋所有使用情境。圖片模式接受 PNG、JPG、SVG 和 WebP——上傳正方形 logo，自動居中適配各尺寸；上傳 SVG 後，還會直接輸出清晰、可縮放的 favicon.svg。文字模式可將一到三個字母轉換為簡潔的字母標誌，支援自訂字型和顏色——適合尚未有 logo 時使用。表情符號模式一鍵將任意表情符號渲染為 favicon，是為個人專案建立品牌識別的最快方式。

無論選擇哪種方式，您都能獲得完整的輸出集：每個 PNG 尺寸、真正的 favicon.ico、選擇性的 favicon.svg、Web 應用 manifest 以及 HTML 程式碼。涵蓋所有瀏覽器、所有作業系統，從 Chromebook 分頁到 Android 主畫面的所有裝置尺寸。

涵蓋全部尺寸，生成真正的 favicon.ico

該工具生成 16×16、32×32 和 48×48 的 PNG（用於瀏覽器分頁和 Windows），180×180 的 Apple touch icon，以及 192×192 和 512×512 的圖示（用於 Android 和 PWA 主畫面）。然後將 16、32 和 48 像素的點陣圖編碼為真正的多解析度 favicon.ico——瀏覽器預設請求的容器檔案——完全在瀏覽器內完成，無需伺服器往返。

ICO 格式很重要。許多工具生成 32×32 的 PNG 後重新命名為 favicon.ico，這雖然可用，但意味著瀏覽器始終從單一尺寸縮放。真正的多解析度 ICO 可讓瀏覽器為每種場景選擇最清晰的尺寸。以 ZIP 格式下載完整集合，或單獨取得任意尺寸的 .ico、.svg 或 manifest 檔案。

正確生成 Apple touch icon 和可遮罩 PWA 圖示

正確處理行動端圖示是大多數 favicon 的薄弱環節。apple-touch-icon 以 180×180 純色背景渲染（iOS 不支援透明背景，會自動為圖示添加圓角）。192 和 512 尺寸的 manifest 圖示以可遮罩圖示形式生成——內容保持在約 80% 的安全區域內，這樣 Android 將其裁剪為圓形、圓角方形等形狀時不會切掉 logo。

即時預覽模擬圖展示您的圖示在瀏覽器分頁、書籤列、iOS 和 Android 主畫面上的效果，讓您在發佈前就能看到最終呈現，避免了反覆發佈、手機查看、調整再發佈的繁瑣流程。

UtiloKit 與 favicon.io 和 RealFaviconGenerator.net 的比較

favicon.io 是最受歡迎的 favicon 工具，確實出色——但它會將您的圖片上傳至其伺服器，意味著您未發佈的 logo 或客戶資產會離開您的裝置。RealFaviconGenerator.net 功能最全面，但多步驟精靈對於快速專案來說過於繁瑣，且同樣在伺服器端處理圖片。favicon-generator.org 已經過時：僅生成基礎 PNG 尺寸，沒有可遮罩的 manifest 圖示，也沒有 SVG。

UtiloKit 全程在本地完成。您的圖片永遠不會離開瀏覽器。輸出包括真正的多解析度 ICO、帶安全區填充的正確可遮罩 manifest 圖示、可縮放 SVG，以及隨時可貼上的 <head> 程式碼片段——與 RealFaviconGenerator 相同的完整集合，但無需上傳，無需精靈。在 iPhone 和 Android 上同樣可用。

manifest 檔案和 HTML 程式碼片段，即用即貼

除圖示外，您還將獲得完整的 site.webmanifest——包含應用程式名稱、主題色和可遮罩圖示項目——以及隨時可複製的 <head> 程式碼片段，其中連結了 .ico、.svg、Apple touch icon 和 manifest，以及對應的 theme-color meta 標籤。將其貼到 HTML 中，將檔案上傳至網站根目錄，即告完成。

該程式碼片段適用於任何技術堆疊：純 HTML、Next.js、Astro、Nuxt、SvelteKit、Remix。如果您的框架有專用的 favicon 設定（Next.js 的 app/icon.png、Astro 的 head 設定），PNG 檔案同樣可以直接使用。

Frequently asked questions

什麼是 Favicon？

Favicon（書籤圖示的縮寫）是瀏覽器在頁面標題旁邊顯示的小方形圖示——出現在瀏覽器分頁、書籤列、歷史記錄以及有時的搜尋結果中。通常以 16×16 或 32×32 像素顯示，作為 favicon.ico 存放在網站根目錄下。現代網站還會添加 favicon.svg、Apple touch icon 和 PWA 圖示用於主畫面。一個辨識度高的 favicon 能提升書籤和搜尋結果中的點擊率。

Favicon 應該是什麼尺寸？

從 16×16 和 32×32 開始——這是瀏覽器在分頁和書籤中顯示的兩種尺寸——打包在一個 favicon.ico 中。為了全面涵蓋，還需添加 48×48（Windows 使用）、180×180 的 apple-touch-icon（iOS 使用），以及 192×192 和 512×512 的 PNG（Android 和 PWA 主畫面使用）。本生成器可從單一來源檔案一次性生成所有這些尺寸。

如何建立 Favicon？

選擇一個來源——上傳圖片（PNG、JPG、SVG 或 WebP），輸入一到三個字母，或貼上表情符號——然後選擇背景顏色、形狀（方形、圓角或圓形）和內距。工具在 canvas 上渲染所有 favicon 尺寸，將 16/32/48 打包進 favicon.ico，並提供包含所有檔案的 ZIP 包以及用於貼到 <code><head></code> 的 HTML 片段。整個過程不到一分鐘，無需設計軟體。

上傳 Logo 安全嗎？

安全——因為實際上沒有任何內容被上傳。每個步驟都在您的瀏覽器中使用 HTML <code><canvas></code> 和 JavaScript 執行：圖片在本地讀取、縮放、編碼為 PNG 和 ICO，並在您的裝置上壓縮成 ZIP。任何檔案都不會傳送到伺服器，這與 favicon.io 和 RealFaviconGenerator.net 等在雲端處理圖片的工具不同。您的 logo 永遠不會離開您的電腦。

為什麼我的 Favicon 沒有顯示出來？

幾乎總是瀏覽器快取問題。瀏覽器會積極快取 favicon，因此請進行強制重新整理（Ctrl+F5），直接開啟圖示 URL（yoursite.com/favicon.ico）確認其能正常載入，或在無痕視窗中嘗試。還請檢查檔案是否在網站根目錄下、<code><link></code> 標籤中的路徑是否正確（開頭的斜線很重要），以及是否上傳了所有尺寸。新 favicon 在書籤和搜尋結果中重新整理可能需要一段時間。

Favicon 生成器在 iPhone 和 Android 上可以使用嗎？

可以——canvas API 和檔案下載在 iOS Safari、Android Chrome 和三星 Internet 瀏覽器中均可正常使用。您可以從相機膠卷上傳照片，輸入字母，或貼上表情符號，然後直接在手機上下載完整的 ZIP 包。在離開電腦時快速製作 favicon 原型非常實用。版面配置自適應小螢幕，375px 寬度下使用也很舒適。

什麼是可遮罩圖示（Maskable Icon）？

Manifest 圖示（site.webmanifest 中列出的 192×192 和 512×512 PNG）是 Android 和已安裝 PWA 使用的圖示。可遮罩圖示將重要內容保持在中央安全區內——約佔圖示的 80%——這樣系統將其裁剪為圓形、squircle 或圓角方形時，logo 不會被截掉。本生成器會自動為 192 和 512 尺寸的圖示添加安全區內距，並標記為 <code>purpose: maskable</code>，無需手動計算安全區域。