Logo

The template includes a logo component that displays your logo with the site name in the header.

Logo files

Three logo files are included in the public/ directory:

public/
├── logo.png          # Main logo (1024x1024px, high resolution)
├── logo-160px.png    # Smaller version for emails (160x160px)
└── favicon.ico       # Browser favicon

Replacing the logo

Quick replacement

1. Prepare your logo files:
   • logo.png - Square logo (1024x1024px or at least 256x256px, PNG with transparent background)
   • logo-160px.png - Smaller version for emails and lower bandwidth usage (160x160px)
   • favicon.ico - Browser favicon (use favicon.io to generate)
2. Replace files in public/ directory:

   # Replace with your files (keep same filenames)
   cp your-logo.png public/logo.png
   cp your-logo-160px.png public/logo-160px.png
   cp your-favicon.ico public/favicon.ico
   

3. Restart dev server and hard refresh your browser:

   # Restart dev server
   pnpm dev
   
   # Then hard refresh browser: Ctrl+Shift+R (or Cmd+Shift+R on Mac)
   

Logo component

The AppLogo component (app/components/header/AppLogo.vue) displays the logo with your site name:

Default usage:

<AppLogo />
<!-- Shows: [logo] Site Name -->

Available props:

<AppLogo 
  :width="40"        # Logo width (default: 40)
  :height="40"       # Logo height (default: 40)
  alt="My Logo"      # Alt text (default: "Logo")
  :show-name="true"  # Show site name (default: true)
/>

Hide site name:

<AppLogo :show-name="false" />
<!-- Shows: [logo] only -->

Where the logo appears

• Header - Logo with site name (linked to home/dashboard). The high-resolution logo.png is automatically optimized for display.
• Email templates - Uses logo-160px.png (smaller filesize) with absolute URL.
• Browser tab - Uses favicon.ico automatically.

Customization

Change site name: Update NUXT_PUBLIC_SITE_NAME in your .env file

Use SVG instead of PNG: The component supports any image format - just replace logo.png with logo.svg

Hide the site name: Use <AppLogo :show-name="false" /> to show only the logo

Troubleshooting

Logo not updating:

• Hard refresh browser (Ctrl+Shift+R or Cmd+Shift+R)
• Clear .nuxt cache and restart dev server

Logo appears blurry:

• Use higher resolution images (2x the display size)
• Ensure width/height props match your file's aspect ratio

Reference

• Favicon generator - Generate favicon.ico from PNG
• @nuxt/image docs - Image optimization details