Nuxt.js Favicon Complete Guide

Master favicon setup in Nuxt: nuxt.config configuration, static folder, useHead composable, and PWA module for Vue.js applications.

Nuxt Favicon Setup

1. Public Folder

public/ directory

2. nuxt.config

Configure head meta

3. PWA Module

Optional enhancement

Step 1: File Structure

Nuxt 3 Directory Layout

my-nuxt-app/
  public/                   ? Place favicons here
    favicon.ico
    favicon-16x16.png
    favicon-32x32.png
    apple-touch-icon.png
    android-chrome-192x192.png
    android-chrome-512x512.png
    site.webmanifest
  components/
  pages/
  nuxt.config.ts
  package.json

Note: In Nuxt 3, files in public/ are served at root. In Nuxt 2, use static/ folder instead.

Step 2: nuxt.config Configuration

nuxt.config.ts / nuxt.config.js

Nuxt 3 Configuration (TypeScript)

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' }
      ],
      meta: [
        { name: 'theme-color', content: '#00DC82' }
      ]
    }
  }
})

Nuxt 2 Configuration

export default {
  head: {
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
      { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
      { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
      { rel: 'manifest', href: '/site.webmanifest' }
    ],
    meta: [
      { name: 'theme-color', content: '#00DC82' }
    ]
  }
}

Per-Page Favicon (useHead)

Dynamic Favicon in Components/Pages

Nuxt 3 useHead Composable

<script setup>
useHead({
  link: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      href: '/custom-favicon.ico'
    }
  ]
})
</script>

<template>
  <div>
    <h1>Page with Custom Favicon</h1>
  </div>
</template>

Nuxt 2 head() Function

<script>
export default {
  head() {
    return {
      link: [
        {
          rel: 'icon',
          type: 'image/x-icon',
          href: '/custom-favicon.ico'
        }
      ]
    }
  }
}
</script>

PWA Module (Recommended)

@nuxtjs/pwa or @vite-pwa/nuxt

Install PWA Module

# Nuxt 3 (recommended)
npm install -D @vite-pwa/nuxt

# Nuxt 2
npm install @nuxtjs/pwa

Nuxt 3 PWA Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  
  pwa: {
    manifest: {
      name: 'My Nuxt App',
      short_name: 'Nuxt App',
      theme_color: '#00DC82',
      background_color: '#ffffff',
      display: 'standalone',
      icons: [
        {
          src: '/android-chrome-192x192.png',
          sizes: '192x192',
          type: 'image/png'
        },
        {
          src: '/android-chrome-512x512.png',
          sizes: '512x512',
          type: 'image/png'
        },
        {
          src: '/android-chrome-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'maskable'
        }
      ]
    },
    workbox: {
      navigateFallback: '/',
    },
    devOptions: {
      enabled: true,
      type: 'module'
    }
  }
})

Nuxt 2 PWA Configuration

// nuxt.config.js
export default {
  modules: ['@nuxtjs/pwa'],
  
  pwa: {
    icon: {
      source: 'static/icon.png',  // High-res source
      fileName: 'icon.png'
    },
    manifest: {
      name: 'My Nuxt App',
      short_name: 'Nuxt App',
      theme_color: '#00DC82',
      lang: 'en',
      display: 'standalone'
    },
    meta: {
      theme_color: '#00DC82'
    }
  }
}

Build & Deploy

Production Build

Build Commands

# Nuxt 3
npm run build
npm run preview  # Test production build

# Nuxt 2
npm run generate  # Static site
npm run build     # SSR

Deployment Platforms

Vercel: Auto-detects Nuxt, zero config
Netlify: Set build command: npm run generate
Cloudflare Pages: Build: npm run build, Output: .output/public
AWS Amplify: Supports Nuxt SSR/SSG

Nuxt Favicon Best Practices

? Best Practices

Use public/ (Nuxt 3) or static/ (Nuxt 2)
Configure in nuxt.config.ts
Install PWA module for full support
Use useHead for dynamic favicons
Test SSR and static builds
Provide high-res icons for PWA
Test manifest generation
Verify paths in production build

? Common Mistakes

Using wrong folder (not public/ or static/)
Forgetting to configure in nuxt.config
Not testing PWA manifest
Missing theme-color meta tag
Not clearing .nuxt cache
Wrong paths in SSR mode
Not testing production build
Missing favicon in app.html

Generate Nuxt-Ready Favicons

Create optimized favicon packages for Nuxt.js applications

Generate Favicons

Vue.js

Vue framework

PWA

Progressive Web App

Vite

Build tool