Logo

Learn how to replace the default logo with your own branding across the application.

Logo files

The boilerplate includes logo files in the public directory:

public/
├── logo.png          # Main logo (used in header)
├── logo-180px.png    # Smaller version (emails, favicons)
└── favicon.ico       # Browser favicon

Replacing the logo

Step 1: Prepare your logo

Create your logo files with these specifications:

Main logo (logo.png):

• Recommended size: 200x50px (or similar aspect ratio)
• Format: PNG with transparent background
• Color: Provide versions that work on both light and dark backgrounds

Small logo (logo-180px.png):

• Size: 120x120px
• Format: PNG
• Purpose: Used in emails and as app icon

Favicon (favicon.ico):

• Size: 16x16px, 32x32px, 48x48px (multi-size ICO)
• Format: ICO file
• Tool: Use favicon.io to generate

Step 2: Replace files

Simply replace the existing files in the public directory:

1. Copy your logo.png to public/logo.png
2. Copy your logo-180px.png to public/logo-180px.png
3. Copy your favicon.ico to public/favicon.ico

Step 3: Clear cache

After replacing the logo files:

# Clear Nuxt cache
rm -rf .nuxt

# Restart dev server
pnpm dev

Logo component

The logo is rendered by the AppLogo component at app/components/header/AppLogo.vue:

<template>
  <NuxtImg src="/logo.png" alt="Logo" width="120" height="30" class="h-8 w-auto" />
</template>

Customizing the logo component

You can modify this component to:

Use different logos for light/dark mode:

<script setup lang="ts">
const colorMode = useColorMode()

const logoSrc = computed(() => {
  return colorMode.value === 'dark' ? '/logo-dark.png' : '/logo-light.png'
})
</script>

<template>
  <NuxtImg :src="logoSrc" alt="Logo" width="120" height="30" class="h-8 w-auto" />
</template>

Use SVG instead of PNG:

<template>
  <svg class="h-8 w-auto" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
    <!-- Your SVG content -->
    <path d="M..." fill="currentColor" />
  </svg>
</template>

Add animation:

<template>
  <NuxtImg src="/logo.png" alt="Logo" width="120" height="30" class="h-8 w-auto transition-transform hover:scale-105" />
</template>

Logo usage

The logo appears in several places:

Header

The logo in the header is linked to the home page (or dashboard if authenticated):

<template>
  <header>
    <NuxtLink :to="logoTo" class="shrink-0">
      <AppLogo />
    </NuxtLink>
  </header>
</template>

Email templates

Logos in emails use the absolute URL:

const logoUrl = `${config.public.siteUrl}/logo-180px.png`

const html = `
  <img src="${logoUrl}" alt="Logo" style="max-width: 120px;">
`

Favicon

The favicon is automatically loaded from public/favicon.ico. Browsers will request it at the root URL.

Advanced logo configurations

Multiple logo sizes for responsive design

<template>
  <picture>
    <!-- Mobile -->
    <source media="(max-width: 768px)" srcset="/logo-mobile.png" width="40" height="40" />
    <!-- Desktop -->
    <img src="/logo.png" alt="Logo" width="120" height="30" class="h-8 w-auto" />
  </picture>
</template>

Logo with text

<script setup lang="ts">
const config = useRuntimeConfig()
</script>

<template>
  <div class="flex items-center gap-3">
    <NuxtImg src="/logo.png" alt="Logo" width="40" height="40" class="h-8 w-8" />
    <span class="text-xl font-bold">
      {{ config.public.siteName }}
    </span>
  </div>
</template>

Animated SVG logo

<template>
  <svg class="h-8 w-auto" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
    <path d="M..." fill="currentColor" class="transition-all duration-300">
      <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" />
    </path>
  </svg>
</template>

Best practices

Logo file optimization

• Compress images: Use tools like TinyPNG to reduce file size
• Use SVG when possible: Scalable and smaller file size
• Optimize SVG: Use SVGOMG to optimize SVG files

Accessibility

Always include proper alt text:

<img src="/logo.png" alt="YourCompany Logo" />

Performance

Use Nuxt Image for automatic optimization:

<NuxtImg src="/logo.png" alt="Logo" loading="eager" width="120" height="30" />

The loading="eager" ensures the logo loads immediately (it's above the fold).

Dark mode support

Provide logos that work on both backgrounds:

/* Option 1: Two separate logo files */
.logo-light {
  display: block;
}
.logo-dark {
  display: none;
}

.dark .logo-light {
  display: none;
}
.dark .logo-dark {
  display: block;
}

/* Option 2: Use CSS filters */
.dark img {
  filter: brightness(0) invert(1);
}

<!-- Option 3: Use currentColor in SVG -->
<svg viewBox="0 0 200 50">
  <path fill="currentColor" d="..." />
</svg>

PWA icons

If you're building a PWA, add app icons:

public/
├── icon-192.png      # 192x192px
├── icon-512.png      # 512x512px
└── apple-touch-icon.png  # 180x180px

Reference them in nuxt.config.ts:

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

Social media images

Add Open Graph images for social sharing:

public/
└── og-image.png      # 1200x630px

Configure in pages:

<script setup>
useSeoMeta({
  ogImage: `${useRuntimeConfig().public.siteUrl}/og-image.png`,
  twitterCard: 'summary_large_image',
})
</script>

Troubleshooting

Logo not updating

1. Clear browser cache: Hard refresh with Ctrl+Shift+R (or Cmd+Shift+R on Mac)
2. Clear Nuxt cache: Delete .nuxt directory and restart
3. Check file names: Ensure files are named correctly

Logo appears blurry

• Use higher resolution images (2x or 3x size)
• Use SVG format for perfect scaling
• Set explicit width/height attributes

Logo doesn't work in emails

• Use absolute URLs (not relative)
• Check email template configuration
• Test with email clients (Gmail, Outlook, etc.)

Reference

• @nuxt/image documentation
• Favicon generator
• SVG optimizer
• Image compressor