Favicon 設置
五個檔案與五個標籤即可涵蓋所有當前瀏覽器、iOS 主畫面以及 Android 安裝。更多尺寸（mstile-*、browserconfig.xml、57/72/114px Apple 圖示、mask-icon）屬於舊版：請直接跳過。
1. 檔案集合
| 檔案 | 尺寸 | 用途 |
|---|---|---|
favicon.svg | 向量 | 現代瀏覽器分頁。可銳利縮放，並支援深色模式切換。 |
favicon-96x96.png | 96×96 | 不支援 SVG favicon 的瀏覽器，以及 Google 搜尋結果。 |
favicon.ico | 單一檔案包含 16、32、48 像素 | 舊版瀏覽器與直接請求 /favicon.ico 而不讀取 HTML 的工具。 |
apple-touch-icon.png | 180×180，不透明 | iOS 與 iPadOS 主畫面。 |
web-app-manifest-192x192.png、web-app-manifest-512x512.png | 192、512 | Android 主畫面、PWA 安裝、啟動畫面。 |
site.webmanifest | — | 引導 Android 使用上述兩個 PNG 檔案。 |
2. 取得檔案
從 RealFaviconGenerator 套件。 它會提供一組下載網址。將每個檔案下載到 PUBLIC_FOLDER（請見步驟 3），並使用其確切檔名：
base=https://realfavicongenerator.net/files/<套件-id>
for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \
web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do
curl -fsSL "$base/$f" -o "PUBLIC_FOLDER/$f" || echo "失敗：$f"
done
如果下載失敗，請停止並回報。請勿提供不完整的素材。回報產生器錯誤請至： https://github.com/RealFaviconGenerator/realfavicongenerator/issues/new?template=ai_prompt_bug_report.yml。
從單一來源 SVG（需要 rsvg-convert 與 ImageMagick，或使用產生器）：
cp logo.svg PUBLIC_FOLDER/favicon.svg
rsvg-convert -w 96 -h 96 logo.svg -o PUBLIC_FOLDER/favicon-96x96.png
rsvg-convert -w 192 -h 192 logo.svg -o PUBLIC_FOLDER/web-app-manifest-192x192.png
rsvg-convert -w 512 -h 512 logo.svg -o PUBLIC_FOLDER/web-app-manifest-512x512.png
# iOS 會將透明處填為黑色：將其壓平到品牌背景上，並留約 10% 邊距
rsvg-convert -w 144 -h 144 logo.svg | magick - -background '#ffffff' -gravity center -extent 180x180 -flatten PUBLIC_FOLDER/apple-touch-icon.png
magick -background none logo.svg -define icon:auto-resize=48,32,16 PUBLIC_FOLDER/favicon.ico
3. 找到 PUBLIC_FOLDER
這是網站根目錄對應的資料夾，因此 PUBLIC_FOLDER/favicon.ico 會載入為 /favicon.ico。
| 框架 | 資料夾 |
|---|---|
| Vite、Next.js、Create React App、Astro、Remix、Nuxt 3 | public/ |
| SvelteKit | static/ |
| Angular | public/（v17+）或 src/（需在 angular.json assets 中列出） |
| Hugo、Jekyll、Eleventy | static/、網站根目錄或 passthrough-copy 資料夾 |
| 純 HTML | 與 index.html 同層 |
Next.js App Router： 刪除預設的 app/favicon.ico。它會優先於 public/favicon.ico，且通常還是 Next.js 的標誌。
4. 僅加入一次標記
將下列內容放入負責渲染根 <html> 標籤的那一個檔案的 <head> 中。切勿每個頁面都加入。
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
| 框架 | 根檔案 |
|---|---|
| Vite、CRA、純 HTML | index.html |
| Next.js App Router | app/layout.tsx，透過 metadata 匯出（如下所示），非直接寫入原始標籤 |
| Next.js Pages Router | pages/_document.tsx 內的 <Head> |
| Astro | 基礎佈局，例如 src/layouts/Layout.astro |
| SvelteKit | src/app.html |
| Remix / React Router 7 | app/root.tsx 中的 links 匯出 |
| Nuxt | nuxt.config.ts 中的 app.head.link |
Next.js App Router 對應寫法：
export const metadata = {
icons: {
icon: [
{ url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
{ url: "/favicon.svg", type: "image/svg+xml" },
],
shortcut: "/favicon.ico",
apple: { url: "/apple-touch-icon.png", sizes: "180x180" },
},
manifest: "/site.webmanifest",
};
在加入這些標記之前，請先搜尋專案中是否有既存的 rel="icon"、apple-touch-icon 與 manifest 標籤。請取代它們，不要加入第二組。如果網站是基於子路徑（base / basePath）提供服務，請為每個 href 加上前綴。
5. 最佳化
- SVG 深色模式。 深色標誌在深色分頁列上會消失。在 SVG 中加入 media query：
<style>path{fill:#111}@media (prefers-color-scheme:dark){path{fill:#fff}}</style> - 小尺寸。 在 16px 時，請移除精細細節與文字。使用圖標而非文字商標。
- SVG 體積。 執行
npx svgo favicon.svg，將檔案大小維持在約 2 KB 以下。 - Manifest。 填入
name、short_name、theme_color與background_color。讓 512 圖示可遮罩：將標誌維持在中央 80% 安全區域內、使用實色背景，並為其設定"purpose": "maskable"。如果標誌不符合安全區域，請另行加入一個獨立的可遮罩圖示。{ "name": "My App", "short_name": "App", "icons": [ { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" } - 快取。 瀏覽器會強烈快取 favicon。當你替換圖示時，請重新命名檔案，或為每個
href以及 manifest 中的src值加上?v=2。
6. 驗證
- 每個檔案都應回傳 200 狀態碼與正確的內容類型。針對開發伺服器執行以下指令：
for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \ web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do printf '%s ' "$f"; curl -s -o /dev/null -w '%{http_code} %{content_type}\n' "http://localhost:PORT/$f" done - 渲染出的 HTML 應僅包含一組標籤：
curl -s http://localhost:PORT/ | grep -cE 'rel="(icon|shortcut icon|apple-touch-icon|manifest)"'應輸出5。 - 在 DevTools 中，開啟 Application → Manifest：應顯示無錯誤，且兩個圖示都能正常呈現。
- 在強制重新整理的分頁中，分別於淺色與深色模式下檢查圖示是否都可見。
- 在已部署的網址上，執行 RealFaviconGenerator 檢查工具（https://realfavicongenerator.net/favicon-checker）。