網站上線後，第一個讓訪客辨認品牌的視覺元素不是首頁大圖，而是瀏覽器分頁左上角那個小圖示，以及導覽列的品牌標誌。這兩處通常在幾分鐘內就能設定完，但許多人設定後才發現尺寸跑掉、背景透明失效、分頁圖示仍顯示預設的 W，才開始往後追原因。這篇從後台設定路徑、格式規格，到 theme.json 色盤整合，把幾個常見受阻點整理清楚。

從後台找到品牌設定的入口

WordPress 6.x 之後，品牌相關設定集中在兩個地方，取決於使用的是傳統主題還是區塊主題（Block Theme）。

傳統主題走「外觀（Appearance）→ 自訂（Customize）→ 站台識別（Site Identity）」，這個路徑在大多數舊主題都有效。區塊主題則走「外觀 → 編輯器（Editor）→ 樣式（Styles）」，或直接從編輯器頂端工具列的站台圖示進入，兩條路最終都能修改同一組欄位。

判斷方式很明確：後台「外觀」選單下有「自訂」就是傳統主題，只有「編輯器」就是區塊主題。

上傳 Logo 要注意的格式細節

Logo 上傳後出現模糊或比例變形，通常是格式選錯了。WordPress 接受 PNG、JPG、SVG 三種，但三種適用情況不同。

PNG 是最常見的選擇，支援透明背景，適合絕大多數情境。需注意解析度：若上傳的是 200×80 像素的圖，顯示在高解析度螢幕（Retina 等級）上就會顯得模糊。建議直接上傳 2 倍尺寸，例如打算顯示 200×80，就匯出 400×160 的 PNG，瀏覽器會自動縮放。

SVG 是更理想的選項，向量格式無論放多大都清晰，檔案體積通常也比 PNG 小。不過 WordPress 預設不開放 SVG 上傳，原因是 SVG 本質上是 XML，可以嵌入 JavaScript，存在安全疑慮。要開放 SVG，需要安裝如 Safe SVG 這類外掛，它會在上傳時掃描並過濾危險語法，再允許存入媒體庫。

JPG 不支援透明背景，Logo 通常不適合使用。除非品牌標誌是全色塊背景設計，且不會放在不同底色的區域上，才考慮 JPG。

網站圖示（Favicon）的設定與尺寸規格

網站圖示（Favicon）在 WordPress 後台稱為「站台圖示（Site Icon）」，位置和 Logo 在同一個「站台識別」區塊。

WordPress 建議上傳至少 512×512 像素的正方形圖片，系統會自動產生多種尺寸，包括瀏覽器分頁用的 32×32、手機主畫面捷徑用的 180×180（Apple Touch Icon），以及 Android 裝置用的多種版本。只要上傳一張高解析度的方形圖，不需要自行準備一套不同尺寸的圖檔。

格式建議使用 PNG，若主題支援也可以上傳 SVG（部分瀏覽器已支援 SVG favicon，但舊版 Firefox 和 Safari 仍需要 PNG 備援，WordPress 上傳 SVG 後也會自動產生 PNG 備援）。

設定後瀏覽器分頁仍顯示舊圖示，這通常是快取問題，而非設定未儲存成功。清除瀏覽器快取，或改用無痕模式確認，大部分情況下即可解決。若要讓其他訪客的瀏覽器快速更新，可在伺服器端針對 favicon 相關路徑設定較短的快取過期時間。

品牌主色與 theme.json 色盤的對應關係

WordPress 從 5.9 起引入 theme.json，讓主色設定從單純的後台顯示顏色，變成能直接影響編輯器色盤的系統性設定。

theme.json 裡的 settings.color.palette 陣列就是在區塊編輯器裡看到的那排顏色選項。主題開發者或進階使用者可以在這裡定義品牌主色、輔色、背景色；定義好之後，編輯文章時選「文字顏色」或「背景顏色」，出現的就是品牌色盤，而不是主題預設的通用色票。

格式如下，每個色票需要一個唯一的 slug（供 CSS 類別名稱使用）、一個 color 值（支援 hex、rgb、hsl），以及顯示在編輯器裡的 name：

{
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "brand-primary",
          "color": "#1A3C5E",
          "name": "品牌主色"
        },
        {
          "slug": "brand-accent",
          "color": "#E87040",
          "name": "強調色"
        }
      ]
    }
  }
}

WordPress 會根據這組設定自動產生對應的 CSS 變數，例如 --wp--preset--color--brand-primary，可以直接在前端樣式表中引用，讓全站色彩保持一致，改色盤時也不需要逐一修改 CSS。

若使用子主題，theme.json 放在子主題根目錄，其設定會覆蓋父主題的同名色票，不影響父主題本身的其他設定。

Logo、Favicon 與主色的整合要點

三個設定分開操作容易顧此失彼，特別是品牌顏色更新時，Logo 圖檔、站台圖示、theme.json 三處必須同步調整。

解析度是最常被忽略的環節。Logo 在高解析度裝置上是否清晰，建議實際在 Retina 螢幕或模擬器上目視確認，僅看後台預覽往往不準確。站台圖示上傳前先確認是否為正方形，非正方形圖片上傳後 WordPress 會自動裁切，關鍵圖形可能因此被切掉，在 Figma 或 Canva 先裁好再上傳可以避免這個問題。

若使用 SVG Logo，安全性不能省略。Safe SVG 或同等外掛的過濾機制是必要的，直接開放所有 SVG 上傳會讓惡意腳本有機可乘。

品牌色異動後，theme.json 的 palette 色票值若沒有一併更新，CSS 變數在前端就不會同步生效，視覺一致性會在細節處出現落差。快取的清除範圍也要留意，除了瀏覽器快取，WordPress 快取外掛（如 WP Rocket 或 W3 Total Cache）的頁面快取同樣需要清除，否則訪客看到的可能仍是修改前的版本。

品牌識別在技術層面的設定不複雜，難的是讓標誌、圖示、配色在所有裝置和情境下保持一致。一次設定到位，後續維護成本就低得多。