Shopify 商店新增 Favicon 教學（2026 最新指南）

在 Shopify 商店新增 Favicon 的方法：前往 Online Store → Themes → Customize → Theme Settings → Favicon，上傳一張 32x32 的 PNG 圖片，然後點擊 Save。儲存後，你的 Favicon 會立即顯示在瀏覽器分頁上。

以下提供完整的規格說明、逐步教學，以及常見問題的解決方案。

Shopify Favicon 規格需求

上傳之前，請確認你的 Favicon 符合以下規格：

需求	規格
尺寸	32 x 32 像素（建議）
格式	PNG 或 ICO
背景	透明（建議但非必要）
檔案大小	1 MB 以下

注意：Shopify 會自動將較大的圖片縮放為 32x32 像素，這可能會造成畫質損失。建議直接製作正確尺寸的 Favicon 以獲得最佳效果。

Shopify 方案要求

並非所有 Shopify 方案都支援 Favicon 自訂功能：

Starter 方案：不支援 Favicon
Basic 方案及以上：完整支援 Favicon

如果你使用的是 Starter 方案，需要升級才能新增自訂 Favicon。

步驟一：進入佈景主題編輯器

登入你的 Shopify 管理後台
前往 Online Store → Themes
找到你目前使用的佈景主題，點擊 Customize

步驟二：開啟佈景主題設定

在佈景主題編輯器中，找到側邊欄的 齒輪圖示 或 Theme Settings
點擊展開設定面板
往下捲找到 Favicon 或 Logo 區塊（位置因佈景主題而異）

步驟三：上傳你的 Favicon

在 Favicon 區塊中點擊 Select image
從電腦中選擇你的 Favicon 檔案
或者點擊 Explore free images 使用 Shopify 內建的圖庫
點擊 Done 確認你的選擇

步驟四：新增替代文字（SEO 最佳實務）

上傳 Favicon 之後：

將滑鼠移到已上傳的圖片上
點擊 鉛筆圖示 進行編輯
輸入描述性的替代文字（例如「你的品牌名稱 logo」）
這有助於提升無障礙性，也可能對 SEO 有幫助

步驟五：儲存並驗證

點擊右上角的 Save
在新的瀏覽器分頁中開啟你的商店
確認 Favicon 有顯示在瀏覽器分頁上

進階：透過佈景主題程式碼新增 Favicon

如果你想要更多控制，可以直接在佈景主題程式碼中新增 Favicon：

前往 Online Store → Themes → Actions → Edit code
將你的 Favicon 上傳到 Assets 資料夾
在 Layout 資料夾中開啟 theme.liquid
在 <head> 區段中加入以下程式碼：

<link rel="icon" type="image/png" href="{{ 'favicon.png' | asset_url }}">

將 favicon.png 替換為你實際的檔案名稱。

電商 Favicon 設計秘訣

你的 Favicon 在 32x32 像素中代表著你的品牌。以下是讓它發揮效果的方法：

建議做法

使用 Logo 的簡化版本
選擇高對比度的顏色
設計保持粗體簡潔
使用品牌的主要顏色
在淺色和深色瀏覽器主題上都測試可見度

避免做法

避免使用文字（在小尺寸下無法閱讀）
跳過精細的細節或圖案
不要使用照片或複雜的影像
避免低對比度的顏色組合

為不同裝置建立 Favicon 尺寸

雖然 Shopify 只要求 32x32，但建議製作多種尺寸以達到最佳顯示效果：

尺寸	用途
16x16	瀏覽器分頁（標準）
32x32	瀏覽器分頁（Retina）
180x180	Apple Touch Icon（iOS 主畫面）
192x192	Android 主畫面
512x512	PWA 啟動畫面

使用 Favicon 產生器工具，從單一高解析度圖片建立所有尺寸。

疑難排解：Favicon 沒有顯示

清除瀏覽器快取

瀏覽器會強力快取 Favicon。請嘗試以下解決方案：

強制重新整理：按下 Cmd+Shift+R（Mac）或 Ctrl+Shift+R（Windows）
無痕模式：在無痕瀏覽視窗中開啟你的商店
清除快取：前往瀏覽器設定，清除已快取的圖片

檢查佈景主題設定

確認 Favicon 已在 Theme Settings 中正確上傳
部分佈景主題有獨立的行動裝置 Favicon 設定
嘗試重新上傳圖片

驗證檔案格式

確認你的檔案是 PNG 或 ICO 格式
JPEG 檔案可能無法正常運作
檢查檔案是否損毀

等待生效

儲存後，變更可能需要幾分鐘才會顯示。如果你使用 CDN 或快取應用程式，可能也需要清除該快取。

Favicon 沒有在 Google 搜尋結果中顯示？

如果你的 Favicon 顯示在瀏覽器分頁上，但沒有出現在 Google 搜尋結果中：

提交 Sitemap 到 Google Search Console
要求建立索引 首頁
等待 Google 抓取 你的網站（可能需要幾天到幾週）
確認你的 robots.txt 沒有封鎖 Favicon 的存取

Google 對搜尋結果中的 Favicon 有特定要求：

至少 48x48 像素（Google 會在需要時放大）
必須允許 Googlebot 存取
應該代表你的品牌，而非通用圖示

為什麼你的 Shopify 商店需要 Favicon

Favicon 不只是裝飾——它有實際的商業價值：

品牌辨識度

當顧客開了多個分頁時，可以立即辨認出你的商店。這對回訪顧客特別有價值。

專業形象

沒有 Favicon 的商店會顯示通用的瀏覽器圖示，看起來像是未完成或不專業的網站。

改善書籤體驗

當顧客將你的商店加入書籤，你的 Favicon 會顯示在他們的書籤列中，讓你的品牌持續曝光。

信任訊號

自訂 Favicon 傳達了對細節的重視，能微妙地增加顧客對你商店的信任感。

使用 Favicon.im 產生你的 Shopify Favicon

需要快速建立或調整 Favicon 尺寸嗎？使用我們的免費工具：

前往 Favicon 產生器將任何圖片轉換為 Favicon 格式
上傳你的 Logo 或品牌圖片
下載正確尺寸的 Favicon
按照上述步驟上傳到 Shopify

常見問題

如何在 Shopify 商店新增 Favicon？

前往 Online Store → Themes → Customize → Theme Settings，找到 Favicon 區塊，上傳一張 32x32 的 PNG 圖片，然後點擊 Save。

Shopify Favicon 應該用多大的尺寸？

Shopify 建議使用 32x32 像素。較大的圖片會被自動縮放，可能會降低畫質。

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

常見原因：瀏覽器快取（嘗試強制重新整理或無痕模式）、檔案格式不正確（使用 PNG 或 ICO）、或佈景主題設定問題（重新上傳圖片）。

Shopify Starter 方案可以新增 Favicon 嗎？

不行，Favicon 自訂功能需要 Basic 方案或更高方案。Starter 方案的商店會顯示預設的 Shopify 圖示。

我的 Favicon 多久會出現在 Google 上？

Google 依照自己的排程更新 Favicon，通常需要幾天到幾週。將你的 Sitemap 提交到 Google Search Console 並要求建立索引可以加速這個過程。

總結

在 Shopify 新增 Favicon 不到 2 分鐘：

在佈景主題編輯器中開啟 Theme Settings
找到 Favicon 區塊
上傳一張 32x32 的 PNG 圖片
新增替代文字以利 SEO
儲存並驗證

一個小小的圖示，卻能對你商店的專業形象和品牌辨識度產生重大影響。