Open src/config/site.ts and update the following values:

export const site = {
	name: "My Site",
	description: "My site description",
	url: "https://my-site.com",
	ogImage: "https://my-site.com/images/og.png",
	links: {
		twitter: "https://twitter.com/my-site",
		instagram: "https://instagram.com/my-site",


Then open src/app/layout.tsx and update the metadata with your own values:

export const metadata: Metadata = {
	title: {
		default: siteConfig.name,
		template: `%s | ${siteConfig.name}`,
	description: siteConfig.description,
	keywords: [
		"Tailwind CSS",
		"Server Components",
		"Radix UI",
		"Saas boilerplate",
		"Saas starter kit",
	authors: [
			name: "salmandotweb",
			url: "https://www.salmandotweb.me",
	creator: "salmandotweb",
	themeColor: [
		{ media: "(prefers-color-scheme: light)", color: "white" },
		{ media: "(prefers-color-scheme: dark)", color: "black" },
	openGraph: {
		type: "website",
		locale: "en_US",
		url: siteConfig.url,
		title: siteConfig.name,
		description: siteConfig.description,
		siteName: siteConfig.name,
	twitter: {
		card: "summary_large_image",
		title: siteConfig.name,
		description: siteConfig.description,
		images: [`${siteConfig.url}/og.jpg`],
		creator: "@salmandotweb",
	icons: {
		icon: "/brand/favicon.svg",
		shortcut: "/favicon-16x16.png",
		apple: "/apple-touch-icon.png",
	manifest: `${siteConfig.url}/site.webmanifest`,


To Change the favicon, replace the favicon.svg file in public folder along with og.png and other images.


For fonts, we are using next/fonts/google package. You can change it in src/app/layout.tsx file.

import { Bricolage_Grotesque } from "next/font/google";
const font = Bricolage_Grotesque({
	subsets: ["latin"],
	weight: ["200", "300", "400", "500", "600", "700", "800"],