Favicon 製作教學：從規範到部署一次搞懂

Favicon 是什麼？為什麼網站需要製作圖示？

Favicon（網站圖示）是顯示於瀏覽器分頁標籤、網址列前方、書籤列表以及手機桌面捷徑的小型圖標。它的核心價值在於強化品牌辨識度，讓使用者在同時開啟多個分頁時，能透過圖示快速辨認並返回您的網站，從而提升整體使用者體驗與網站專業形象。一個清晰、一致的 Favicon 是網站品牌視覺識別中不可或缺的基礎元素。

Favicon 製作規範：支援的圖片格式與建議尺寸

製作 Favicon 時，需關注來源圖片格式與最終輸出的尺寸規範，以確保跨平臺相容性。以下是製作前必須釐清的技術檢查清單：

• 來源圖片格式：您可以準備 PNG、JPG/JPEG、GIF 或 WebP 格式的正方形圖片。PNG 格式因支援透明背景而成為最常見的選擇。
• 最終輸出格式：為最大化瀏覽器相容性（尤其考慮舊版瀏覽器），建議最終生成 ICO 格式檔案。
• 建議尺寸：
  • 一般網頁瀏覽器顯示：16x16 像素。
  • 桌面作業系統捷徑圖示：32x32 或 48x48 像素。
  • 行動裝置（iOS/Android）主畫面捷徑：建議準備 128x128 像素以上，常見為 180x180 像素。
• 檔案大小限制：上傳至線上工具的來源圖片，檔案大小通常需在 5MB 以內。

為網站建立一致的視覺識別，除了 Favicon，整體色彩規劃也至關重要，可參考網頁配色實作流程，從品牌主色到介面細節建立統一的色彩語言。

如何使用線上工具快速製作 Favicon？

對於大多數網站管理者，利用免費的線上 Favicon 產生器是最有效率的方式。即使沒有設計軟體基礎，也能在幾分鐘內完成製作。請依照以下步驟操作：

1. 步驟一：準備圖片
   準備一張符合品牌識別、構圖簡潔的正方形圖片。若需去除背景，可先使用圖片編輯工具完成去背，儲存為 PNG 格式。
2. 步驟二：選擇線上工具
   前往可靠的線上 Favicon 產生器網站。這類工具通常操作直覺，支援多國語言。
3. 步驟三：上傳並生成
   於工具頁面上傳您的圖片。系統會自動分析並轉換，產生包含多種尺寸（如 16x16, 32x32, 48x48）的 ICO 格式檔案供您下載。部分工具也提供 PNG 格式選項。

替代方案：如果您沒有現成的圖片，許多線上工具也支援直接輸入英文母、數字或單一漢字。系統會自動產生多種基於文字的圖標樣式與配色組合，供您選擇與下載，這對於網站初期快速建立識別非常實用。

將 Favicon 設定到網站並正確顯示的 HTML 語法

取得 Favicon 檔案後，正確的部署與設定是確保其顯示的關鍵。核心流程是將檔案上傳至正確位置，並透過 HTML 語法明確告知瀏覽器。

1. 步驟一：上傳檔案至根目錄
   將線上工具生成的主圖示檔（通常命名為 favicon.ico）透過 FTP 用戶端、cPanel 檔案管理員或網站後臺（如 WordPress 的媒體庫）上傳至網站的根目錄。根目錄是指網站網域的首頁所在資料夾。
2. 步驟二：加入 HTML 連結標籤
   為了確保所有瀏覽器（包含較舊或特殊版本）都能正確讀取，建議在網站每個頁面的 HTML 程式碼中，於 <head> 區塊內加入以下語法：
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
   這段語法明確指定了圖示檔案的路徑與類型。
3. 步驟三：清除快取並驗證
   完成上傳與 HTML 設定後，儲存您的檔案。由於瀏覽器會快取舊版圖示，您需要強制重新整理頁面（快捷鍵通常是 Ctrl+F5 或 Cmd+Shift+R）或清除瀏覽器快取，然後檢查分頁標籤是否顯示了新圖示。

一個專業的網站，其細節體現在方方面面。從 Favicon 到整體的網頁設計方法論，每一個元素都在共同傳達您的品牌價值。

進階配置：輸出全平臺圖標包與 PWA 設定

現代網站需考量在不同作業系統與裝置上的最佳顯示效果。進階的 Favicon 製作不僅限於傳統的 favicon.ico，還需針對蘋果與安卓等行動平臺提供專屬圖示，以實現全平臺的品牌一致性。

您可以使用功能更完整的線上產生器，一次性輸出所需的全平臺圖標包，通常包含以下檔案：

• favicon.ico：用於傳統桌面瀏覽器，包含多種尺寸。
• apple-touch-icon.png：尺寸通常為 180x180 像素。當使用者將網站加入 iOS 主畫面時，系統會使用此圖示。
• site.webmanifest 或 manifest.json：這是為 Android 裝置以及漸進式網路應用程式（PWA）定義圖示、主題色與啟動畫面的設定檔。

要讓 iOS 裝置正確使用 apple-touch-icon，您需要在 HTML 的 <head> 區塊中加入以下語法：
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

同時，將生成的 site.webmanifest 檔案同樣上傳至根目錄，並在 HTML 中加入：
<link rel="manifest" href="/site.webmanifest">

透過以上設定，您的網站圖示便能在 Windows、macOS、iOS 與 Android 等主要平臺上獲得最佳化的顯示效果。

Favicon 是什麼？對網站有什麼幫助？

Favicon 是網站圖示，會顯示在瀏覽器分頁標籤、網址列和書籤列表中。它能增強網站品牌辨識度，讓使用者在多個分頁中快速找到您的網站，並提升專業形象。

製作 Favicon 需要準備什麼格式和大小的圖片？

來源圖片可使用 PNG、JPG、GIF 或 WebP 格式，檔案大小建議不超過 5MB。一般網頁顯示尺寸為 16x16，桌面捷徑為 32x32 或 48x48，行動裝置則建議準備 128x128 或更大的尺寸，最終通常會轉換為 ICO 格式。

如何把做好的 Favicon 放到網站上顯示？

將檔案命名為 favicon.ico 並上傳至網站根目錄。接著在網頁的 <head> 區段加入 <link rel="icon" href="/favicon.ico" type="image/x-icon"> 語法，儲存後清除瀏覽器快取即可看到更新。

為什麼我的 Favicon 上傳後沒有顯示？

最常見的原因是瀏覽器快取問題，請嘗試強制重新整理頁面或清除快取。另外，請檢查 HTML 語法中的圖片路徑是否正確，以及檔案是否確實放置在網站的根目錄中。

手機主畫面新增網站捷徑時，圖標要怎麼設定？

針對 iOS 裝置，需要準備一張 apple-touch-icon.png（通常為 180x180 像素），並在 HTML 中加入 <link rel="apple-touch-icon" href="/apple-touch-icon.png">；針對 Android 裝置，則需透過 manifest.json 檔案來定義圖示。

一定要使用 ICO 格式嗎？可以用 PNG 嗎？

傳統上 ICO 格式能確保最大的瀏覽器相容性（包含舊版瀏覽器）。雖然現代瀏覽器也支援直接使用 PNG 格式作為 Favicon，但為了確保所有使用者都能看到圖示，建議仍以產生 ICO 檔案為主。