App settings

Use this page to change the app's name, browser details, logos and font, and to find its shared configuration options.

Shared options live in src/configs/app.config.ts. Browser metadata and fonts are set in the root layout, while logo images live in public/.

App name

Change name inside the existing appConfig object:

name: 'My app',

This sets the app name used in the footer. Set the browser title and replace the logo assets separately, as described below.

Browser title and icon

Edit the existing metadata object in src/app/layout.tsx to set the default browser title and page description:

export const metadata: Metadata = {
  title: 'My app',
  description: 'Your application description',
}

Individual pages or nested layouts can override these defaults with their own metadata. See Next.js metadata.

Replace src/app/icon.svg to change the browser icon. Next.js recognizes this file automatically through its app icon convention.

Logos

Replace the logo assets your layouts use under public/img/logos/. Keep their existing filenames to preserve the image references:

The compact versions fit narrow sidebars and other small logo areas. Update both background variants used by your layout so the logo remains readable in light and dark appearances.

Layout components under src/components/layouts/ select the image and provide its alt text. Update those references if you change a filename, and replace any remaining template name in the alt text.

Font

The root layout loads Inter through next/font/google. To use another font, replace its import and configuration in src/app/layout.tsx, then update the font references on <html> and <body> while preserving the other classes and layout providers.

Update --font-sans in src/styles/base.css to use the CSS variable declared in your font configuration, so controls and text utilities use the same family. See Next.js fonts for Google and local font setup.

API, start page and appearance

These settings are also in src/configs/app.config.ts: