網站圖示（Favicon）是一個小型方形圖示，通常為 16 x 16、32 x 32 或 48 x 48 像素，瀏覽器會在分頁、書籤以及主畫面捷徑中，將它顯示在頁面標題旁邊。而產生一個網站圖示的意思，就是把一張一般圖片轉換成那些特定尺寸的方形 PNG 檔案，並在網站中加入對應的 HTML link 標籤，讓瀏覽器能夠找到並顯示它。大多數網站需要的不只有一種尺寸，因為不同的瀏覽器、作業系統和裝置會要求不同的像素尺寸，這就是為什麼會有專門的 Favicon 產生器：它只要一張來源圖片，就能一次批次匯出所有常用的網站圖示尺寸，並同時提供可直接複製貼上的 HTML，讓每個瀏覽器都能指向正確的檔案。
整個過程都在你的瀏覽器本地端完成。你從電腦中挑選一個檔案，工具會將它裁切並縮放成清晰的方形，接著你就能下載產生的 PNG，不需要把原始檔案上傳到任何伺服器。這讓它非常適合用在 logo、個人頭像，或任何你手邊已有的圖片，同時也代表你不需要等待網路往返，也不用擔心第三方在 logo 正式發布前就看見私人或尚未公開的版本。
網站圖示在你的網站上實際做些什麼
網站圖示不只是裝飾。它是一個真實的檔案，瀏覽器會用一般請求從你的伺服器抓取，瀏覽器會依據裝置與使用情境決定要請求哪個檔案。桌機版的 Chrome 分頁通常會請求 32 像素的圖示，釘選的分頁或書籤可能會用 64 或 96 像素，而 iOS 主畫面的捷徑則可能會請求 180 像素的 apple-touch-icon。如果你的 HTML 沒有透過對應的 <link rel="icon"> 標籤宣告正確的檔案，瀏覽器就會 fallback 到預設值，或完全不顯示任何圖示。
正因為如此，產生網站圖示其實是合而為一的兩件事：在正確的像素尺寸下產生正確的方形 PNG 檔案，並用正確的 HTML 屬性把這些檔案連結到你的頁面，讓瀏覽器能夠找到它們。Favicon 產生器會同時處理這兩個步驟，這對熟悉圖片、但比較不擅長編輯原始 HTML 的人來說，解決了一個常見的障礙。
選擇合適的來源圖片
在打開工具之前，先花一分鐘檢視一下來源圖片。網站圖示非常小，所以圖示必須在 16 x 16 像素時仍然清晰可辨，這大約就是手機螢幕上一個字元的大小。擁有明確中心造型、簡單輪廓或單一粗體字母的圖片通常效果不錯。充滿細節、雜亂背景或細線條的照片，在縮成小尺寸時往往會變成一團模糊，因為產生器為了塞進畫布，必須積極地丟棄像素。
把主要主體放在畫面中央附近，因為產生器會裁切成正方形。如果你 logo 的重點部分落在角落，工具在修剪邊緣時就會把它切掉。PNG、JPEG 和 WebP 檔案都可以接受。如果你的 logo 目前是 SVG 之類的格式，你可能會想先閱讀 JPEG vs PNG vs WebP，決定哪種匯出格式最適合網站圖示，因為 PNG 由於無損壓縮且能乾淨地處理純色與銳利邊緣，是圖示的慣用選擇。
正方形的來源圖片最理想，但並非必須。只要圖片的中心是你想在圖示中呈現的內容，產生器就會處理裁切。一個有用的預先檢查方式，是用任何看圖軟體把圖片預覽成 32 像素寬：如果在這個尺寸下你仍然能看出它是什麼，那它幾乎肯定能做出一個清晰可讀的網站圖示。
逐步產生 Favicon 檔案
- 在瀏覽器中開啟 Favicon 產生器。
- 點擊上傳區域，從電腦中選擇一張 PNG、JPEG 或 WebP 圖片。檔案會保留在你的裝置上，不會上傳到任何地方。
- 預覽來源圖片，確認中央主體置中，並且能在方形裁切後保留下來。
- 選擇你想要產生的方形 PNG 尺寸。常見的選擇包括 16、32、48、64、96，以及用於 apple-touch-icon 支援的 180 像素。
- 點擊產生按鈕，等待工具渲染出每個方形預覽。
- 以實際像素尺寸檢視每個產生的圖示。特別仔細觀察 16 像素和 32 像素的版本，因為這兩個尺寸對細節最為要求。
- 下載 favicon 檔案，可以單獨下載，也可以依照工具提供的選項打包成單一檔案下載。
- 複製工具顯示的對應 HTML link 程式碼片段。這些就是用檔名引用每個下載檔案的
<link rel="icon">與<link rel="apple-touch-icon">標籤。 - 把這些程式碼片段貼到網站 HTML 模板的
<head>區段中。 - 把下載的 PNG 檔案上傳到網站的公開目錄，檔名必須與 HTML 片段引用的完全一致，這樣連結才會正確解析。
- 在瀏覽器中重新載入網站，檢查圖示是否出現在分頁、書籤，以及你所指定的所有釘選分頁或主畫面情境中。
挑選合適的 Favicon 尺寸
你不需要下載工具提供的每一種尺寸。規模較小的網站通常只要兩個檔案就能應付：一個 32 像素的 PNG 給瀏覽器分頁用，一個 180 像素的 apple-touch-icon 給 iOS 主畫面書籤用。規模較大或更講究的專案通常會涵蓋更多尺寸，因為每個情境都會要求特定的像素數，過小的圖片被放大後會顯得模糊。
| 尺寸（px） | 典型用途 | 是否值得加入？ |
|---|---|---|
| 16 x 16 | 桌機上經典的瀏覽器分頁圖示 | 建議加入，以獲得廣泛的相容性 |
| 32 x 32 | 現代桌機瀏覽器分頁與工作列釘選 | 建議加入，是推薦的基本尺寸 |
| 48 x 48 | Windows 網站捷徑與部分分頁情境 | 選用 |
| 64 x 64 | 更高密度的桌機瀏覽器與書籤列 | 選用 |
| 96 x 96 | Android Chrome 主畫面捷徑 | 建議加入，以支援行動裝置 |
| 180 x 180 | 用於 iOS 主畫面書籤的 Apple touch icon | 若你重視 iOS 使用者，建議加入 |
上表的確切數字來自常見的瀏覽器與平台慣例。如果你想了解背後的規格細節，MDN 上關於 favicon 的文件是一個可靠的起點。當你拿不定主意時，至少產生 16、32 與 180 三種尺寸；如果你的受眾明顯傾向某個特定平台，例如 Android 主畫面使用者或 Windows 桌機捷徑使用者，再加入更多尺寸。
把 HTML 接入你的網站
PNG 一旦放到伺服器上，HTML 的部分就很直觀。每個 <link> 標籤都放在頁面的 <head> 元素中，明確告訴瀏覽器在什麼情境下要抓取哪個檔案。Favicon 產生器會以標準格式輸出程式碼片段，所以你通常只需要原樣複製，並在圖示存放在子目錄（例如 /icons/）時調整檔案路徑即可。
一個典型的區塊看起來就像一連串的 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 標籤，每種尺寸一個，再加上給 iOS 用的 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">。瀏覽器會依序讀取這些標籤，挑選最適合當前情境的版本，所以宣告多個尺寸並不會浪費頻寬。瀏覽器只會下載它實際需要的檔案，其餘的則會被忽略，直到不同的情境要求它們為止。
貼上程式碼片段並上傳檔案之後，請清除瀏覽器快取或強制重新整理頁面。瀏覽器會積極地快取 favicon，所以一般的重新整理通常只會顯示舊的圖示或什麼都不顯示，直到快取過期為止。對於靜態網站產生器與內容管理系統來說，模式也相同：<link> 標籤放在 head 模板中，PNG 則放在作為網站根目錄的那個目錄中。
在產生之前先準備好你的圖片
如果你的來源圖片非常大，或是採用你不希望直接上傳的格式，先做一些前處理會有幫助。你可以使用 Image Resizer 將原圖縮放到容易處理的大小，或是用 Image Compressor 來縮小檔案大小後再產生。如果來源檔案已經接近正方形、邊長也只有數百像素，產生器在縮放時就會更有彈性，因為它需要裁切的範圍較小，也能更好地保留細節。
若要處理更大型的圖片格式決策，how to compress image file size in your browser 一文會介紹同樣在不上傳任何檔案的情況下進行本地處理的做法，這與 favicon 的工作流程非常搭配。在瀏覽器中完成前處理也意味著你可以快速反覆：縮放、重新產生、檢視、再來一次，全程不離開你的本機。
常見 Favicon 問題排除
如果圖示在上線後沒有出現，照著一份簡短的檢查清單逐項確認。首先，確認 HTML 程式碼片段是放在 <head> 標籤內，而不是 <body> 中。其次，確認 href 屬性中的檔案路徑與上傳 PNG 的實際位置完全相符，包含目錄與大小寫，因為在大多數平台上，網頁伺服器是大小寫敏感的。第三，直接在全新的瀏覽器分頁中開啟 PNG 的網址，確認檔案確實可以存取。如果檔案能讀取但圖示仍不顯示，幾乎一定是瀏覽器快取造成的，強制重新整理或換一個瀏覽器就能確認。
如果圖示在 16 像素時看起來模糊，來源圖片可能太過細節。試著用更簡化的 logo 版本重新產生，或使用中央標誌較粗、背景較為乾淨的變體。如果圖示被裁切得不對，請把來源圖片重新置中，讓主體落在中間後再重新產生。如果圖示在其中一個瀏覽器有顯示、另一個卻沒有，那麼缺少的那個瀏覽器很可能只是在找一個你沒有宣告的尺寸，這時只要加上對應的 <link> 標籤通常就能解決。
產生一個 favicon 是件小事，但回報卻很可觀。一個清楚的圖示能在擁擠的分頁列中讓你的網站更容易被辨識，在書籤清單中看起來更專業，也能讓行動裝置使用者在主畫面上擁有辨識度高的捷徑。使用 Favicon 產生器時，從來源圖片到實際上線的 HTML，整個流程只需要幾分鐘，而且不需要任何影像編輯軟體或伺服器上傳。
想深入了解，請參閱 How to Make a GIF in Photoshop: A Practical Walkthrough。