如何為網站設定 Favicon：完整 HTML 標籤教學
Favicon 是顯示在瀏覽器分頁、書籤列和搜尋結果中的小圖示，雖然只有 16×16 像素大小，卻是建立網站品牌識別度的重要元素。本文將帶您一步步完成從製作到設定的完整流程，並提供現代瀏覽器的最佳相容寫法。
為什麼 Favicon 很重要？
很多人忽視 Favicon 的重要性，但它對使用者體驗有不小的影響：
- 品牌識別 — 當使用者同時開啟多個分頁時，Favicon 是他們辨識您網站的最快方式
- 書籤可辨識性 — 儲存書籤時，Favicon 讓您的網站在書籤列中一眼可辨
- 搜尋結果顯示 — Google 搜尋結果頁面會顯示網站的 Favicon，有助於建立品牌印象
- 專業形象 — 沒有 Favicon 的網站看起來未完成，會給訪客留下不專業的印象
- PWA 安裝圖示 — 當使用者將網站加入主畫面（PWA）時，Favicon 就是應用程式圖示
第一步：準備圖示素材
在設定 Favicon 之前，您需要準備幾種尺寸的圖示。建議的準備清單：
- favicon.ico — 包含 16×16 和 32×32 的 ICO 檔案（放置於網站根目錄）
- icon-192.png — 192×192 PNG 圖示（用於 Android PWA）
- icon-512.png — 512×512 PNG 圖示（用於 PWA 啟動畫面）
- apple-icon.png — 180×180 PNG 圖示（用於 Apple Touch Icon）
- icon.svg — 可縮放向量圖示（可選，現代瀏覽器優先使用）
快速開始：如果只需要最基本的 Favicon，使用我們的工具製作一個 32×32 的 ICO 檔案，放置到網站根目錄，即可讓大多數瀏覽器顯示您的 Favicon。
第二步：使用工具製作 ICO 檔案
準備高解析度原始圖片
建議使用至少 256×256 像素的 PNG 圖片作為來源。確保圖片具有透明背景（如果您的 Logo 有透明背景的話），這樣 ICO 圖示在各種背景色上都能正確顯示。
使用 ICO 產生器轉換
前往我們的 ICO 圖示產生器，上傳您的圖片，選擇 32×32 尺寸，然後下載 ICO 檔案。如果需要同時包含 16×16 和 32×32 的 ICO 檔案，您可以分別下載再使用合併工具。
將檔案上傳至網站根目錄
將下載的 favicon.ico 上傳至您網站的根目錄（即 https://yourdomain.com/favicon.ico）。大多數瀏覽器會自動嘗試載入這個路徑，即使您沒有在 HTML 中宣告。
第三步：在 HTML 中設定 Favicon 標籤
以下是現代網頁開發推薦的完整 Favicon HTML 設定，涵蓋各種瀏覽器和裝置：
基本設定（最小需求）
<!-- 放置在 <head> 標籤內 -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
標準推薦設定
<!-- ICO Favicon（向下相容，所有瀏覽器） -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- PNG Favicon（現代瀏覽器） -->
<link rel="icon" type="image/png" href="/icon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/icon-16.png" sizes="16x16">
<!-- Apple Touch Icon（iOS、iPadOS 主畫面圖示） -->
<link rel="apple-touch-icon" href="/apple-icon.png">
完整現代設定（含 SVG 和 PWA）
<!-- ICO Favicon（向下相容） -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<!-- SVG Favicon（現代瀏覽器，支援深色模式） -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<!-- Apple Touch Icon（180×180 PNG） -->
<link rel="apple-touch-icon" href="/apple-icon.png">
<!-- Web App Manifest（PWA 設定） -->
<link rel="manifest" href="/manifest.webmanifest">
<!-- 瀏覽器主題色（Android Chrome 工具列） -->
<meta name="theme-color" content="#667eea">
第四步：設定 Web App Manifest（PWA）
如果您希望使用者可以將您的網站加入主畫面，需要建立一個 manifest.webmanifest 檔案：
{
"name": "您的網站名稱",
"short_name": "短名稱",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#667eea",
"background_color": "#ffffff",
"display": "standalone"
}
各瀏覽器對 Favicon 的支援情況
| 瀏覽器 | ICO | PNG | SVG | Apple Touch Icon |
|---|---|---|---|---|
| Google Chrome | 完整支援 | 完整支援 | 完整支援 | （非 Apple 裝置忽略） |
| Mozilla Firefox | 完整支援 | 完整支援 | 完整支援 | （非 Apple 裝置忽略） |
| Apple Safari | 完整支援 | 完整支援 | 部分支援 | 完整支援 |
| Microsoft Edge | 完整支援 | 完整支援 | 完整支援 | （非 Apple 裝置忽略） |
| iOS Safari | 完整支援 | 完整支援 | 部分支援 | 用於主畫面圖示 |
常見問題與疑難排解
Favicon 更新後為什麼瀏覽器還顯示舊的圖示？
這是瀏覽器快取造成的問題。解決方法：
- 在瀏覽器中按 Ctrl+Shift+R（Windows）或 Command+Shift+R（macOS）進行硬重整
- 開啟無痕模式查看最新狀態
- 在 HTML 中為 Favicon 網址加上版本參數：
href="/favicon.ico?v=2"
為什麼在書籤列看不到 Favicon？
確認以下事項：
- favicon.ico 確實存在於網站根目錄（可以直接在瀏覽器輸入完整 URL 確認）
- HTML 的
<link>標籤有正確放在<head>內 - 伺服器設定正確回傳圖示（HTTP 200 狀態碼而非 404）
Favicon 圖示模糊或變形怎麼辦？
這通常是原始圖片解析度不足或圖片比例不是正方形造成的。建議：
- 使用正方形圖片作為來源（如果不是正方形，使用我們的工具自動裁切）
- 使用至少 256×256 像素的高解析度圖片
- 避免在小尺寸圖示中使用過於複雜的細節
注意：某些 Web 框架（如 Next.js、Nuxt.js）有特定的 Favicon 設定方式，請參閱各框架的官方文件，而不是直接在 HTML 中手動添加標籤。
測試您的 Favicon 設定
完成設定後，您可以使用以下方法確認 Favicon 正確顯示：
- 直接在瀏覽器中開啟
https://yourdomain.com/favicon.ico，確認圖示正常顯示 - 查看瀏覽器分頁是否顯示圖示
- 將頁面加入書籤，確認書籤列顯示正確圖示
- 使用 Google Search Console 檢查是否能正確抓取 Favicon
- 使用 RealFaviconGenerator 等工具進行全面測試
現在您已經掌握了完整的 Favicon 設定方法，快去製作您的 ICO 圖示吧！
立即製作 ICO Favicon