# Application Logo Configuration

> Update the application logo and favicons in your Next.js Prisma kit application.

*Canonical: https://makerkit.dev/docs/nextjs-prisma/branding/logo*

---

Replace the default logo with your brand's logo by updating a single React component - the logo automatically appears in the header, footer, auth pages, and sidebar.

The Next.js Prisma kit uses a centralized logo component at `apps/web/components/app-logo-image.tsx`. Update this one file and your logo appears everywhere: site header, footer, authentication pages, and the app sidebar. You can use SVG components, image files, or any React-renderable content.

The application logo is a React component that renders your brand's visual identifier. It's imported throughout the application wherever a logo is needed.

- **Use an SVG component when:** you need crisp rendering at all sizes, want to change colors via CSS, or need to minimize file size.
- **Use an image file when:** your logo has complex gradients, photos, or effects that don't translate well to SVG.

**If unsure:** SVG is usually the better choice for logos - it scales perfectly and can adapt to dark mode.

## Logo Component Location

| File | Purpose |
|------|---------|
| `apps/web/components/app-logo-image.tsx` | Main logo component (edit this) |
| `apps/web/components/app-logo.tsx` | Logo wrapper with link |

## Updating the Logo

### Option 1: SVG Component (Recommended)

Replace the content of `app-logo-image.tsx` with your SVG:

```typescript
export function AppLogoImage({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 100 100"
      fill="currentColor"
    >
      {/* Your SVG paths here */}
      <path d="M50 10 L90 90 L10 90 Z" />
    </svg>
  );
}
```

Using `currentColor` allows the logo to inherit text color, adapting to light/dark mode automatically.

### Option 2: Image File

Place your image in `public/images/` and reference it:

```typescript
import Image from 'next/image';

export function AppLogoImage({ className }: { className?: string }) {
  return (
    <Image
      src="/images/logo.png"
      alt="Your Company"
      width={120}
      height={40}
      className={className}
    />
  );
}
```

For dark mode support with images, use separate files:

```typescript
import Image from 'next/image';

export function AppLogoImage({ className }: { className?: string }) {
  return (
    <>
      <Image
        src="/images/logo-light.png"
        alt="Your Company"
        width={120}
        height={40}
        className={`${className} dark:hidden`}
      />
      <Image
        src="/images/logo-dark.png"
        alt="Your Company"
        width={120}
        height={40}
        className={`${className} hidden dark:block`}
      />
    </>
  );
}
```

## Where the Logo Appears

The logo component is used in:

- **Site header**: Marketing pages navigation
- **Site footer**: Footer branding
- **Auth pages**: Sign in, sign up, password reset
- **App sidebar**: Dashboard navigation (personal account mode)
- **Email templates**: Transactional emails (separate configuration)

## Favicons

Favicons are the small icons shown in browser tabs and bookmarks.

| File | Purpose |
|------|---------|
| `favicon.ico` | Legacy browsers |
| `favicon-16x16.png` | Small favicon |
| `favicon-32x32.png` | Standard favicon |
| `apple-touch-icon.png` | iOS home screen |
| `android-chrome-192x192.png` | Android home screen |
| `android-chrome-512x512.png` | Android splash screen |
| `safari-pinned-tab.svg` | Safari pinned tabs |
| `site.webmanifest` | PWA manifest |

All files are located in `public/images/favicon/`.

### Generating Favicons

Use a favicon generator to create all required sizes from your logo:

1. Go to [Favicon.io](https://favicon.io/) or [RealFaviconGenerator](https://realfavicongenerator.net/)
2. Upload your logo image (use a square version)
3. Download the generated package
4. Replace files in `public/images/favicon/`

## Production Tip

Export SVGs from Figma with "Outline stroke" enabled - otherwise stroke-based logos render inconsistently across browsers, especially on Windows. This adds a few bytes to file size but eliminates a frustrating cross-browser issue.

## Common Pitfalls

- **Wrong aspect ratio**: Design your logo for horizontal layouts (roughly 3:1 ratio works well in headers).
- **Missing dark mode variant**: Test your logo in both light and dark modes. White logos disappear on light backgrounds.
- **Hardcoded colors in SVG**: Use `currentColor` or CSS variables to allow theme adaptation.
- **Forgetting favicons**: Users notice missing favicons - they make bookmarks look broken.
- **Large image files**: Optimize logo images. SVGs should be under 5KB; PNGs under 20KB.

{% faq
   title="Frequently Asked Questions"
   items=[
     {"question": "Can I use different logos for different parts of the app?", "answer": "Yes. The app-logo-image.tsx component accepts a className prop. You can use conditional rendering based on props or create variant components that import the base logo."},
     {"question": "How do I add a logo to email templates?", "answer": "Email templates use inline images, not the React component. Update the email templates separately in the email package, using absolute URLs to hosted images."},
     {"question": "What size should my logo image be?", "answer": "For the main logo, 240x80 pixels at 2x resolution (480x160 actual) works well. For favicons, start with a 512x512 square version."},
     {"question": "Can I animate the logo?", "answer": "Yes. Since it's a React component, you can use CSS animations, Framer Motion, or any animation library. Keep animations subtle and respect reduced-motion preferences."}
   ]
/%}

## Related

- [Branding Overview](./overview) - Full branding customization guide
- [Tailwind CSS Configuration](./tailwind-css) - Theme and color customization
- [Font Configuration](./fonts) - Typography customization

---

**Next:** [Fonts →](./fonts)