# Favicon 產生器

URL: https://tools.otaku-dojo.com/zh-tw/favicon-generator
Updated: 2026-10-04

Favicon 產生器用一張圖片（建議正方形 PNG 或 SVG）一次產生網站需要的所有圖示：內含 16、32、48 像素的 favicon.ico、16 與 32 像素 PNG、180 像素 Apple Touch Icon、192 與 512 像素 Android／PWA 圖示，以及 site.webmanifest，並附上可直接貼到 <head> 的 HTML 標籤。全部在瀏覽器產生，圖片不會上傳。

## 如何使用Favicon 產生器

1. 輸入網站名稱（寫入 site.webmanifest），需要時選擇背景顏色與留白。
2. 把 Logo 圖片拖放到虛線框內，建議使用 512×512 以上的正方形 PNG 或 SVG。
3. 按「全部下載」取得所有檔案，放到網站根目錄。
4. 複製下方的 HTML 標籤，貼到網頁的 <head> 內。

## 規格與重點

- **輸出檔案**: favicon.ico（16/32/48）、16 / 32 PNG、Apple Touch Icon 180、Android 192 / 512、site.webmanifest
- **輸入格式**: PNG、SVG、JPG、WebP（建議 512×512 以上正方形）
- **非正方形圖片**: 置中縮放並保留透明邊
- **選項**: 背景顏色、留白 10%、網站名稱
- **附帶**: 可直接貼上的 <head> HTML 標籤
- **隱私**: 在瀏覽器內產生，圖片不會上傳

## 範例: 產生的檔案與 HTML

```text
logo.png（512×512，透明背景）
```

→

```html
favicon.ico、favicon-16x16.png、favicon-32x32.png、
apple-touch-icon.png、android-chrome-192x192.png、
android-chrome-512x512.png、site.webmanifest

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
```

## 常見問題

### 改了 favicon，瀏覽器還是顯示舊的？

瀏覽器會長時間快取 favicon。可以在檔名或網址加上版本號（例如 /favicon.ico?v=2），或清除快取後重新開啟。

### Google 搜尋結果會顯示我的 favicon 嗎？

會，前提是首頁有 <link rel="icon">、圖示至少 48×48 且 Googlebot 可以抓取。新設定的圖示可能需要幾天才會出現在搜尋結果。

### 為什麼 Apple Touch Icon 是填滿背景色的？

iOS 會把透明區域顯示成黑色，所以 180×180 的 Apple Touch Icon 一律以你選擇的背景色填滿。

### 可以用 SVG 當 favicon 嗎？

現代瀏覽器支援 SVG favicon，但 Safari 與部分舊瀏覽器不支援，建議同時提供本工具產生的 favicon.ico 與 PNG。