Favicon 製作教學：網站圖示完整指南

什麼是 Favicon？

Favicon 就是你在瀏覽器分頁上看到的那個小小的網站圖示。它通常出現在分頁標題的前面、書籤列表中、以及瀏覽歷史紀錄裡。雖然它很小，但卻是網站品牌形象非常重要的一部分。

想像一下你同時開了十幾個分頁，要怎麼快速找到你要的那個頁面？大多數時候你是看那個小小的 Favicon 來辨識的。如果一個網站沒有設定 Favicon，瀏覽器就會顯示一個預設的空白圖示或地球圖案，看起來非常不專業。

Favicon 這個詞其實是 "Favorite Icon" 的縮寫，最早是 Internet Explorer 5 在 1999 年引入的功能。從那時候到現在，Favicon 已經從單一的 16x16 像素 ICO 檔案，發展成了需要多種尺寸和格式的完整圖示系統。

Favicon 需要哪些尺寸？

這可能是最讓人頭疼的部分。現代的 Favicon 不是只要一個尺寸就好，不同的裝置和用途需要不同尺寸的圖示：

基本的瀏覽器圖示

16x16 像素：最經典的 Favicon 尺寸，用於瀏覽器分頁上的圖示
32x32 像素：用於較高解析度的瀏覽器分頁、書籤列表等
48x48 像素：Windows 網站捷徑使用的尺寸

Apple 裝置圖示

180x180 像素：iPhone 和 iPad 上「加入主畫面」時使用的圖示（Apple Touch Icon）。這是最重要的行動裝置圖示尺寸，因為蘋果裝置的市佔率非常高

Android 和 PWA 圖示

192x192 像素：Android Chrome 加入主畫面使用的圖示
512x512 像素：PWA（漸進式網頁應用程式）安裝時使用的圖示

Windows 磚貼圖示

150x150 像素：Windows 開始選單的磚貼圖示
270x270 像素：大型磚貼圖示

其他常見尺寸

96x96 像素：Google TV 和部分 Android 裝置使用
144x144 像素：某些 Windows 應用的圖示

不要被這麼多尺寸嚇到！Free2Box 的 Favicon 生成器只需要你上傳一張圖片，就會自動幫你產生所有需要的尺寸。你不用一個一個手動調整。

Favicon 的圖片格式

ICO 格式

ICO 是最傳統的 Favicon 格式，可以在單一檔案中包含多種尺寸的圖示。雖然有點過時，但它的相容性最好，幾乎所有瀏覽器都支援。建議至少準備一個 favicon.ico 檔案（包含 16x16 和 32x32）。

PNG 格式

現代瀏覽器都支援 PNG 格式的 Favicon。PNG 可以提供更好的畫質和透明度支援。大部分較大尺寸的圖示（Apple Touch Icon、Android 圖示等）都使用 PNG 格式。

SVG 格式

SVG 是向量格式，可以在任何尺寸下保持清晰。雖然目前只有部分瀏覽器支援 SVG Favicon，但它是未來的趨勢。如果你有 SVG 版本的 Logo，建議也加入 SVG Favicon。

如何使用 Free2Box 製作 Favicon

步驟一：準備原始圖片

理想的 Favicon 原始圖片應該是：

正方形：1:1 的比例最理想
簡潔的設計：在 16x16 的小尺寸下還是要看得清楚
高解析度：至少 512x512 像素以上，這樣縮小後品質才好
透明背景：使用透明背景的 PNG 效果最好

如果你的 Logo 太複雜，建議製作一個簡化版本專門作為 Favicon 使用。例如只取 Logo 中的圖案部分或文字首字母。

步驟二：開啟 Favicon 生成器

前往 Free2Box 網站，找到「Favicon 生成器」工具。

步驟三：上傳圖片

拖放或選擇你準備好的圖片。工具會自動偵測圖片是否為正方形，如果不是，你可以選擇裁剪方式。

步驟四：預覽各尺寸效果

上傳後，工具會自動產生所有需要的尺寸，你可以在預覽區域看到每個尺寸的效果。特別注意 16x16 和 32x32 這兩個最小的尺寸，確保你的圖示在這個大小下還是看得清楚。

步驟五：下載 Favicon 包

確認所有尺寸都沒問題後，點擊「下載」按鈕。你會得到一個壓縮包，裡面包含所有尺寸的圖示檔案，以及需要加入到 HTML 中的程式碼片段。

Favicon 生成器

一鍵產生所有尺寸的 Favicon 圖示

如何將 Favicon 加入你的網站

下載好 Favicon 檔案後，你需要在網站的 HTML 中加入對應的標籤。以下是完整的設定範例：

<!-- 基本 Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">

把這些標籤放在你的 HTML 的 <head> 區塊中，然後把圖示檔案放在你網站的根目錄就可以了。

大多數 CMS 平台（WordPress、Shopify、Wix 等）都有內建的 Favicon 設定功能，通常在「網站設定」或「外觀設定」中可以找到。只需要上傳一張圖片，平台就會自動處理其他事情。

Favicon 設計的注意事項

一、簡潔至上

Favicon 在 16x16 像素的尺寸下必須清晰可辨。過於複雜的設計在這個尺寸下會變成一團模糊的東西。最好的 Favicon 通常是：一個字母、一個簡單的圖形、或品牌色彩的色塊。

二、使用品牌色彩

Favicon 是品牌識別的一部分。使用你品牌的主色調可以增加辨識度。在一堆灰灰白白的分頁圖示中，一個色彩鮮明的 Favicon 特別容易被注意到。

三、考慮深色模式

越來越多使用者會使用瀏覽器的深色模式。確保你的 Favicon 在深色背景下也能清楚顯示。如果你的圖示是深色的，在深色背景下可能會看不清楚。可以考慮加上淺色的邊框或選擇在深淺背景下都顯眼的顏色。

四、測試在不同場景下的效果

製作好 Favicon 後，在不同瀏覽器、不同裝置上都測試一下。也要看看在書籤列表、瀏覽歷史中的效果。有些在分頁上看起來不錯的設計，在其他場景下效果可能不太理想。

五、與主 Logo 保持一致性

Favicon 不一定要和你的主 Logo 完全相同（因為尺寸差太多），但應該要讓人一眼就能聯想到你的品牌。保持色彩和核心元素的一致性非常重要。

常見問題

Favicon 沒有顯示怎麼辦？

最常見的原因是瀏覽器快取。嘗試清除瀏覽器快取後重新載入頁面。也要確認檔案路徑是否正確，以及 HTML 標籤是否正確設定。

可以用動態 Favicon 嗎？

技術上可以用 JavaScript 動態改變 Favicon（例如顯示通知數量），但不建議使用動態 GIF 作為 Favicon，因為支援度不好而且會很干擾。

多久該更新一次 Favicon？

除非你更改了品牌識別，否則不需要經常更新。但如果你做了品牌重塑（Rebranding），記得同時更新 Favicon。

結語

Favicon 雖然小，但它是使用者對你網站的第一印象之一。一個精心設計的 Favicon 能夠提升品牌辨識度、增加專業感，也讓使用者在眾多分頁中更容易找到你的網站。使用 Free2Box 的 Favicon 生成器，你只需要上傳一張圖片，就能自動產生所有需要的尺寸和格式。不需要手動調整每一個尺寸，不需要研究各種裝置的規格，一切都自動完成。趕快為你的網站製作一個好看的 Favicon 吧！