Customize Your Application Logo | Next.js Supabase SaaS Kit

Replace the default Makerkit logo by editing the AppLogo component at apps/web/components/app-logo.tsx. This single component controls the logo across your entire application: authentication pages, site header, footer, sidebar, and email templates.

Quick Start

Open apps/web/components/app-logo.tsx and replace the existing SVG with your logo:

import Link from 'next/link';
import { cn } from '@kit/ui/utils';
function LogoImage({ className }: { className?: string }) {
  return (
    <img
      src="/images/logo.svg"
      alt="Your Company Name"
      className={cn('w-[80px] lg:w-[95px]', className)}
    />
  );
}
export function AppLogo({
  href,
  label,
  className,
}: {
  href?: string | null;
  className?: string;
  label?: string;
}) {
  if (href === null) {
    return <LogoImage className={className} />;
  }
  return (
    <Link aria-label={label ?? 'Home Page'} href={href ?? '/'}>
      <LogoImage className={className} />
    </Link>
  );
}

Place your logo file in apps/web/public/images/ and update the src path accordingly.

Logo Implementation Options

Option 1: SVG Component (Recommended)

Inline SVGs provide the best performance and allow dynamic styling with Tailwind classes:

function LogoImage({ className }: { className?: string }) {
  return (
    <svg
      className={cn('w-[95px] h-auto', className)}
      viewBox="0 0 100 32"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        className="fill-primary dark:fill-white"
        d="M10 5h80v22H10z"
      />
      {/* Your SVG paths */}
    </svg>
  );
}

Benefits:

• Supports fill-primary for automatic theme color adaptation
• Responds to dark mode with dark:fill-white
• Scales without quality loss
• No additional HTTP requests

Option 2: Next.js Image Component

For PNG, JPG, or WebP logos, use next/image for automatic optimization:

import Image from 'next/image';
function LogoImage({ className }: { className?: string }) {
  return (
    <Image
      src="/images/logo.png"
      alt="Your Company Name"
      width={95}
      height={32}
      className={cn('w-[80px] lg:w-[95px] h-auto', className)}
      priority
    />
  );
}

Option 3: Dark Mode Variants

When your logo needs different versions for light and dark modes:

import Image from 'next/image';
import { cn } from '@kit/ui/utils';
function LogoImage({ className }: { className?: string }) {
  return (
    <>
      <Image
        src="/images/logo-dark.svg"
        alt="Your Company Name"
        width={95}
        height={32}
        className={cn('hidden dark:block w-[80px] lg:w-[95px]', className)}
        priority
      />
      <Image
        src="/images/logo-light.svg"
        alt="Your Company Name"
        width={95}
        height={32}
        className={cn('block dark:hidden w-[80px] lg:w-[95px]', className)}
        priority
      />
    </>
  );
}

Where the Logo Appears

AppLogo is imported from ~/components/app-logo and rendered at these call sites:

Editing apps/web/components/app-logo.tsx updates every call site at once.

Favicon and Social Images

Favicon assets live in apps/web/public/images/favicon/ and are wired up via the icons field in apps/web/lib/root-metadata.ts:

apps/web/public/images/favicon/
├── favicon.ico              # Browser tab icon
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png     # iOS home screen
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── safari-pinned-tab.svg

To swap them, replace the files in place and update the paths in apps/web/lib/root-metadata.ts if the filenames change. Generate the set from your logo using tools like RealFaviconGenerator or Favicon.io.

Common Mistakes

Using low-resolution images: Logos appear blurry on high-DPI displays. Always use SVG when possible, or provide 2x/3x image assets.

Forgetting alt text: Screen readers need descriptive alt text. Use your company name, not "logo".

Hard-coded dimensions: Use responsive classes like w-[80px] lg:w-[95px] instead of fixed pixel widths to ensure the logo scales appropriately on mobile.

Missing priority attribute: Add priority to Next.js Image components for above-the-fold logos to prevent layout shift.

Verification

After updating your logo:

1. Check the marketing header at http://localhost:3000
2. Verify the auth pages at http://localhost:3000/auth/sign-in
3. Test dark mode toggle to confirm logo visibility
4. Inspect mobile viewport (375px width) for proper sizing

Next Steps

• Back to Customization Overview
• Configure your brand colors and theme
• Customize your application fonts