Icon Workshop
更小的圖示，
更亮眼的網頁。

一張圖片，適配每個螢幕。

Favicon 與應用程式圖示產生器

小小圖示，留下長久印象。

將圖片轉換為網站 favicon、應用程式圖示和可直接使用的圖示包。

PNG ICO PWA

製作你的圖示包

將圖片轉換為 favicon、應用程式圖示等。

  1. 1上傳
  2. 2調整
  3. 3下載
等待選擇圖片
將圖片拖放到這裡

PNG、JPG 或 SVG · 最大 5 MB

圖片在瀏覽器內處理，不會離開你的裝置。

16 × 16
32 × 32
48 × 48
180 × 180
192 × 192
512 × 512

調整你的圖示

微調外觀，適配每個螢幕。

6%
0%

查看實際使用效果(上傳後預覽圖示)

瀏覽器標籤

×
https://example.com

iOS主畫面

你的圖示將顯示在這裡

PWA / Android

你的圖示將顯示在這裡

三步製作 favicon

從一張圖片，到一整套圖示。

1選擇你的圖片

選擇清晰的標誌或簡潔圖形，方形圖片效果更好。

2調整並預覽

調整適配方式、背景與留白，檢查小尺寸下的清晰度。

3下載並新增到網站

匯出圖示包，將檔案放入網站，並把圖示連結加入 HTML。

一個標誌，適配每個螢幕

瞭解生成檔案的實際使用場景。

網站 favicon

我的網站×
16 × 16 網站 favicon 範例16 × 16
32 × 32 瀏覽器標籤圖示範例32 × 32

16 × 16 和 32 × 32 圖示，讓使用者在標籤頁和書籤中認出你的網站。

iPhone 與 iPad

我的網站
iPhone 與 iPad · 180 × 180180 × 180

網站新增到主畫面時，使用 180 × 180 的 apple-touch 圖示。

PWA 與 Android

安裝應用程式
PWA 與 Android · 192 × 192192 × 192
PWA 與 Android · 512 × 512512 × 512

192 × 192 和 512 × 512 是網頁應用程式資訊清單常用的圖示尺寸。

圖示包包含什麼？

適用於各個平台的完整圖示包。

  • favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
  • apple-touch-icon.png180 × 180
  • icon-192.png192 × 192
  • icon-512.png512 × 512
  • site.webmanifest網頁應用程式資訊清單

將圖示新增到網站

將這些連結放到 HTML 的 <head> 中。

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

常見問題

什麼是 favicon？

在瀏覽器標籤頁和書籤中代表你的網站的小圖片。

應該使用什麼圖片格式？

透明標誌推薦使用 PNG，也支援 JPG、WebP 和安全的 SVG。

可以使用非方形圖片嗎？

可以。選擇「符合」、「裁切」或「伸展」，產生正方形圖示。

為什麼需要多個圖示尺寸？

瀏覽器和主畫面使用不同尺寸，小圖示適合分頁，大圖示適合應用程式捷徑。