Favicon 是一個極小的方形 PNG——通常是 16、32 或 48 像素——出現在瀏覽器分頁、書籤和搜尋結果旁邊。對這個用途而言「圖示太大」，幾乎總是代表硬碟上有一張來源圖尺寸過大：一張動輒數千像素的標誌、一張高解析度的 PNG 匯出檔，或一張主體沒有置中的照片。問題很少出在檔案內容本身；而是來源的形狀和像素數量不對。分頁位置無法使用一張寬 3000 像素的橫向圖，所以務實的解法是把那張大圖置中裁切成正方形，再把每個目標尺寸（16、32、48、64、128、256、512）各自匯出成獨立的 PNG 檔。透過 Favicon Generator 來處理，解碼、裁切、縮放和 PNG 匯出全部都在目前的瀏覽器分頁內完成，每個下載檔案會以對應的像素尺寸命名（favicon-32x32.png、favicon-48x48.png 等等），並為每個檔案寫入對應的 rel="icon" HTML 片段，讓資產與標記保持一致。
在這個情境中「太大」通常代表什麼
「圖示太大」依觀察位置不同，可能指不同的問題。在影像工具類別中，幾乎總是指某個來源檔的像素尺寸和長寬比不符合瀏覽器分頁、書籤介面或 PWA 啟動圖示的預期。Favicon 位置既小又細的正方形：16x16 用於網址列、32x32 用於高 DPI 分頁、48x48 用於 Windows 工作列捷徑。任何寬大於高的圖都必須裁切；任何小於所要求尺寸的圖都必須從完整來源重新渲染，不能直接從小預覽拉出來。認清問題出在來源檔本身——而非圍繞它的標記——才是讓流程可重複進行的關鍵。
兩個實用的檢查步驟能幫助確認來源檔本身就是元凶。首先，開啟候選檔案，確認主體確實位於畫面正中央，因為 favicon 尺寸採用中央封面裁切。其次，檢視自然像素尺寸：如果影像為 800x800 或更大，每個要求的 favicon 尺寸都會從解碼後的來源重新渲染；如果已經是 64x64 或更小，最小的檔案就不會有足夠細節維持清晰。一旦這兩個事實釐清，產生一組合適的正方形 PNG 就是一個簡單的三步驟工作。
從過大的圖示建立正方形 Favicon 尺寸
整個工作在瀏覽器中只需三個操作步驟，過程中不需要上傳。
- 選擇一張主要主體靠近中央的 PNG、JPEG 或 WebP 影像。開啟檔案選擇器，挑選你想轉換的本機影像。工具會在瀏覽器中讀取檔案，直接拒絕 SVG 與動畫格式輸入，並在繼續之前依 25 MB 大小上限與 4000 萬像素處理上限進行驗證。如果來源被拒絕，請先將其轉換為靜態 PNG、JPEG、WebP 後再重試。
- 選擇你需要的正方形 PNG 尺寸並產生 favicon 檔案。從 16、32、48、64、128、256 和 512 像素輸出中挑選。每個選定的尺寸會從解碼後的來源，以其自然目標尺寸，在各自的離屏畫布上獨立渲染——預覽圖絕不會被放大後重複用於較大的下載檔。
- 檢查並下載每個圖示，再把對應的 HTML 連結片段複製到你的網站。至少以 100% 縮放開啟 16 與 32 像素檔案，確認主體仍可辨識；下載你真正會發佈的那些檔案，只把這些檔案對應的連結行複製到頁面的 head 區塊。
當來源準備好、尺寸選定後，Favicon Generator 會在不向伺服器往返的情況下完成這三個步驟；來源在你的分頁中解碼，PNG 輸出以 image/png Blob 的形式在本機產生。
中央裁切如何決定保留哪些部分
這個工具不使用可拖曳的選取框來裁切。它採用一條單一、可預測的規則，稱為中央封面裁切：從原始影像中央擷取最大的正方形，再把該正方形縮放成每個選定的輸出尺寸。這條規則可以事先輕鬆推論，這正是它適用於重複生產流程的原因。
- 正方形來源 (1:1)：不會裁切任何東西。整張影像會送進每個 favicon，再進行縮放。
- 橫向來源（寬大於高）：從左右兩側等量移除條帶以達到正方形。原本位於兩側的內容會消失。
- 直向來源（高大於寬）：從上下等量移除條帶。中央主體之上或之下的內容會消失。
因為裁切以中央為準、規則固定，所以置中的標誌、文字組合或符號在每個輸出尺寸都能保持原本構圖。任何在來源中刻意偏離中央的內容都會被切掉——遇到這種情況，請先使用互動式影像裁切工具把主體移至中央，再執行產生器。同一條規則套用於照片時，對於品牌標記類的 favicon 通常沒問題，但對於寬幅風景照這類場景位於邊緣的影像則很少適用。
Match Every PNG File to a Working HTML Link Tag
Each generated file ships with a matching rel="icon" HTML snippet, so the markup you paste already names the correct file, sets the right media type, and declares the square size. The four attributes the snippet uses are documented by the WHATWG HTML standard for the link element, and they appear in this order:
| Attribute | Example value | What it does |
|---|---|---|
| rel | icon | Tells the browser this resource is an icon. |
| type | image/png | Sets the media type so the browser knows the file is a PNG. |
| sizes | 32x32 | Declares the exact square dimensions of the file as WxH. |
| href | /favicon-32x32.png | Root-relative path written by the tool; edit it to match your real asset directory. |
A typical block for the three most common sizes looks like this:
- <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
Paste the lines for the sizes you actually publish, upload the matching PNGs to those paths, and the browser will pick an appropriate file from the list. For a deeper walkthrough of this exact markup pattern, see the PNG favicon HTML link walkthrough. The MDN reference for the rel="icon" relationship at MDN rel icon reference describes the same multi-size pattern. The final choice between sizes is still browser behavior, so test in the browsers and bookmark surfaces your visitors actually use.
Inspect the Smallest Downloads at Full Resolution
The most common reason a finished favicon still looks blurry or cropped is not the file format and not the markup. It is the resolution step. Browsers smooth pixels when they resize, so very small outputs can soften thin lines, narrow letterforms, and small ornaments that read clearly in the full-size source. For a 16x16 PNG, one pixel of slop is one-sixteenth of the entire image — there is no room to hide sub-pixel detail.
Two habits prevent most "too large / too small" mismatches after deployment:
- Open the 16 and 32 pixel downloads at 100 percent zoom (no zoom in the image viewer) and confirm the subject is still recognizable. If it is not, the source composition is the problem, not the tool itself.
- Clear the browser and site cache after every deploy. Old icons persist in caches, in bookmark snapshots, and inside some service workers — a fresh tab on a cached browser is not proof the deployment is broken.
The tool never enlarges a small preview and reuses it for the larger files, so the 512 px download really is a 512 px PNG and the 16 px download really is a 16 px PNG. What you inspect at the actual pixel size is what the browser will receive.
What Favicon Generator Does Not Produce
The tool's scope is deliberately narrow so the outputs are predictable. It creates selectable PNG favicon sizes and the matching HTML link tags, and that is all. It does not produce an ICO container, an SVG icon, an Apple touch icon, an Android icon set, a pinned-tab asset, a web app manifest, or any platform-specific package. It also does not add transparency to an opaque source or strip a background automatically — PNG can carry transparency that already exists in a PNG or WebP input, JPEG sources begin with no transparent pixels, and the output looks the same as the source on those edges.
Those limits matter when "too large" actually means "the wrong shape for the surface." A tab icon needs a PNG. A pinned tab needs SVG. A home-screen shortcut needs a platform-specific package. Picking the smallest tool that covers the surface is usually faster than chaining three converters together, and starting from a centered, high-contrast source means the 16 pixel file will still be recognizable when the rest of the workflow is finished.