GuidesCustomization
Branding
Customize logo, favicon, and brand metadata
Branding
Site Metadata
Update app/layout.tsx:
export const metadata: Metadata = {
title: {
default: 'Your SaaS Name',
template: '%s | Your SaaS Name',
},
description: 'Your SaaS description',
keywords: ['saas', 'your', 'keywords'],
metadataBase: new URL('https://yourdomain.com'),
openGraph: {
type: 'website',
title: 'Your SaaS Name',
description: 'Your SaaS description',
images: [{ url: '/og-image.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
creator: '@yourtwitterhandle',
},
icons: {
icon: '/favicon.ico',
apple: '/apple-touch-icon.png',
},
};Logo & Favicon
Replace Brand Assets
public/
├── favicon.ico # 32x32
├── favicon-16x16.png # 16x16
├── favicon-32x32.png # 32x32
├── apple-touch-icon.png # 180x180
├── og-image.png # 1200x630
└── logo.svg # Your logoUpdate Logo Component
import Image from 'next/image';
export function Navbar() {
return (
<nav>
<Image
src="/logo.svg"
alt="Your SaaS"
width={120}
height={40}
priority
/>
</nav>
);
}Favicon Generator
Generate all favicon sizes at RealFaviconGenerator.
OG Image
Create social preview image (1200×630px):
- Include logo and tagline
- Use brand colors
- Test with Social Share Preview