不包含。SVG 是可接受的原始格式,但套件內容為點陣 PNG 檔案與一個 ICO,不會建立向量或動畫 favicon。
Favicon 產生器
將一張圖片轉成 ZIP,內含多尺寸 ICO、五個 PNG 圖示與網站資訊清單(manifest)。請參考下方安裝範例,將這些檔案連結至您的網站。
Favicon 套件中的檔案
下載檔案為 favicon-package.zip,內含七個檔案。HTML 會在本文中以安裝範例呈現,不包含在 ZIP 中。
| 檔案 | 尺寸或內容 | 用途 |
|---|---|---|
| favicon.ico | 一個檔案包含 16×16、32×32 與 48×48 | 多尺寸網站圖示。 |
| favicon-16x16.png | 16×16 | 小型瀏覽器圖示。 |
| favicon-32x32.png | 32×32 | 較大的瀏覽器圖示。 |
| apple-touch-icon.png | 180×180 | 供 Apple 主畫面圖示引用。 |
| android-chrome-192x192.png | 192×192 | 網站資訊清單引用的圖示。 |
| android-chrome-512x512.png | 512×512 | 網站資訊清單引用的較大圖示。 |
| manifest.json | 網站名稱、顏色與兩個圖示參照 | 供您依網站需求檢查與調整的初始資訊清單。 |
輸入格式:PNG、JPG/JPEG、WebP、GIF 或 SVG。輸出為靜態 ICO 與 PNG 圖片;上傳 SVG 不會產生 SVG favicon。
產生並安裝 Favicon 檔案
選擇容易辨識的原圖
請上傳簡單的圖片。至少 512×512 像素的正方形原圖適合最大的 PNG 輸出;使用更大的圖片也無法改善不清楚的設計。
產生並下載 ZIP
點選「產生 Favicon 套件」,並下載完成的 ZIP。將檔案加入網站前,請先解壓縮。
檢查資訊清單並部署檔案
請視需要修改 manifest.json 中的預設網站名稱與顏色。將檔案放到網站可公開存取的網址;若使用子資料夾,請更新路徑。
加入 HTML 參照並確認
請將下方範例加入頁面的 head 區段。確認圖示與資訊清單網址可載入後,再到瀏覽器中檢查圖示。
將圖示加入網站
此範例假設檔案放在網站根目錄。請將這些參照加入頁面的 head,並依實際部署方式調整路徑。
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">發布檔案前,請檢查以下細節:
| 檢查項目 | 操作方式 |
|---|---|
| 公開檔案路徑 | 開頭的斜線代表網站根目錄。若放在子資料夾,請同時更新 HTML 的 href 值與 manifest.json 中圖示的 src 值。 |
| 資訊清單預設值 | 產生的 name 與 short_name 為 My Website;theme_color 與 background_color 為 #ffffff。下載後請檢查並調整。這些值不會改變圖示圖片的顏色。 |
| 現有網站設定 | 請檢查佈景主題或框架是否有其他圖示宣告,避免新設定與舊 favicon 參照並存。 |
包含圖示的資訊清單不等於完整、可安裝或可離線使用的網頁應用程式。此產生器不提供 service worker,也不保證每種裝置都能安裝。
讓小尺寸圖示仍清楚可辨
小文字與細輪廓可能消失。建議使用簡單標誌、清楚的對比,並在主體周圍保留足夠空間。
非正方形原圖會縮放至正方形畫布內,並以透明留白補足。尺寸較小的原圖可能會被放大。若需要精確構圖,請使用事先準備好的正方形圖片。
Favicon 設定常見問題
請先確認已部署檔案的網址與頁面的圖示宣告。瀏覽器可能會快取 favicon;確認網站已指向新檔案後,請用新的瀏覽器工作階段測試。
目前的表單只能選擇圖片。請在下載的資訊清單中,依網站需求修改 name、short_name、theme_color 與 background_color 欄位,並讓 HTML 的 theme-color 值保持一致。
不能。它提供圖示檔案與初始資訊清單。安裝與離線功能需要額外的網站設定;套件不會自動加入這些功能。