WordPress 網站新增 Favicon 完整教學：自訂工具、程式碼方法與問題排解

Q: WordPress 可以使用 SVG Favicon 嗎？

WordPress 預設基於安全考量不支援 SVG 上傳。你可以透過 functions.php 程式碼手動新增 SVG Favicon 支援，或使用啟用 SVG 上傳的外掛。

Q: 如何在 WordPress 中為淺色和深色模式新增不同的 Favicon？

使用內嵌 CSS 媒體查詢 prefers-color-scheme 的 SVG Favicon。由於自訂工具只處理 PNG/ICO 格式，需要透過 functions.php 手動新增 SVG 檔案。

在 WordPress 新增 Favicon 只需約 30 秒：前往「外觀」→「自訂」→「網站識別」→「網站圖示」，上傳一張 512x512 的 PNG 圖片，然後點擊「發布」。完成。

但如果這個方法行不通——或者你想要更多控制——請繼續往下看。有一些值得注意的小細節。

快速方法：WordPress 自訂工具

這個方法適用於所有執行 4.3 版或更新版本（2015 年釋出）的 WordPress 網站。只要你使用的是近年的版本，就可以使用這個功能。

步驟一：開啟自訂工具

在 WordPress 管理後台中前往 外觀 → 自訂
或者在檢視網站時，點擊管理工具列中的「自訂」

步驟二：找到網站識別

在自訂工具的側邊欄中點擊 網站識別
往下捲到 網站圖示

步驟三：上傳你的圖片

點擊 選取網站圖示
上傳至少 512 x 512 像素 的 PNG 圖片
WordPress 會自動產生所有需要的較小尺寸（包括 32x32、180x180 等）
如果系統提示裁切，請裁切後點擊發布

這樣就完成了。WordPress 會處理其餘的事情——它會建立瀏覽器 Favicon、Apple Touch Icon，甚至 Windows 動態磚圖片所需的 <link> 標籤。

程式碼方法：手動新增 Favicon

有時候自訂工具的方式不夠用。也許你正在建立自訂佈景主題，或者你的佈景主題覆寫了預設行為。以下是用程式碼新增的方法。

方法 A：將檔案放入佈景主題

將你的 Favicon 檔案上傳到佈景主題的根目錄，然後在佈景主題的 functions.php 中加入以下程式碼：

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

方法 B：使用 SVG Favicon

SVG Favicon 可以完美縮放，並支援深色模式。在 functions.php 中加入以下程式碼：

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

PNG 備援是為了 Safari，因為 Safari 目前仍未完全支援 SVG Favicon。

使用外掛（如果你偏好的話）

有好幾個外掛可以處理 Favicon，但老實說？對大多數網站來說，內建的自訂工具就夠用了。外掛適合以下情境：

不同頁面或文章需要不同的 Favicon
A/B 測試不同的圖示
多站點架構中每個子站需要各自的 Favicon

常見選項包括 All in One Favicon 和 Flavor（前身為 flavicon）。但再次強調——先試試自訂工具。

WordPress 區塊佈景主題（全站編輯）

如果你使用的是區塊佈景主題，例如 Twenty Twenty-Four 或 Twenty Twenty-Five，流程會稍有不同：

前往 外觀 → 編輯器
點擊樣式（半圓形圖示）
瀏覽你網站的全域樣式
網站圖示設定仍然在 外觀 → 自訂 → 網站識別 中

區塊佈景主題仍然使用相同的自訂工具來設定 Favicon。WordPress 目前尚未將此功能移至網站編輯器中。

建議準備的 Favicon 檔案

為了完整涵蓋所有情境，請準備以下檔案：

檔案	尺寸	用途
`favicon.ico`	16x16, 32x32	舊版瀏覽器支援
`favicon-32x32.png`	32x32	現代瀏覽器
`apple-touch-icon.png`	180x180	iOS 主畫面
`android-chrome-192x192.png`	192x192	Android 主畫面
`android-chrome-512x512.png`	512x512	Android 啟動畫面
`favicon.svg`	可縮放	現代瀏覽器、深色模式

當你上傳 512x512 的圖片時，WordPress 自訂工具會自動處理大部分檔案。如果需要 SVG 和 ICO 檔案，則需要手動新增。

疑難排解：Favicon 沒有顯示

全部清除

WordPress Favicon 問題幾乎都是快取造成的：

瀏覽器快取：使用 Ctrl+Shift+R（Windows）或 Cmd+Shift+R（Mac）強制重新整理
WordPress 快取：如果你使用 WP Super Cache、W3 Total Cache 或 LiteSpeed Cache——清除快取
CDN 快取：Cloudflare、Fastly 或其他 CDN——清除 Favicon 的網址快取
嘗試無痕模式：開啟乾淨的工作階段，不含任何快取檔案

檢查外掛衝突

部分 SEO 外掛和佈景主題框架會注入自己的 Favicon 標籤。如果你在頁面原始碼中看到重複的 <link rel="icon"> 標籤：

檢視頁面原始碼（Ctrl+U）
搜尋「icon」或「favicon」
如果有重複，檢查是哪個外掛新增的
停用該外掛的 Favicon 功能，或移除你手動新增的程式碼

佈景主題覆寫問題

部分佈景主題（特別是付費主題）有自己的 Favicon 設定，會覆寫自訂工具的設定。請檢查：

佈景主題選項 面板中是否有 Favicon 設定
佈景主題的 header.php 中是否有寫死的 <link rel="icon"> 標籤
佈景主題的說明文件中是否有 Favicon 相關的指示

疑難排解：Google 顯示錯誤的 Favicon

Google 可能需要幾天到幾週才會更新搜尋結果中的 Favicon。以下是加速更新的方法：

Google 的 Favicon 規定

Google 對搜尋結果中顯示 Favicon 有特定規則：

必須是 48 像素的倍數（48x48、96x96、144x144）
必須是正方形
不得包含不當或 NSFW 內容
必須代表該網站（不能是通用圖示）

加速更新

確認你的 Favicon 已上線且可以存取
開啟 Google Search Console
使用 網址檢查 工具檢查你的首頁
點擊 要求建立索引
等待——通常需要 1-2 週

疑難排解：Favicon 在電腦版顯示但行動版不顯示

行動版瀏覽器對 Favicon 格式比較挑剔：

iOS Safari：需要 apple-touch-icon（180x180）——一般的 Favicon 不會顯示在主畫面上
Android Chrome：會尋找含有圖示參照的 manifest.json 來顯示主畫面圖示
PWA：需要在 Web App Manifest 中定義 192x192 和 512x512 的圖示

如果你的 WordPress 網站有 Web App Manifest（部分佈景主題和外掛會新增），請確認其中的圖示路徑是正確的。

多站點注意事項

使用 WordPress 多站點架構？每個子站需要各自的 Favicon。

自訂工具是針對各子站獨立設定的，所以每個子站都可以有自己的圖示
網路層級的設定不包含預設 Favicon
如果你想設定全網路的預設圖示，可以透過必用外掛（wp-content/mu-plugins/）中的 functions.php 新增

最佳實務

從大尺寸開始：上傳至少 512x512 的圖片——WordPress 只會縮小，不會放大
使用 PNG：透明背景的效果比 JPEG 好
保持簡潔：你的 Favicon 很小——複雜的 Logo 在 16x16 下會看不清楚
跨瀏覽器測試：使用 Favicon.im 驗證你的設定
版本控制 Favicon：更新時在網址後加上 ?v=2 來強制更新快取

常見問題

如何在 WordPress 新增 Favicon？

前往「外觀」→「自訂」→「網站識別」→「網站圖示」，上傳一張 512x512 的 PNG 圖片，然後點擊「發布」。WordPress 會自動產生所有需要的尺寸。

WordPress Favicon 應該用多大的尺寸？

上傳至少 512 x 512 像素的圖片。WordPress 會自動建立 32x32、180x180 等其他尺寸。如果要在 Google 搜尋結果中顯示，請使用 48 像素的倍數。

為什麼我的 WordPress Favicon 沒有顯示？

通常是快取問題。清除你的瀏覽器快取、WordPress 快取外掛和 CDN 快取。嘗試使用無痕視窗。另外檢查是否有外掛衝突導致重複的 Favicon 標籤。

WordPress 可以使用 SVG Favicon 嗎？

WordPress 預設基於安全考量不支援 SVG 上傳。你可以透過 functions.php 程式碼手動新增 SVG Favicon 支援，或使用啟用 SVG 上傳的外掛。

如何在 WordPress 中為淺色和深色模式新增不同的 Favicon？

使用內嵌 CSS 媒體查詢 prefers-color-scheme 的 SVG Favicon。由於自訂工具只處理 PNG/ICO 格式，需要透過 functions.php 手動新增 SVG 檔案。

參考資料

Site Icon - WordPress Developer Resources - WordPress 官方文件
Define a favicon to show in search results - Google Search Central
Favicon.im - Favicon 測試與驗證工具