跳至主內容

Favicon 產生器

上傳圖片產生各種尺寸 favicon 的工具。

💡 什麼是Favicon？

顯示在網站瀏覽器標籤或書籤中的小圖示。

📋 產生尺寸

  • 16x16, 32x32 - 預設瀏覽器Favicon
  • 180x180 - Apple Touch Icon (iOS)
  • 192x192, 512x512 - Android/PWA

🎨 建議

  • 使用正方形圖片 (1:1比例)
  • 簡單設計 (考慮小尺寸顯示)
  • 高對比度顏色 (提高可讀性)
  • 建議PNG格式 (可透明背景)

📌 HTML使用方法

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

產生的尺寸​

尺寸用途
16x16基本瀏覽器 favicon
32x32標準 favicon
48x48高畫質瀏覽器
64x64Windows 磚
128x128iOS App 圖示
180x180Apple Touch Icon
192x192Android/Chrome
512x512PWA 啟動畫面

HTML 使用方法​

<!-- 基本 favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

<!-- Android/Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

<!-- PWA -->
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">

設計建議​

建議做法​

  • 正方形圖片
  • 簡單的設計
  • 高對比色彩
  • PNG 格式（可透明）

避免事項​

  • 複雜的細節
  • 長文字
  • 低對比色彩
  • 橫向的圖片

應用技巧​

技巧 1：原始圖片​

請使用最小 512x512px 以上的高畫質圖片。

技巧 2：測試​

請在多個瀏覽器中實際測試。

技巧 3：品牌建立​

使用公司標誌或品牌圖示。

檔案結構​

將產生的 favicon 放置在網站根目錄：

/
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── favicon-180x180.png
├── favicon-192x192.png
└── favicon-512x512.png

常見問題​

Q：也會產生 ICO 檔案嗎？​

A：目前僅支援 PNG。ICO 可透過轉換 PNG 來使用。

Q：可以使用透明背景嗎？​

A：因為是 PNG 檔案，所以可以使用透明背景。

Q：需要所有尺寸嗎？​

A：基本上只要有 16x16、32x32、180x180 就足夠了。

相關工具​

隱私權保護​

  • 所有處理都在瀏覽器端完成
  • 您的圖片不會上傳到伺服器
  • 保護您的資料隱私

💬 這個工具對您有幫助嗎？​

歡迎隨時向我們發送您的意見或建議！