⭐ Favicon 產生器

使用步驟

1. 選一張圖 正方形、圖形越簡單越好。favicon 最小只有 16 × 16 像素 — 那大概就是一個字母或一個簡單符號的大小，複雜的 logo 縮到那麼小只會變成一團色塊。
2. 決定背景 預設不透明並填底色。原因是深色模式的分頁列是深色的，透明背景的深色圖示在上面會幾乎看不見。真的需要透明才勾「保留透明背景」。
3. 調留白與圓角 留白 8% 左右通常剛好 — 圖形不會頂到邊。圓角在 macOS 的 Safari 分頁與手機主畫面上比較好看，做 App 風格的圖示可以拉到 20–25%。
4. 按開始處理 會一次產出 7 個檔案：一個 favicon.ico（裡面包含 16、32、48 三種尺寸）加上 6 個各平台需要的 PNG。
5. 放到網站根目錄，貼上 HTML 把全部檔案放到網站的根目錄，再把下面產生的 HTML 貼進 <head>。favicon.ico 放在根目錄這件事本身就有用 — 瀏覽器就算沒看到 HTML 也會自己去那裡找。

什麼時候用得到

你會拿到什麼

• favicon.ico — 一個檔案裡包含 16、32、48 三種尺寸，放在網站根目錄。
• favicon-16x16.png / 32x32 / 48x48 — 現代瀏覽器優先使用的分頁圖示。
• apple-touch-icon.png（180px）— iPhone、iPad 加到主畫面時的圖示。
• android-chrome-192x192.png / 512x512 — Android 主畫面與 PWA 安裝畫面。

設計上唯一重要的事

在 16 像素下還認得出來。這是 favicon 唯一真正的設計限制，而且比想像中嚴格得多。16 × 16 大約就是一個字的大小 — 完整的 logo、公司全名、細線條、漸層，在這個尺寸下全部會消失成一團模糊。

實務上有效的做法是：取 logo 裡最有辨識度的單一元素。可能是第一個字母、一個圖形符號、一個獨特的形狀。看看你熟悉的網站就知道 — 幾乎沒有人在 favicon 裡放完整 logo。

產生之後直接打開 favicon-16x16.png 看一眼，如果你自己都認不出來，訪客更不會認得。

常見問題

接下來可能會用到

圖片處理很少一步到位。這幾個是跟「Favicon 產生器」最常搭著用的：

• 🧬 SVG 轉 PNG — 向量轉點陣，尺寸自己指定
• 📐 調整大小 — 依寬度、比例或指定尺寸
• ⚡ PNG 轉 WebP — 檔案再小三成以上

處理完想直接分享？上傳媒體可以把圖片、照片或影片轉成一組短網址，還能設密碼、有效期限與瀏覽次數上限。也可以回到工具總覽看全部 12 個工具。