文字 Favicon 圖標生成器
建議使用1-2個字元以獲得最佳效果
文字轉圖標
輸入任意文字,自動生成專業的 favicon 圖標,支援多種字體和樣式
自訂樣式
豐富的自訂選項,包括字體、顏色、背景形狀和背景圖片
即時預覽
所見即所得的即時預覽,調整參數立即看到效果
什麼是Favicon?
Favicon (favorite icon的縮寫) 是一個在瀏覽器標籤頁、書籤和其他介面元素中顯示的小圖標。它幫助使用者在多個開啟的標籤頁和書籤中快速識別您的網站。
如何使用Favicon
要將 Favicon 加到您的網站,您需要:
- 使用我們的工具生成並下載 Favicon 壓縮包。
- 將下載的 ZIP 包解壓,並把所有檔案放在網站根目錄中。
- 在網站的<head>部分添加以下 HTML 程式碼:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">HTML格式說明
ICO 格式 (.ico)
傳統的 favicon 格式,相容所有瀏覽器包括舊版本的 Internet Explorer。通常包含多個尺寸(16x16, 32x32, 48x48)。
PNG 格式 (.png)
現代瀏覽器首選格式,支援透明背景,檔案更小。16x16 用於標籤頁,32x32 用於工作列,48x48 用於桌面捷徑。
Android Chrome 圖標
192x192 和 512x512 用於 Android 裝置的 PWA(漸進式 Web 應用),當使用者將網站加到主畫面時顯示。
Apple Touch 圖標
180x180 專為 iOS 裝置(iPhone、iPad)設計,當使用者將網站加到主畫面時使用。Apple 會自動添加圓角和光澤效果。
設計在 16px 下依然清晰的文字圖示
文字圖示的成敗取決於標籤頁尺寸。在文字產生器裡,這些參數比任何圖片工具都重要——預覽裡 512px 下清晰銳利的字,放進真實瀏覽器標籤頁可能糊成一團。
字體選擇
粗無襯線字體(Arial Black、Helvetica Bold、Futura)在 16×16 渲染下表現最好;襯線體、手寫體和窄字體的細筆畫在標籤頁尺寸下常常完全消失,儘管預覽裡看起來很清晰。
字元數量
一個字母最理想;兩個字母的縮寫需要把字級調小一檔;三個及以上字元在 16 像素標籤頁裡無法辨認,長文本請只用於 180×180 的 Apple 觸控圖示。
前景/背景對比度
對比度應高於 7:1。標籤頁有亮色與暗色兩種瀏覽器主題:透明底上的中灰色文字會在其中一種主題下消失,而填充色塊加白色文字在兩種主題下都清晰可讀。
背景形狀
15-20% 的圓角在任何尺寸下都呈現現代應用程式圖示質感。全透明背景在預覽裡乾淨俐落,但在深色標籤列上會懸浮得難以辨認——發布前請檢查兩種主題。
留白邊距
讓字形保持在畫布 60-70% 的範圍內。瀏覽器實際繪製的圖示小於標稱尺寸(高 DPI 螢幕上 16px 圖示畫在更大的槽位裡),貼邊的字形會被視覺裁切。