Framer 網站新增 Favicon 完整指南：深色模式、Apple Touch Icon 與常見問題排解

在 Framer 中新增 Favicon 的方法：開啟網站設定（⌘ + ,），往下捲到「Site Images」→「Favicon」，上傳一個 64x64 的 PNG 檔案，然後發布網站。就這麼簡單。

接下來讓我們深入了解細節，並排解你可能遇到的問題。

Framer Favicon 規格

Framer 對 Favicon 有特定的規格要求：

• 尺寸：64 x 64 像素
• 格式：PNG（建議使用）
• 背景：透明

步驟一：開啟網站設定

兩種開啟設定的方式：

• 快捷鍵：按下 ⌘ + ,（Mac）或 Ctrl + ,（Windows）
• 選單：點擊 Framer 圖示 → Site Settings → Open Settings

步驟二：找到 Favicon 區塊

• 往下捲到「Site Images」
• 找到「Favicon」上傳區域

步驟三：上傳你的 Favicon

Framer 提供兩個上傳欄位：

• 淺色主題 Favicon：在淺色模式的瀏覽器中顯示
• 深色主題 Favicon：在深色模式的瀏覽器中顯示

如果你只有一個版本，請將同一張圖片上傳到兩個欄位。

步驟四：發布你的網站

• 點擊「Publish」按鈕
• Favicon 只會顯示在正式網站上，預覽模式中不會出現

淺色與深色模式支援

為什麼需要兩個版本？

• 深色 Logo 在深色瀏覽器分頁上會看不見
• 淺色 Logo 在淺色瀏覽器分頁上會看不見
• 分別準備兩個版本可以確保在所有模式下都能清楚顯示

如何建立不同版本

1. 從你原本的 Favicon 開始
2. 反轉顏色來製作另一個版本
3. 保持相同的形狀與設計
4. 兩個版本都使用透明背景

Apple Touch Icon 設定

自 2024 年 9 月起，Framer 支援 Apple Touch Icon：

• 位置：同樣在 Site Images 區塊
• 尺寸：180 x 180 像素
• 用途：iOS 裝置主畫面圖示

疑難排解：Favicon 沒有顯示

檢查基本事項

• 你有發布網站嗎？
• 強制重新整理：Cmd+Shift+R 或 Ctrl+Shift+R
• 嘗試使用無痕視窗

確認上傳位置

• 必須在 Site Settings 中上傳，而非頁面設定
• 檔案必須是有效的 PNG 格式

疑難排解：Google 顯示舊的 Favicon

Google 更新 Favicon 的速度很慢（需要幾天到幾週）。

加速更新的步驟

1. 確認 Favicon 已在網站上正式上線
2. 開啟 Google Search Console
3. 使用網址檢查工具檢查首頁
4. 要求重新建立索引

疑難排解：Safari 問題

Safari 會強力快取 Favicon。

修復步驟

1. 完全清除 Safari 快取
2. 刪除 Favicon 快取：~/Library/Safari/Favicon Cache/
3. 結束並重新開啟 Safari

疑難排解：仍然顯示 Framer Logo

常見原因：

• 上傳 Favicon 後沒有發布網站
• 瀏覽器快取問題
• 正在檢視預覽而非正式網站

解決方法：發布網站並清除瀏覽器快取。

最佳實務

• 備份檔案：保留原始 Favicon 檔案的備份
• 全面測試：在 Mac、Windows、iOS、Android 上都確認一下
• 使用檢查工具：Favicon.im 可以驗證你的設定
• 記錄顏色：追蹤確切的十六進位色碼以維持品牌一致性

常見問題

如何在 Framer 中新增 Favicon？

使用 ⌘ + , 開啟 Site Settings，往下捲到「Site Images」，點擊「Favicon」，上傳一個 64x64 的 PNG 檔案，然後發布你的網站。

Framer Favicon 應該用多大的尺寸？

Framer 建議使用 64 x 64 像素的 PNG 格式，並搭配透明背景。

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

最常見的原因：網站尚未發布、瀏覽器快取、或上傳位置錯誤。請發布你的網站、強制重新整理頁面，或嘗試使用無痕視窗。

Google 更新 Favicon 需要多久？

Google 更新 Favicon 的速度很慢——通常需要幾天到幾週。透過 Google Search Console 要求重新建立索引可以加速這個過程。

Framer 支援深色模式 Favicon 嗎？

支援。自 2024 年 9 月起，Framer 允許你在 Site Images 設定中分別上傳淺色和深色主題的 Favicon。

參考資料

1. How to set up a favicon in Framer - Framer 官方說明文件
2. September 2024 Update: Apple Touch Icon and Favicons - Framer 更新日誌
3. Why isn't Safari displaying the favicon? - Framer 疑難排解
4. Favicon.im - Favicon 測試與驗證工具