ExtrasBranding

Extras

Branding

This section contains information about how to customise the metadata of the website including favicons, logo, title and description, open graph images (images for social media) and Twitter, so that it matches your brand.

Favicon

  1. You can create a favicon by using an online tool like [favicon.io] to convert it from .png to .ico.
  2. Inside the codebase, go to the app folder and replace the favicon.ico file with your new favicon.
  1. Inside the codebase, go to the assets folder and replace the logo.png file with your logo.
  2. Using a .jpg? Please make sure to update all references to the logo in the codebase.
It’s recommended to use a size of 192x192 for the logo.

Title and Description

  1. Inside the codebase, go to app folder and open the layout.tsx file.

  2. you will see the metadata object. This is where you can customise the metadata of the website.

layout.tsx
export const metadata: Metadata = {
    title: "Example Title",
    description: "Example Description",
};

Open Graph Images (Social Media)

  1. Inside the codebase, go to the app folder and replace the existing opengraph-image.png file with your new open graph image.
  2. Using a .jpg? Please make sure to update all references to the logo in the codebase.

It’s recommended to use a size of 1200x630 for the Open Graph and Twitter images.

Twitter Graph Image

  1. Inside the codebase, go to the app folder and replace the existing twitter-image.png file with your new Twitter graph image.
  2. Using a .jpg? Please make sure to update all references to the logo in the codebase.

Troubleshooting

You can use a tool like [Opengraph] to check if all open graph images, metadata, etc. have been updated correctly.

If the title, description or open graph images have been updated, but the changes are not showing up, when sharing the website, please check the following:

  • Check if the opengraph-image.png and twitter-image.png files are in the app folder and have the correct names.
  • Redeploy the app on Vercel and make sure to clear the cache. You can do this by clicking on the REDEPLOY button and have the USE EXISTING BUILD CACHE checkbox unchecked.
Rate Limits (API Calls)API Reference