跳至內容
DevToolKits.app
DevToolKits

Favicon 產生器

為現代網站產生 Favicon (ICO, PNG)。一次建立所有必要尺寸 (16x16 至 512x512)。

指南: 使用方式與特色

  • 上傳或拖放一張標誌圖片（建議使用正方形圖片）。
  • 即時預覽不同尺寸下的圖示外觀。
  • 點擊「Download ZIP」即可一次取得所有圖示及對應的 HTML 代碼片段。

範例: 輸入與輸出範例

從 512x512 標誌產生的範例

輸入範例

輸入：logo-512x512.png

輸出範例

產生結果：
- favicon.ico (16,32,48)
- apple-touch-icon.png (180x180)
- icon-192.png, icon-512.png

FAQ: 常見問題

  • favicon.ico 檔案裡面包含什麼？

    它將 16x16, 32x32, 48x48 三種尺寸封裝在單一檔案中，以達到最佳的瀏覽器相容性。

  • 可以上傳高解析度的圖片嗎？

    可以。縮放處理是在瀏覽器完成的，即使是幾 MB 的大型圖片也能高效處理。

  • 如何使用 ZIP 裡的檔案？

    將圖示放在您的 public 目錄下，並將附帶的 HTML 代碼片段貼到網頁的 <head> 區段。

使用情境: 常見的使用情境

  • 啟動新專案

    僅需一個標誌，即可一次產生適用於 iOS, Android 及桌上型瀏覽器的完整圖示組合。

  • 更新現有網站圖示

    無需安裝工具，即可根據現代瀏覽器規範重新產生安全且相容的 .ico 與 .png 資源。

  • 原型製作與模擬

    快速準備包含 HTML 代碼的圖示組合，讓開發初期的預覽更貼近真實視覺效果。

注意: 注意事項與限制

  • 圖片比例注意

    若上傳非正方形的圖片，可能會為了符合尺寸而被裁剪或拉伸。

  • 瀏覽器快取

    瀏覽器通常會長時間快取 favicon。若更新後未見效，請嘗試清除快取或使用無痕模式查看。

拖放或點擊上傳

PNG, JPG, SVG, WebP

16x16

favicon-16x16.png

32x32

favicon-32x32.png

ICO Multi-size

favicon.ico

180x180 (Apple)

apple-touch-icon.png

192x192 (Android)

android-chrome-192x192.png

512x512 (Android)

android-chrome-512x512.png

Favicon 產生器

從基礎圖片產生 favicon.ico 與常見 PNG icon 尺寸，用於瀏覽器分頁、書籤、手機主畫面與網站 metadata。

常見用途

  • 新網站上線：從 logo 建立基本 icon assets。
  • 品牌更新：重新設計後重新產生 favicon。
  • 準備手機捷徑：建立 home screen 與瀏覽器圖示。

小尺寸 icon 容易失去細節。請使用簡單、置中且有足夠留白的圖形。

透過站內捷徑快速切換常用工具。

文章
1
文章列表
AI・LLM
3
AI Rules 產生器 LLM Token 計算器 LLM API 費用計算機
開發與 DevOps
8
GitHub Actions 可視化 SQL 格式化 視覺化 SQL 構建器 SQL → ER 圖轉換 Curl 轉換器 Chmod 計算機 Cron 編輯器與解析器 基礎架構架構圖生成器
資料轉換與 Schema
6
JSON 格式化 JSON → TypeScript JSON → Zod JSON → OpenAPI JSON ⇔ YAML 轉換 CSV ⇔ JSON 轉換
安全與加密
5
Base64 / 58 / 32 JWT 工具 雜湊與 HMAC 產生器 JWKS 產生器 UUID 產生器
文字與程式碼輔助
5
Markdown 表格產生器 文本＆程式碼工具 正則表達式測試器 Diff 檢視器 大小寫命名轉換器
URL、QR 與網路
5
URL 編碼 / 解碼 IP / CIDR 計算機 URL 參數 → JSON QR 生成器 QR 讀取器
設計與 UI
2
顏色工具 Favicon 產生器
日期與時間
3
時區轉換工具 時間單位換算 UNIX 時間戳轉換