Skip to content
VortexNext.js
Get Vortex

Make it yours

Logo & favicon

Change the text logo, use your own logo image, and replace the browser icon.

The Spa template homepage with the logo, menu and booking button highlighted

1Logo: the text from site.ts, drawn by Wordmark.tsx

2Menu: set in navigation.ts (see the Menus page)

3Main button: also set in navigation.ts

Your template shows a text logo out of the box. You can keep it and simply change the words, or use your own logo image.

Open src/config/site.ts and change wordmark:

src/config/site.ts
export const site = {  name: "Maison Fleur",  wordmark: "MAISON FLEUR",

Save the file and the header and footer update immediately.

  1. Prepare your logo file

    An SVG file is best because it stays sharp at every size. A PNG with a transparent background also works; make it at least 400 pixels wide so it looks crisp on high-resolution screens.

  2. Add it to the public folder

    Copy the file into public and name it logo.svg (or logo.png).

  3. Replace the Wordmark file

    Open src/components/layout/Wordmark.tsx, select everything in it (Ctrl + A or ⌘ + A) and replace it with:

    src/components/layout/Wordmark.tsx
    import Image from "next/image";import { site } from "@/config/site";import { cn } from "@/lib/format"; /** Your logo image. Put the file in /public and update the src, width and height. */export function Wordmark({ className, size = "md" }: { className?: string; size?: "md" | "lg" }) {  return (    <Image      src="/logo.svg"      alt={site.name}      width={180}      height={40}      preload      className={cn("w-auto", size === "md" ? "h-8" : "h-12", className)}    />  );}

  4. Adjust the details

    • src: the file name you used, starting with a slash, for example /logo.png.
    • width and height: your image's proportions. For a logo that is 900 × 200 pixels, use width={180} and height={40} (the same shape, smaller numbers).
    • To make the logo bigger or smaller, change h-8 (header) and h-12 (footer). Each step is 4 pixels: h-10 is 40 px tall, h-6 is 24 px.

Change the favicon (browser tab icon)

The small icon in the browser tab is src/app/icon.svg. To use your own:

  • If you have an SVG icon: replace src/app/icon.svg with your file, using the same name.
  • If you have a PNG: delete src/app/icon.svg and add your square image as src/app/icon.png (512 × 512 pixels works well).
  • For iPhone and iPad home screens (optional): add a 180 × 180 pixel PNG named src/app/apple-icon.png.
  • For older browsers (optional): add a favicon.ico file in src/app.

Next.js finds these files by name and adds them to every page automatically. No code changes are needed.

Social sharing image

When someone shares your website on Facebook, LinkedIn or WhatsApp, a preview image appears. By default it is the main photo of the home page. To use a different one, change ogImage at the bottom of src/config/assets.ts:

src/config/assets.ts
/** Default social sharing image. */export const ogImage = images.hero;

Replace hero with the name of any image in that file. The ideal size for a sharing image is 1200 × 630 pixels.