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

PNG轉ICO轉換器

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

將PNG轉換為包含多種尺寸的ICO。保留透明度、檢查小尺寸預覽，並在本機下載實際圖示檔。

PNG ICO PWA

製作你的圖示包

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

1上傳
2調整
3下載

等待選擇圖片

將圖片拖放到這裡

PNG · 最大5 MB

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

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

調整你的圖示

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

圖片縮放方式

背景

透明

純色

#FFFFFF

留白6%

圓角0%

ICO 尺寸（可多選）

256

自適應圖示

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

瀏覽器標籤

https://example.com

iOS主畫面

你的圖示將顯示在這裡

PWA / Android

你的圖示將顯示在這裡

三步製作 favicon

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

1選擇你的圖片

將PNG轉換為包含多種尺寸的ICO。保留透明度、檢查小尺寸預覽，並在本機下載實際圖示檔。

2調整並預覽

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

3下載並新增到網站

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

一個標誌，適配每個螢幕

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

網站 favicon

我的網站×

16 × 16

32 × 32

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

iPhone 與 iPad

我的網站

180 × 180

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

PWA 與 Android

安裝應用程式

192 × 192

512 × 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">

將圖示包解壓至 Nuxt 專案根目錄的 public/。保留檔名，讓 site.webmanifest 與 favicon.ico 放在一起，不要放入 app/。
將程式碼加入 app/app.vue 的 script setup 區塊。替換指向舊檔案的圖示連結，再重新建置並發佈專案。

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

在你的網站開啟 /favicon.ico、/apple-touch-icon.png 和 /site.webmanifest。確認回應成功且實際內容為圖片或 JSON；包含 HTML 錯誤頁的 200 回應仍是錯誤路徑。也要檢查 manifest 內每個圖示網址。

若仍顯示舊圖示，檢查頁面 head 有無重複連結，在瀏覽器開發者工具停用快取並重新載入。若使用 CDN 或 service worker，也檢查其快取。對照實際 16 與 32 像素預覽，簡化微小文字和細線，不只看大圖。

這些檔案提供圖示和 manifest 中繼資料，本身不會讓網站成為可安裝的 PWA。本例以網域根目錄部署；子目錄部署需調整所有連結及 manifest 圖示路徑。

Nuxt 4 · public/ · Nuxt 4 · useHead