如何為 Nuxt 3 專案加入 Favicon：完整實作指南

Favicon 是專業網頁應用程式不可或缺的元素——它們出現在瀏覽器分頁、書籤和手機主畫面中，強化您的品牌識別。雖然在 Nuxt 3 中加入基本 favicon 很簡單，但要實作一個能在所有裝置和情境下運作的完整 favicon 系統，需要更多規劃。

這份指南涵蓋從基礎實作到進階功能（如動態 favicon 切換和 PWA 最佳化）的所有內容。無論您是建立簡單的網站還是複雜的應用程式，都能找到適合您 Nuxt 3 專案的方法。

快速開始：基本 Favicon 設定

想要立即開始的話，這是最基本的設定：

將 favicon.ico 加入您的 public/ 目錄

在 nuxt.config.ts 中加入一行：

export default defineNuxtConfig({
  app: {
    head: {
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
    }
  }
})

就這樣！您的 favicon 現在會出現在瀏覽器分頁中。如需正式環境的完整多裝置支援，請繼續閱讀。

步驟 1：準備專業的 Favicon 素材

現代網頁應用程式需要多種 favicon 格式和尺寸，才能在所有裝置和平台上提供最佳體驗。

必要的 Favicon 尺寸（優先順序）

尺寸	格式	用途	優先級
favicon.ico	ICO	瀏覽器分頁、書籤	關鍵
32x32	PNG	高解析度瀏覽器分頁	關鍵
180x180	PNG	iOS 主畫面	重要
192x192	PNG	Android 主畫面	重要
512x512	PNG	PWA 應用程式圖示	重要
16x16	PNG	小型瀏覽器顯示	次要

快速 Favicon 產生

推薦工具：

RealFaviconGenerator - 最完整
Favicon.io - 簡單快速
Favicon.im - 用於測試現有 favicon

輸入要求： 上傳正方形圖片（最小 260x260px，理想為 512x512px），PNG 格式。

步驟 2：在 Public 目錄中整理檔案

在 Nuxt 3 中，靜態資源放在 public 目錄中。這是推薦的檔案結構：

your-nuxt3-project/
├── public/
│   ├── favicon.ico
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── apple-touch-icon.png
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   └── site.webmanifest
├── nuxt.config.ts
└── ...

步驟 3：設定 Nuxt.config.ts

Nuxt 3 使用 app.head 配置來管理 HTML head 元素，包括 favicon。

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  }
})

步驟 4：完整的多裝置配置

要獲得完整的裝置支援，請使用這個進階配置：

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        // 基本 favicon
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },

        // 標準尺寸
        { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },

        // Apple 裝置
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },

        // Android 裝置
        { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/android-chrome-192x192.png' },
        { rel: 'icon', type: 'image/png', sizes: '512x512', href: '/android-chrome-512x512.png' },

        // Web App Manifest
        { rel: 'manifest', href: '/site.webmanifest' }
      ],
      meta: [
        // 行動瀏覽器的主題顏色
        { name: 'theme-color', content: '#000000' },
        { name: 'msapplication-TileColor', content: '#000000' }
      ]
    }
  }
})

步驟 5：Web App Manifest 配置

在您的 public 目錄中建立 site.webmanifest 檔案以支援 PWA：

{
  "name": "Your App Name",
  "short_name": "AppName",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone"
}

進階：使用 useHead 的動態 Favicon

Nuxt 3 的 useHead composable 讓您可以根據應用程式狀態動態改變 favicon——非常適合主題切換、通知或使用者偏好設定。

<template>
  <div>
    <button @click="toggleTheme">切換主題</button>
  </div>
</template>

<script setup>
const isDark = ref(false)

const toggleTheme = () => {
  isDark.value = !isDark.value
  updateFavicon()
}

const updateFavicon = () => {
  useHead({
    link: [
      {
        rel: 'icon',
        type: 'image/png',
        href: isDark.value ? '/favicon-dark.png' : '/favicon-light.png'
      }
    ]
  })
}

// 設定初始 favicon
onMounted(() => {
  updateFavicon()
})
</script>

步驟 7：使用 Nuxt 模組自動管理 Favicon

對於進階專案，考慮使用像 @nuxtjs/pwa 這樣的 Nuxt 模組來自動處理 favicon：

npm install @nuxtjs/pwa

export default defineNuxtConfig({
  modules: ['@nuxtjs/pwa'],
  pwa: {
    icon: {
      source: 'static/icon.png', // 您的原始圖示
      fileName: 'icon.png'
    },
    manifest: {
      name: 'My Nuxt App',
      short_name: 'NuxtApp',
      theme_color: '#000000'
    }
  }
})

步驟 8：伺服器端 Favicon 最佳化

為了更好的效能，考慮在 nuxt.config.ts 中最佳化 favicon 傳送：

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/favicon.ico': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      },
      '/**/*.png': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      }
    }
  }
})

步驟 9：驗證與測試

開發測試

執行您的 Nuxt 3 專案：npm run dev
檢查 favicon 是否出現在瀏覽器分頁中
在不同裝置和瀏覽器上測試

線上驗證工具

Favicon.im - 檢查 favicon 是否正確載入
RealFaviconGenerator Checker - 完整的 favicon 測試
Google PageSpeed Insights - 驗證 favicon 不影響效能

手動測試檢查清單

[ ] 桌面瀏覽器分頁顯示 favicon
[ ] 行動瀏覽器顯示 favicon
[ ] iOS「加入主畫面」顯示正確圖示
[ ] Android「加入主畫面」顯示正確圖示
[ ] 書籤顯示 favicon
[ ] 深色/淺色模式變化正常（如果有實作）

常見問題排解

Favicon 修改後未更新

症狀： 更新檔案後仍顯示舊的 favicon

解決方案：

使用版本控制強制更新快取：

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', href: `/favicon.ico?v=${new Date().getFullYear()}${new Date().getMonth()}` }
      ]
    }
  }
})

清除瀏覽器快取或在無痕模式中測試
強制重新整理 Ctrl+F5（Windows）或 Cmd+Shift+R（Mac）

正式環境中 Favicon 遺失

常見原因：

建置過程未複製 public 檔案
CDN/主機服務商配置問題
檔案路徑不正確

除錯步驟：

驗證建置輸出：
```
npm run build
npm run preview
```
檢查檔案是否存在 於建置後的 .output/public/ 目錄中

暫時使用絕對 URL 測試：

{ rel: 'icon', href: 'https://yourdomain.com/favicon.ico' }

行動裝置顯示錯誤圖示

問題： 行動裝置上圖示模糊或不正確

解決方案： 確保存在適當的行動裝置專用圖示：

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/android-chrome-192x192.png' }
      ]
    }
  }
})

Console 出現 404 錯誤找不到圖示

問題： 瀏覽器請求不存在的 favicon 檔案

預防方式： 只參考您實際建立的檔案：

// 如果檔案不存在，不要這樣做
{ rel: 'icon', sizes: '16x16', href: '/favicon-16x16.png' }

// 只包含存在的檔案
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }

進階：自動化 Favicon 產生

對於較大的專案，使用自訂腳本自動產生 favicon：

// scripts/generate-favicons.js
import sharp from 'sharp'
import fs from 'fs'

const sizes = [16, 32, 180, 192, 512]
const inputFile = 'assets/logo.png'

sizes.forEach(size => {
  sharp(inputFile)
    .resize(size, size)
    .png()
    .toFile(`public/favicon-${size}x${size}.png`)
    .then(() => console.log(`已產生 ${size}x${size} favicon`))
})

執行方式：node scripts/generate-favicons.js

效能考量

檔案大小最佳化

favicon.ico 盡量保持在 1KB 以下
PNG 格式用於較大尺寸（更好的壓縮）
考慮使用 SVG 處理簡單的標誌（最小檔案大小）

載入效能

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        // 預載關鍵的 favicon
        { rel: 'preload', href: '/favicon-32x32.png', as: 'image' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' }
      ]
    }
  }
})

額外提示：快速產生 Logo

如果您需要從頭建立 favicon：

Logo.surf - AI 驅動的 logo 產生器
Favicon.io - 從文字或 emoji 產生
Canva - 設計自訂圖示

總結與最佳實務

在 Nuxt 3 應用程式中實作 favicon 需要在簡單性和完整裝置支援之間取得平衡。以下是您應該優先考慮的事項：

實作優先順序

從基礎開始 - favicon.ico + 基本 PNG 尺寸
加入行動裝置支援 - iOS 和 Android 主畫面圖示
為 PWA 最佳化 - 192x192 和 512x512 PNG 圖示
考慮進階功能 - 動態切換、通知

正式環境檢查清單

部署您的 Nuxt 3 應用程式之前：

[ ] 所有 favicon 檔案都存在於 public/ 目錄中
[ ] nuxt.config.ts 只參考存在的檔案
[ ] 在多個瀏覽器中測試 favicon 顯示
[ ] 驗證行動裝置「加入主畫面」功能
[ ] 檢查 PWA 圖示顯示（如適用）
[ ] 測試動態 favicon 切換（如果有實作）
[ ] 使用 Favicon.im 或類似工具驗證

效能提示

保持檔案小 - ICO 檔案低於 1KB，PNG 低於 10KB
使用適當格式 - ICO 提供基本支援，PNG 提供品質
啟用快取 - 配置適當的 HTTP 快取標頭
預載關鍵圖示 - 用於即時主題切換

進一步最佳化

考慮這些正式環境應用程式的進階最佳化：

實作自適應 favicon 支援淺色/深色主題
加入通知徽章 使用 canvas 操作
建立動畫 favicon 用於特殊活動
最佳化 Core Web Vitals 使用適當的快取策略

遵循這份指南，您的 Nuxt 3 應用程式將擁有專業的 favicon 系統，能在所有裝置和使用情境下順暢運作。