跳至內容
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 preview

16x16

favicon-16x16.png

32x32 preview

32x32

favicon-32x32.png

favicon.ico preview

ICO Multi-size

favicon.ico

180x180 preview

180x180 (Apple)

apple-touch-icon.png

192x192 preview

192x192 (Android)

android-chrome-192x192.png

512x512 preview

512x512 (Android)

android-chrome-512x512.png

Favicon 產生器

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

常見用途

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

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

這個工具的相關文章

最新文章

使用案例
2026-08-07

curl 選項速查|-X、-H、-d 實際做了什麼與常見陷阱

整理實務上會遇到的 curl 選項:為什麼加了 -d 就已經是 POST、-d 與 --data-raw 的差別、開頭的 @ 會悄悄讀取檔案的陷阱、單引號與雙引號的取捨,以及為什麼 -k 和 -L 值得多想一下。

工具介紹
2026-08-06

JSON Schema 與 Zod 雙向轉換的原理|required 與 .optional() 的對應

解析雙向轉換器的實作:把 JSON Schema 轉成 Zod 結構定義,也把 Zod 程式碼轉回 JSON Schema。內容涵蓋 required 與 .optional() 預設值相反的陷阱、限制條件對照表,以及不執行程式碼就完成剖析的做法。

使用案例
2026-08-06

SQL 子句執行順序參考|為什麼 WHERE 看不到 SELECT 的別名

SQL 並不是照您撰寫的順序執行。以邏輯執行順序(FROM → WHERE → GROUP BY → HAVING → SELECT → ORDER BY → LIMIT)為主軸,說明別名為何在 WHERE 無法使用、WHERE 與 HAVING 的分工、ONLY_FULL_GROUP_BY、COUNT(*) 與 COUNT(欄位) 的差異,以及 LEFT JOIN 搭配 WHERE 的陷阱。

使用案例
2026-08-06

unified diff 格式閱讀指南|看懂 git diff 的 @@ 標頭

說明如何閱讀 git 產生的 unified diff 格式:@@ -12,7 +12,9 @@ 四個數字的意義、只改一個字元為何顯示成整行替換、空白與換行字元的陷阱、\ No newline at end of file、合併提交的 @@@ 組合式 diff,以及以 similarity index 推斷檔案更名。

使用案例
2026-08-06

UTC⇄JST 換算參考手冊|9小時時差對照表與時區踩雷指南

以對照表整理 UTC 與日本時間(JST)的換算,並說明與台灣時間(UTC+8)相差 1 小時的關係。內容涵蓋 ISO 8601 的 Z 與 +09:00、JavaScript 日期解析悄悄位移 9 小時的條件、MySQL/PostgreSQL 的時區行為,以及 GitHub Actions cron 一律以 UTC 執行的陷阱。

使用案例
2026-08-04

CREATE TABLE 參考手冊|MySQL、PostgreSQL、SQLite 的型別與約束差異

以跨資料庫對照表整理 CREATE TABLE(DDL)的寫法:型別對應表、自動編號(AUTO_INCREMENT / IDENTITY / rowid)的方言差異、外鍵的 ON DELETE 行為,以及 MySQL 會靜默忽略的 CHECK 約束。

廣告

廣告