網站怎麼換 favicon？完整設定流程教學

很多企業主在網站上線後，常常會突然冒出一個問題問我們：「工程師，我的網站為什麼分頁上面沒有小圖示啊？別人的網站都有一個 Logo 小圖，為什麼我們的是灰色地球？」

這個小圖示其實有一個專業名字，叫做 favicon。雖然它很不起眼，卻是使用者在瀏覽器分頁、收藏夾，甚至 Google 搜尋結果中第一眼看到的品牌符號。對一個企業網站來說，沒有 favicon 就像是名片少了 Logo，專業感立刻大打折扣。

內容目錄

favicon 是什麼？為什麼重要？

在瀏覽器的分頁上、書籤列、甚至是手機快捷圖示裡，你一定看過一個小小的圖示，那就是 favicon（Favorites Icon 的縮寫），亦被稱為 website icon（網站圖示）。別看它只有 16×16 或 32×32 的小圖示，對網站經營卻有非常大的影響。

從使用者體驗的角度來看，favicon 就像是網站的「門牌」，能讓使用者快速辨認你的品牌，避免在一堆分頁中迷失。對企業來說，這是一種強化品牌識別的關鍵細節，少了它，網站就會顯得不完整、不專業。

雖然 favicon 本身不會直接影響 SEO 排名，但 Google 的搜尋結果頁面（SERP）會顯示網站圖示。如果沒有正確設定 favicon，你的網站可能會顯示灰色地球圖示，可能會降低點擊率（CTR）。換句話說，favicon 雖小，卻能間接影響 SEO 與品牌形象。

如何準備 favicon 圖檔？

情況一：只有做網站，沒有請設計公司做 Logo

你需要自己提供 品牌 Logo 原檔（最好是正方形 PNG，建議 512×512）。
如果沒有設計過 Logo，常見做法是先使用暫時性符號，例如公司名稱縮寫。
記得確認 Logo 與其他平台（名片、社群頭像）一致，避免顧客混淆。

情況二：從 Logo 與 CIS 一起交給設計公司處理

設計公司會從 品牌視覺識別系統（CIS） 出發，設計完整的 Logo、色彩規範與延伸圖像。
你只需要確認廠商提供的 Logo 是否符合品牌定位，其他（尺寸、轉檔、相容性）由設計師處理。
優點是整體一致性最高，不會出現「網站一個圖、社群一個圖」的狀況。

👨‍💻 設計廠商會處理的部分

輸出多種尺寸與格式：16×16、32×32、48×48（.ico、.png、.svg）。
整合到網站程式碼：將檔案放到正確的路徑，並在 <head> 裡加入設定。
跨裝置相容性：包含桌機、手機瀏覽器，以及 Apple Touch Icon（iOS 桌面捷徑）。

👉 簡單來說：

如果你自己有 Logo → 只要提供清晰原檔，剩下交給設計師。
如果 Logo 也由設計公司設計 → 從一開始就不用煩惱，全部交由設計公司全權規劃。

網站新增或更換 favicon 的基本步驟

當你準備好 favicon 圖檔後，下一步就是將它正確地放到網站裡。以下是最基本的流程：

流程步驟清單

將檔案放到網站根目錄

檔名建議設為 favicon.ico，並放在網站根目錄（/public_html 或 /public）。這樣即使沒有額外程式碼，部分瀏覽器也會自動抓取。

在 <head> 中加入設定語法

<head>

  <!-- 傳統 favicon -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico">

  <!-- 現代瀏覽器 PNG 格式 -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

  <!-- iOS / Android 桌面捷徑 -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

</head>

上傳檔案並更新網站

將 favicon 檔案與 HTML 語法上傳到網站。若使用 PHP 或 Laravel，確認模板檔（例如 layouts/app.blade.php）中的 <head> 已加上這些語法。

測試顯示是否正常

打開網站並重新整理，檢查瀏覽器分頁是否顯示新的 favicon。如果還是舊圖示，通常是瀏覽器快取問題，可以嘗試「強制重新整理」或清除快取。

WordPress 網站更換 favicon 的方式

如果你的網站是用 WordPress 架設，其實不需要自己手動上傳檔案到伺服器，WordPress 已經內建了簡單的設定介面。

WordPress 後台設定 favicon 流程

登入 WordPress 後台

進入你的 WordPress 網站後台，準備開始進行設定。

前往外觀 → 自訂

在後台選單中，找到「外觀」，點擊「自訂」。

找到「Header (Logo)」

在自訂選單裡，進入「網站識別」設定。

上傳網站圖示（Site Icon）

在「網站圖示」欄位上傳你的 Logo 圖檔（建議至少 512×512 PNG）。

儲存並發佈

刷新網站後，新的 favicon 就會出現在瀏覽器分頁上。

這個方法最適合 非技術人員，因為不需要 FTP 或寫程式碼，操作直觀。

測試與快取更新（為什麼換了 favicon 還不會馬上顯示？）

不少客戶在更換 favicon 後，第一時間打開網站會發現圖示還是舊的，甚至什麼都沒顯示。這通常不是設定錯誤，而是 快取（Cache） 在作祟。

常見情況

瀏覽器快取
Chrome、Safari、Edge 會暫存 favicon，導致即使檔案已更新，用戶端還是看到舊的圖示。
解法：按下 Ctrl + Shift + R（Windows）或 Command + Shift + R（Mac），進行「強制重新整理」。
伺服器快取或 CDN
如果網站有使用 Cloudflare、LiteSpeed Cache 之類的快取服務，favicon 也可能被暫存。
解法：清除伺服器快取或 CDN 快取，讓新檔案生效。
Google 搜尋結果更新延遲
就算網站的 favicon 換好了，Google 搜尋結果頁（SERP）不一定會立即更新。
解法：透過 Google Search Console → 外觀 → 網站設定 → 網站圖示，確認並提交更新。

測試方法

開「無痕視窗」重新整理網站，檢查 favicon 是否正確顯示。
用 手機瀏覽器 測試，避免桌機快取干擾。
確認 favicon 在不同瀏覽器（Chrome / Safari / Firefox / Edge）都能正確載入。

👉 小提醒：有時候 Google 需要幾天才會更新 SERP 的 favicon，所以只要網站設定正確，就不需要過度擔心。

🌟 別小看這個小圖示，它可能是客戶第一眼認出你的關鍵！

無論是單純要更換 favicon，還是想從 Logo、CIS 到整個網站全面升級，
專業設計團隊都能幫你處理。

如果你也遇到設定上的問題，或想要完整的品牌與網站規劃，
歡迎和我們聊聊，一起讓你的網站細節更到位。

👉 聯絡我們，讓網站更專業

網站怎麼換 favicon？完整設定流程教學

favicon 是什麼？為什麼重要？