跳至內容
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 容易失去細節。請使用簡單、置中且有足夠留白的圖形。

這個工具的相關文章

Recent Articles

使用案例
2026-08-04

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

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

工具介紹
2026-08-03

從資料表設計自動產生 CREATE TABLE 語句的原理|DDL 產生器

解析 DDL 產生器的實作:以視覺化方式設計資料表並產生 CREATE TABLE 語句與 ER 圖。內容涵蓋 MySQL/PostgreSQL/SQLite 的型別轉換規則,以及從 JSON 範例推論欄位的演算法。

使用案例
2026-07-21

GitHub Actions needs 設計模式集|加速 CI 的依賴關係組織法與反模式

以模式與反模式對照表整理 GitHub Actions 中 needs 所建立的 job 依賴關係。涵蓋 concurrency 取消重複執行、fail-fast 取捨、matrix 與 needs 組合的陷阱,以及可重複使用工作流程,並附上可直接複製的 YAML 範例。

使用案例
2026-07-21

Mermaid ER 圖語法完全參考|關聯符號與實戰範例

完整整理 Mermaid erDiagram 語法:烏鴉腳表示法的基數對照表、一對多與多對多的差異、含 PK/FK 的屬性定義,以及一個完整的電商範例。

工具介紹
2026-07-21

如何用 SQL 建構器以視覺化方式組出 SELECT、JOIN 查詢

說明如何在瀏覽器中用視覺化 SQL 建構器組合 SELECT、WHERE、JOIN。涵蓋數值自動加引號的判斷原理、JOIN 使用時機對照表,以及多資料表 JOIN 的寫法。

使用案例
2026-07-21

SQL JOIN 完全參考|INNER、LEFT、RIGHT、FULL 的差異與結果列數觀念

以對照表與結果列數範例,完整整理 SQL 的 JOIN 種類(INNER/LEFT/RIGHT/FULL/CROSS/SELF)。說明一對多 JOIN 為何會使列數增加、WHERE 子句與 ON 子句在 NULL 判斷上的陷阱,以及多資料表 JOIN 的寫法。

廣告

廣告