免費轉換器

圖片轉 網站圖示生成器

從任意圖片生成多種尺寸(16x16 至 512x512)的網站圖示檔案。免費、快速,完全在瀏覽器中執行。

拖放圖片至此處

支援 PNG、JPG、SVG、WebP。最大 10MB。

關於此工具

網站圖示是出現在瀏覽器標籤、書籤和歷史清單中的小圖示。最初的圖示 - /favicon.ico 上的 16×16 ICO 檔案 - 已擴展為針對不同平台的不同尺寸的一組複雜圖示:瀏覽器標籤為 16×16 和 32×32,iOS 主畫面為 180×180,Android 為 192×192 和 512×512,以及 Windows 512 的各種尺寸。現代網站圖標產生器所做的就是從單一來源圖像生成所有這些內容。

該工具採用單一高解析度來源圖像(通常是方形標誌)並產生全套圖示資源以及引用它們所需的 HTML 連結標籤。輸出包括 ICO、多個 PNG 和用於漸進式 Web 應用程式元資料的 manifest.json。將產生的檔案拖曳到網站的根目錄中,並透過產生的 HTML 引用它們。

所有處理都發生在您的瀏覽器中。無需上傳,無需API調用,無速率限制。輸出適用於顯示網站圖示的所有現代瀏覽器和作業系統。

為什麼要產生網站圖標

沒有網站圖示的網站看起來還沒完成。瀏覽器標籤顯示通用圖示;書籤沒有視覺識別碼;網站看起來不太專業。添加適當的圖標集是一個省力、高影響力的拋光步驟,表明對細節的關注。

現代圖標要求已經超出了 /favicon.ico 的範圍。 iOS 主畫面圖示、Android Chrome 圖示、Windows 磁貼圖示和深色模式變體都使用不同的檔案。從一個來源產生所有文件可確保品牌一致,而無需手動管理每個文件。

使用方法

上傳來源圖片,取得完整的圖示集。

  1. 上傳來源圖片: 使用至少 512×512 像素的方形影像。 PNG 是首選(透明度支援); SVG 也被接受。更高解析度的來源會產生更清晰的小圖示。
  2. 配置平台選項: 根據需要啟用 iOS、Android、Windows 和 PWA 輸出。預設設定產生大多數網站所需的標準設定。
  3. 自訂顏色和主題: 選擇 Windows 磁貼和 PWA 初始畫面的主題顏色。符合您的品牌識別。
  4. 下載並部署: 保存生成的 zip。將檔案放置在網站的根目錄中,並將產生的 HTML 連結標記新增至 <head> 中。 HTML 以正確的尺寸引用每個圖示。

常見用例

技術細節

完整的現代圖標集:favicon.ico(16+32+48多解析度)、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png(180×180)、android-192x192.png、android-chrome-512x512.png、mstile-150150.pngx150.pngx。加上 PWA 的 site.webmanifest,用於 Windows 的 browserconfig.xml。

每個 PNG 都是透過基於畫布的來源下採樣生成的。 ICO 使用 JavaScript 構建,透過使用 DataView 寫入將 16/32/48 版本組合成多重解析度 ICO 格式。

HTML 連結標記使用適當的 rel 和sized 屬性來引用每個檔案。生成器將這些生成為您網站的 <head> 的複製貼上就緒片段。

最佳實踐

常見問題

我該上傳什麼格式的圖片?
具有透明背景的 PNG 效果最佳。使用至少 512x512 像素的方形影像,以便該工具可以縮小尺寸而不會損失品質。 SVG 也能很好地工作,因為它可以縮放到任何尺寸。
這會產生什麼尺寸?
16x16(瀏覽器標籤)、32x32(瀏覽器標籤@2x)、48x48(Windows 工作列)、180x180(Apple Touch 圖示)、192x192(Android 主畫面)、512x512(PWA 啟動畫面)。 ICO 檔案包含 16、32 和 48px 尺寸。
我將網站圖示檔案放在哪裡?
將 favicon.ico 放在您的網站根目錄中。其他 PNG 尺寸位於您的公用資料夾或任何可存取的路徑中。在 <head> 部分中新增指向每個檔案位置的 HTML 連結標記。
為什麼我的網站圖示在瀏覽器中沒有更新?
瀏覽器積極快取網站圖示。清除瀏覽器緩存,嘗試在隱身視窗中打開,或將版本查詢字串 (?v=2) 新增至圖示 URL 以強制刷新。
為什麼我的圖示不更新?
瀏覽器會積極快取網站圖標,有時會快取數天。透過清除快取、直接開啟圖示 URL 或將版本查詢參數附加到連結標記來強制刷新。
我的圖像是否已上傳到伺服器?
不會。生成發生在您的瀏覽器中。
我應該使用 SVG 還是 PNG?
源的 SVG(與分辨率無關)。生成器輸出特定尺寸的 PNG;現代瀏覽器也透過連結 rel=icon type=image/svg+xml 支援 SVG 圖示。
什麼是 site.webmanifest?
用於描述圖示、顏色和其他元資料的漸進式 Web 應用程式的 JSON 清單。對於可安裝的網路應用程式是必需的;即使包含在標準網站上也是無害的。