Favicon 與 Electron/Tauri：為您的桌面 Web 應用程式打造品牌

所以您已經建立了一個 Web 應用程式，現在想把它打包成桌面應用程式。您啟動 Electron 或 Tauri，執行建置指令，然後... 一個通用的預設圖示就這樣盯著您看。這不是您想要的專業外觀。

問題是：桌面應用程式圖示的運作方式與 Web favicon 完全不同。那個放在 public 資料夾裡的小小 32x32 PNG？它不夠用。桌面應用程式需要多種格式、特定尺寸和平台專屬檔案，這是大多數 Web 開發者從未想過的。

為什麼您的 Favicon 不夠用

當您的 Web 應用程式在瀏覽器中執行時，favicon 會出現在分頁中。很簡單。但當您把同一個應用程式包裝在 Electron 或 Tauri 中，突然您需要的圖示用於：

應用程式視窗標題列
Dock（macOS）或工作列（Windows）
安裝程式和設定精靈
「新增/移除程式」清單
檔案關聯
Spotlight 搜尋和 Finder 預覽

這些情境中的每一個都預期不同的尺寸，有時甚至是完全不同的格式。這就是為什麼單一的 favicon 檔案會讓您的桌面應用程式看起來不完整。

您實際需要的三種格式

ICO 用於 Windows

Windows 使用 ICO 格式，它實際上是一個容器，在一個檔案中包含多種尺寸。您的 ico 檔案應該包含 16、24、32、48、64 和 256 像素的層。256px 的層特別重要，因為 Windows 在高 DPI 顯示器和大圖示檢視中使用它。

常見的錯誤是產生只有 32px 層的 ico。這在工作列上有效，但您的應用程式在開始選單和檔案總管中會看起來模糊。

ICNS 用於 macOS

Apple 的 ICNS 格式在概念上類似於 ICO——它將多種尺寸捆綁在一起。但尺寸要求更嚴格。您需要 16x16、32x32、128x128、256x256 和 512x512，並且需要 1x 和 2x 版本以支援 Retina 顯示器。

macOS 上的 iconutil 指令可以將特殊結構的 PNG 資料夾轉換為 icns 檔案，但老實說，自動化工具更容易。

PNG 用於 Linux

Linux 桌面環境更靈活。大多數會接受標準尺寸（128、256、512）的 PNG 檔案集合。有些 electron-builder 和 Tauri 配置只需指向單一高解析度 PNG，讓系統處理縮放。

配置 Electron

如果您使用 electron-builder（大多數 Electron 專案都用它），圖示配置放在您的 package.json 或 electron-builder.yml 中：

{
  "build": {
    "appId": "com.yourapp.id",
    "icon": "build/icon",
    "mac": {
      "icon": "build/icon.icns"
    },
    "win": {
      "icon": "build/icon.ico"
    },
    "linux": {
      "icon": "build"
    }
  }
}

electron-builder 在 buildResources 目錄中尋找圖示檔案（預設為 build）。將您的 icon.icns、icon.ico 和一組 PNG 檔案放在那裡，就完成了。

對於 Electron Forge，過程類似但使用不同的配置格式。forge.config.js 檔案處理每個平台的圖示路徑。

配置 Tauri

Tauri 採用稍微不同的方法。tauri icon 指令從單一原始圖片產生所有需要的格式：

npm run tauri icon ./app-icon.png

這會建立整個圖示資料夾，包含所有平台正確格式化的檔案。輸出預設放在 src-tauri/icons/。

您的 tauri.conf.json 在 bundle 區段中參考這些圖示：

{
  "bundle": {
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

Tauri 2.0 簡化了這個配置——bundle 鍵現在在頂層而不是嵌套在 tauri 下。

您的 Web Favicon 仍然重要

有一件事會讓人困惑：即使設定了桌面圖示，您的 Web favicon 仍然在應用程式內部使用。當您的 Electron 或 Tauri 應用程式載入 Web 內容時，webview 仍然像瀏覽器一樣請求 favicon.ico。

這意味著您需要兩者：

桌面應用程式圖示（icns、ico、png）用於作業系統層級的 UI
Web favicon 用於內部 webview 內容

如果您跳過 Web favicon，某些內部瀏覽器 chrome 或 devtools 可能會顯示破損的圖示。這是小問題，但很容易修復。

從單一來源產生圖示

沒有人想手動建立 15 個以上的圖示變體。以下是實際有效的工具：

用於 Electron：

electron-icon-builder - 給它一個 1024x1024 的 PNG，它會輸出您需要的一切
electron-icon-maker - 類似功能，npm 套件

用於 Tauri：

內建的 tauri icon 指令 - 如果您已經在使用 Tauri CLI，這是最簡單的選項

通用：

Real Favicon Generator - 基於 Web，處理 Web favicon 和桌面圖示
IconVectors - 將單一 SVG 轉換為 ICO、ICNS 和 PNG 集合

關鍵是從至少 1024x1024 像素的原始圖片開始。SVG 更好，因為它完美縮放。

設計考量

桌面圖示存在於與 Web favicon 不同的情境中。要記住以下幾點：

簡單縮小效果好。 您的 512px 圖示可能看起來很棒，但檢查它在 16px 下如何呈現。複雜的細節會變成模糊的斑點。

在實際背景上測試。 macOS dock 圖示放在半透明背景上。Windows 工作列圖示可能在淺色或深色主題上。確保您的圖示在兩種情況下都有足夠的對比度。

尊重平台慣例。 macOS 圖示通常有微妙的陰影和圓角。Windows 圖示傾向更扁平。您不必完全遵循這些，但了解它們有助於讓您的應用程式感覺更原生。

考慮可遮罩變體。 某些情境（特別是如果您也做行動端的 Android）會將您的圖示裁剪成圓形或圓角方形。設計時要考慮安全區域。

常見問題與修復

重建後圖示沒有更新？ Electron 和 Tauri 在開發期間都會積極快取圖示。嘗試完全清除建置輸出目錄並重建。

Windows 上圖示模糊？ 您的 ico 檔案缺少 256px 層。用包含所有需要尺寸的工具重新產生。

macOS 顯示通用圖示？ icns 檔案可能格式錯誤或位置不對。執行 iconutil -c icns YourIcon.iconset -o icon.icns 從頭重新產生。

Linux 圖示沒有在 dock 中顯示？ 某些桌面環境需要透過 .desktop 檔案註冊圖示。檢查您的 electron-builder 或 Tauri 配置中的 Linux 專屬設定。

整合在一起

正確配置的跨平台桌面應用程式圖示設定看起來像這樣：

build/
├── icon.icns          # macOS 應用程式圖示
├── icon.ico           # Windows 應用程式圖示
├── icon.png           # 512px 用於 Linux
├── 256x256.png        # 額外的 Linux 尺寸
└── 128x128.png

加上您的常規 Web favicon 在 public 或 static 目錄中用於 webview 內容。

額外的努力是值得的。精緻的圖示向使用者表明您的應用程式是完整且專業的——不只是包裝在殼裡的網頁。這是人們看到的第一件事，第一印象很重要。

參考資料

Electron Forge Icon Guide - 為 Electron 應用程式建立和添加圖示的官方文件
electron-builder Icons - electron-builder 圖示設定的配置參考
Tauri App Icons - Tauri 2.0 圖示產生和配置的文件
Apple Icon Image Format - ICNS 格式規格的維基百科參考
Define Your App Icons - MDN - Mozilla 的 PWA 應用程式圖示要求指南