運作原理

1

選擇您的來源

上傳圖片,使用自訂字型從文字建立,從數百個表情符號中選擇,或繪製像素藝術。分析任何 URL 以提取現有的 Favicon。

2

自訂和預覽

調整背景、漸層、圓角和效果。在瀏覽器標籤頁、iOS 主畫面、Android 和 Windows 樣機中即時預覽您的 Favicon。

3

產生和下載

一鍵產生所有尺寸。下載包含 35+ 框架的即用型程式碼片段的完整套件。

建立 Favicon 的四種方法

上傳圖片

從任何圖片開始 — PNG、JPG、SVG 或 WebP。新增背景,調整內距、亮度、對比度並套用圓角。非常適合標誌和現有品牌資產。

文字轉 Favicon

使用 1500+ Google Fonts 建立基於文字的 Favicon。選擇字重、顏色並新增純色或漸層背景。非常適合簡單的基於字母的品牌圖示。

表情符號 Favicon

從 12 個類別的數百個表情符號中選擇,包括所有國旗。新增帶有預設或自訂漸層的彩色背景,打造精緻外觀。

像素藝術畫布

在可自訂的網格上逐像素繪製您自己的 Favicon。使用帶有復原/重做支援的筆、橡皮擦和填滿工具。立即匯出您的像素藝術作品。

強大功能

100% 私密

所有處理都在您的瀏覽器本地進行。您的圖片永遠不會離開您的裝置。無上傳,無雲端儲存,無數據收集。

覆蓋所有平台

為瀏覽器、iOS 主畫面、Android Chrome、Windows 動態磚、Safari 固定標籤頁和漸進式 Web 應用程式產生 15+ Favicon 尺寸。

即時預覽

在產生之前,確切地看到您的 Favicon 在瀏覽器標籤頁、iOS 主畫面、Android 啟動器和 Windows 動態磚中的外觀。

35+ 框架的程式碼片段

獲取適用於 HTML, React, Vue, Next.js, Nuxt, Angular, Astro, Svelte, WordPress, Shopify, Laravel, Django 和 25+ 其他平台的即用型程式碼。

URL 分析器

分析任何網站以提取現有的 Favicon。查看存在哪些尺寸,缺少什麼,並一鍵重新產生完整的一套。

產生歷史

存取您最近的 Favicon 產生記錄。還原以前的創作,比較版本,或從上次中斷的地方繼續編輯。

快速範本

從專業設計的範本開始,包含純色、漸層和圖案。套用並自訂以匹配您的品牌。

多尺寸 ICO

自動建立多解析度 ICO 檔案,嵌入 16x16, 32x32 和 48x48 尺寸,以獲得最大的瀏覽器相容性。

完整輸出套件

標準 Favicon

用於瀏覽器標籤頁和書籤的 favicon.ico (多尺寸), 16x16, 32x32, 和 48x48 PNG。

Apple 觸控圖示

用於 iOS 主畫面的 180x180 Apple 觸控圖示,加上帶有可自訂主題顏色的 Safari 固定標籤頁 SVG。

Android 和 PWA 圖示

用於 Android Chrome 和漸進式 Web 應用程式的 192x192 和 512x512 圖示,包括可遮罩圖示支援。

Windows 動態磚

帶有 browserconfig.xml 的 270x270 Microsoft 動態磚,用於 Windows 開始功能表和工作列整合。

Web 資訊清單

完整的 site.webmanifest 檔案,包含圖示引用、主題顏色和 PWA 顯示設定。

常見問題

我需要什麼尺寸的 Favicon?
最少:favicon.ico, 32x32 PNG, 180x180 Apple 觸控圖示, 以及用於 Android/PWA 的 192x192/512x512。我們的「必要」預設會自動包含所有所需的尺寸。
為什麼我需要 ICO 檔案?
ICO 格式在一個檔案中包含多種尺寸,並受到包括舊版本在內的所有瀏覽器的支援。這是傳統的 Favicon 格式,可確保最大的相容性。
我的 Favicon 應該有透明背景嗎?
對於瀏覽器標籤頁,透明度效果很好。對於 iOS 和 Android 主畫面,請考慮純色或漸層背景,因為圖示會出現在各種桌布上。
我的來源圖片必須是正方形嗎?
是的,Favicon 總是正方形的。如果您的圖片不是正方形,請使用我們的內距和縮放控制項使其完美貼合。為了獲得最佳效果,請從正方形圖片開始。
我的圖片安全且私密嗎?
100% 私密。所有處理都使用瀏覽器原生的 Canvas 和 Blob API。您的圖片永遠不會離開您的裝置 — 我們不上傳、儲存或傳輸任何數據。
支援哪些框架?
我們提供 35+ 平台的程式碼片段,包括 React, Vue, Angular, Next.js, Nuxt, Astro, Svelte, WordPress, Shopify, Laravel, Django, Ruby on Rails 等等。
漸進式 Web 應用程式呢?
我們的產生器建立所有必需的 PWA 圖示,包括可遮罩變體,以及帶有正確圖示宣告和主題顏色的完整 site.webmanifest 檔案。

了解 Favicon

Favicon 是代表您的網站在瀏覽器、書籤、主畫面和應用程式啟動器中的小圖示。完整的 Favicon 套裝可確保您的品牌在使用者遇到您的網站的任何地方都看起來專業且易於識別。

ICO 格式

ICO 格式將多種尺寸 (16x16, 32x32, 48x48) 打包到一個檔案中。雖然現代瀏覽器支援 PNG Favicon,但 ICO 對於與舊瀏覽器和某些桌面應用程式的最大相容性仍然至關重要。

PNG 圖示

現代瀏覽器因其清晰的品質和透明度支援而更喜歡 PNG Favicon。每種尺寸都有其用途:16px 和 32px 用於瀏覽器標籤頁,180px 用於 iOS,192px/512px 用於 Android 和 PWA。

Web 應用程式資訊清單

site.webmanifest 檔案定義了您的網站作為 PWA 安裝時的外觀。它指定圖示、主題顏色、顯示模式以及瀏覽器用於建立類似應用程式體驗的其他元數據。

SVG Favicon

Safari 的固定標籤頁功能使用單色 SVG 圖示。現代瀏覽器也開始直接支援 SVG Favicon,提供無限的可擴展性和更小的檔案大小。