網站需要哪些 Favicon 檔案，各種尺寸是多少

網站需要一組小型的圖示檔案，而大多數的決定都與尺寸有關。請在網站根目錄放一個 favicon.ico，內含 16、32、48 像素的圖片，供瀏覽器分頁與 Windows 使用。再加上一個 180 像素的 Apple touch icon，供 iPhone 與 iPad 主畫面使用，並準備 192 與 512 像素的 PNG 圖示，列在網路應用程式清單（web app manifest）中。Favicon 產生器能用一張標誌一次做出所有檔案，還會產生要貼到頁面中的 HTML 程式碼。

檔案與尺寸

產生器下載的 ZIP 內含全部七個檔案。favicon.ico 由 16、32、48 像素的三張 PNG 圖片組成，並存放在同一個檔案裡。每個圖示都是同一張標誌的縮小版。產生器會先將你的圖片處理成 512 像素版本，再從中製作各種尺寸。

HTML 程式碼

產生器會為頁面的 head 產生四行程式碼：

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

第一行指向 favicon.ico，並宣告其尺寸為 48 × 48。第二行指定 32 像素的 PNG。第三行指定 Apple touch icon，第四行則指向清單檔，其中列出了 192 與 512 像素的圖示。16 像素的 PNG 雖然在 ZIP 中，但不在這些程式碼裡。瀏覽器也會自行尋找 /favicon.ico，因此即使缺少第一行，檔案仍會被找到。除非你的檔案存放在其他位置，否則請保留路徑原樣。

小尺寸為何要用簡單的圖形

16 × 16 像素的圖示總共只有 256 個像素。48 像素的圖示有 2,304 個，而 512 像素的原始圖有 262,144 個。標誌中的大部分細節在縮到 16 像素時都會消失，細線或小字會變得模糊。請使用簡單的標記，或是一到兩個對比強烈的字母。

字母模式可接受一到兩個字元，會把字母放大並置中於圖示中；若太寬，則會自動縮小。形狀可選方形、圓角或圓形。預覽會並排顯示 16、32、48、180 與 512 像素的結果，並提供淺色與深色分頁，讓你在下載前先檢查小尺寸的效果。調整形狀、留白或背景時，預覽會即時更新，方便你逐一嘗試各種設定。

留白、背景與 Apple 圖示

留白有三種設定：無留白、小與大。「小」會在圖示四邊各留下 10% 的空白，「大」則留下 20%。在圖片模式下，「無留白」會將圖片裁切成中央的正方形，因此寬版標誌的兩端會被裁掉。有留白的設定則會把整張圖片完整放入正方形中。

背景可選透明、白色或自訂，預設為透明。Apple touch icon 一律為不透明。在圖片模式下，其透明區域會套用你選擇的背景色；若背景設為透明，則會改為白色。在字母模式下，則使用字母的背景色。Apple touch icon 的透明區域在 iPhone 與 iPad 上可能會顯示為黑色，因此產生器會將其填滿。其他尺寸則保留你選擇的透明度。透明 PNG 為何變成黑底說明了其成因。

Favicon 是正方形的，因此寬版標誌需要先加上正方形外框。照片變正方形會將整張圖片放入 1:1 的框中，並可選模糊、白色、黑色或自訂的邊框，確保不會裁掉任何部分。調整圖片尺寸可設定精確的像素。開啟「保持比例」並同時填入兩邊的數值後，圖片會在不變形的情況下嵌入指定的方框中。照片長寬比說明則涵蓋了常見的比例。

需要時間才會生效的變更

瀏覽器會將 favicon 存在快取中。同一個網址的檔案即使已更新，仍可能在一段時間內持續顯示舊圖示，因此一般的重新整理通常不夠。請直接開啟圖示的網址，確認伺服器上已是新檔案，接著以略過快取的方式重新載入頁面。若舊圖示仍然顯示，請為新檔案改用不同的名稱，並更新連結指向該檔案。

在 fixmint 上的操作方式

1. 選擇「圖片」並將標誌拖曳到方框中，或選擇「字母」並輸入一到兩個字元。
2. 將「留白」設為無留白、小或大，並將「背景」設為透明、白色或自訂顏色。
3. 在淺色與深色分頁中檢查 16、32、48 像素的圖示，以及 180 與 512 像素的預覽。
4. 按下「下載 ZIP」可取得全部七個檔案，或按「下載 favicon.ico」只取得該檔案。
5. 按下「複製 HTML」，並將「頁面 head 用的 HTML」中的程式碼貼到每個頁面的 head 中。

特殊情況

• 你的圖片只會留在你的裝置上。 產生器在瀏覽器中製作圖示，不會上傳任何內容。
• 兩個字元的字母。 可接受兩個字元，並會縮小繪製以便兩者都能放入。因此在 16 像素下，會比單一字母更難辨識。
• 檔案名稱。 請保留 HTML 中使用的名稱，因為連結是指向這些檔案的。
• 無法讀取的檔案。 若圖片無法轉換為圖示，產生器會顯示訊息「無法從此輸入產生圖示，請嘗試其他圖片。」並清空輸出內容。請嘗試其他檔案，或將圖片以常見格式重新儲存。