跳至主要內容
Lizely

Favicon 生成器

選擇一張本機圖片,轉換為可選的正方形 PNG favicons,並複製對應的 HTML 圖示連結。

隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。

使用方式

  1. 1.請選擇一張以主題位於中央的 PNG、JPEG 或 WebP 圖片。
  2. 2.選取所需的正方形 PNG 尺寸,並產生 favicon 檔案。
  3. 3.檢視並下載每個圖示,然後複製對應的 HTML 連結片段至你的網站。

關於Favicon 生成器

favicon 產生器可將一張普通的本機圖片轉換為網站實用的正方形 PNG 動態圖示組合。選擇 PNG、JPEG 或 WebP 來源圖片,選取所需的像素尺寸,並分別下載每個產生的檔案。工具也會寫入對應的 HTML 鏈結元素,包含 PNG 媒體型別與精確的正方形尺寸值,讓檔案與標籤保持一致。所有處理都在當前瀏覽器分頁中執行。來源圖片會在本機進行解碼、使用畫布繪製,並不會傳送到處理伺服器。

Favicon 空間極小,因此來源的構成相當重要。此生成器採用中央覆蓋裁剪:從圖片中央取出最大的正方形,再進行縮放。橫向圖片會從左右各裁掉相等部分,縱向圖片則從上下各裁掉相等部分,若來源已是正方形則不進行裁剪。此可預測的規則適用於標誌、符號、首字母或圖示等主題已位於中央的內容。此非互動式裁剪編輯器,若主題刻意偏離中心,建議先使用圖片裁剪工具處理。

你可以選擇 16、32、48、64、128、256 和 512 像素的輸出。每個選取的檔案都會從已解碼的來源,以各自要求的原始尺寸獨立算繪。本工具不會放大小型預覽後,再將該預覽重複用於較大的下載項目。每個結果都是 image/png Blob,檔名例如 favicon-32x32.png。預覽只用於方便目視檢查;下載連結所得的檔案會具有該連結所標示的精確尺寸。由於瀏覽器在調整大小時會平滑像素,極小的圖示可能會讓細線或小字變得柔化。發布前,請至少以實際尺寸檢查 16 和 32 像素的檔案。

產生的片段使用標準 rel icon 關係,圖片型別為 image/png,並包含正方形尺寸的識別字串,以及根目錄相對的檔名。請只複製你會實際放置在網站上的檔案行。之後將這些 PNG 檔案放在對應的根目錄路徑,或修改每個 href 以符合你的實際資產目錄。多個圖示連結讓瀏覽器能選擇適當的資源,但最終選擇仍由瀏覽器行為決定。這個工具無法保證特定瀏覽器、書籤介面或作業系統會顯示哪一個圖示。當舊圖示在部署後仍然顯示時,請清除網站資料或瀏覽器快取。

此範圍刻意維持狹窄。它僅生成 PNG 瀏覽器 favicons 與對應的 HTML 片段。它不生成 ICO 容器、SVG 圖示、Apple touch 圖示、Android 圖示集、 pinned-tab 資產、網頁應用程式 manifest 或平臺特定的套件。它也不會為不透明來源增加透明度,或自動移除背景。PNG 可保留原本在 PNG 或 WebP 來源中已存在的透明度,而 JPEG 來源則從頭沒有透明像素。若原始圖片有透明或淺色邊緣,建議在亮色與暗色背景中分別檢視結果。

輸入僅限於 PNG、JPEG 與 WebP 檔案,大小不得超過 25 MB。瀏覽器解碼源檔後,若圖片像素數超過 40 百萬像素,將被拒絕,並在分配輸出畫布前進行處理。此解碼後的處理資源會減少後續畫布記憶體負載,但無法避免瀏覽器初始解碼時因檔案過大或格式錯誤而耗用記憶體或失敗。僅檔案壓縮大小無法反映解碼所需的記憶體。SVG 與動態輸入將被排除,以避免可程式化向量內容與模糊的影格選擇。若源檔被拒絕,請先轉換為支援的靜態點陣圖格式再試一次。用於預覽與下載的物件 URL 在結果更新或頁面關閉時將被廢除,且過期的非同步渲染作業無法取代較新的選擇。

為確保可靠的釋出流程,請從簡單高對比的正方形標誌開始,產生所需的尺寸,並在 100 百分比縮放下開啟最小文件。確認主題仍可辨識,且沒有重要細節被中央裁剪所截斷。上傳所選的 PNG 文件,將其對應的連結行複製至文件頭,並驗證已部署的頁面來源與網路路徑。這個產生器準備資產與標籤,不會修改你的網站、上傳文件或確認生產快取行為。

方法與來源

瀏覽器會驗證靜態的 PNG、JPEG 或 WebP 檔案,然後在檔案大小和像素數的安全限制下進行解碼。一個共用的中心覆蓋計算會從自然來源中選擇最大的中心正方形。每個請求的尺寸都會有獨立的精確尺寸 offscreen 畫布、高品質繪圖操作,以及 image/png Blob 匯出。相同的選取尺寸會產生標準 rel icon HTML 行,並與對應的檔案名稱一致。

常見問題

圖片會上傳到伺服器嗎?
不會。圖片解碼、中央裁切、畫布調整以及 PNG 建立皆在你瀏覽器的標籤頁中本機完成。
此工具會產生 ICO 檔案或網頁應用程式 manifest 檔嗎?
不會。它僅生成可選的 PNG favicon 尺寸與對應的 HTML 圖示連結。ICO、SVG、Apple 圖示、manifest 與平臺套件均不在其範疇內。
為何我的 favicon 看起來模糊或被裁切?
源檔會被裁切為正方形,且非常小的圖示無法保留細節。建議從中心對齊、高對比的圖片開始,並檢視實際尺寸下的 16 與 32 像素下載內容。

圖片工具 使用指南

查看全部