LogoStarterkitpro
Extras

Branding Assets

Setting up your project's logos, icons, and social media images.

Lets setup your SaaS branding

Setting up your project's branding involves creating and placing specific image files within your Next.js application. Next.js 15 uses file-based metadata conventions, making this process straightforward.

1. App Icons & Favicon

Next.js uses specific files in the /app directory for your site's primary icon (icon.png) and favicons (favicon.ico, apple-icon.png). You can generate all of these using one tool.

  • Generate Icons: Use a comprehensive favicon generator. Upload your base logo/icon to the tool:
  • Download: Select the nextjs and then the app folder and download the bundle.
  • Placement: Place favicon.ico, apple-icon.png, and icon.png directly inside the /app directory.
File Structure
/app
  └─ favicon.ico
  └─ apple-icon.png
  └─ icon.png
  └─ layout.tsx
  ...

If you use a different extension (e.g., .ico, .jpg), Next.js will still recognize it. However, .png is commonly used.

Next.js automatically detects these files and adds the appropriate <link> tags to your site's <head>. Read more about Metadata Files.

You'll need a couple of logo variations for different uses:

  • Square Logo (logo.png):

    • Create a square version of your logo.
    • Save it as logo.png.
    • Place it in the /public directory.
    • Use Case: This can be used in various UI elements or potentially integrations that require a simple square logo.

  • Rectangle Logo with Name (logoAndName.png):

    • Create a rectangular version of your logo that includes your application's name.
    • Save it as logoAndName.png.
    • Place it in the /public directory.
    • Use Case: This specific file (/public/logoAndName.png) might be referenced by integrations like NextAuth for login pages (check your NextAuth configuration, e.g., /libs/next-auth.js).
File Structure
/public
  └─ logo.png
  └─ logoAndName.png
  ...
/app
  ...

AI Logo Generators

Need a logo? AI tools can help kickstart your design:

3. Social Media Sharing Images (Open Graph & Twitter)

These images are displayed when your site's links are shared on social media platforms like Facebook, Twitter, LinkedIn, etc.

  • Create: Design two images optimized for sharing:
    • One for general Open Graph (opengraph-image.png)
    • One specifically for Twitter (twitter-image.png)
  • Dimensions: The recommended size is 1200x630 pixels (or 1200x660 as per your notes).
  • Format: Save them as .png (or .jpg).
  • Placement: Place both opengraph-image.png and twitter-image.png directly inside the /app directory.
File Structure
/app
  └─ opengraph-image.png
  └─ twitter-image.png
  └─ favicon.ico
  └─ apple-icon.png
  └─ icon.png
  ...

OG Image Generators

Tools to help create properly sized social sharing images:

Next.js automatically detects these image files and adds the necessary Open Graph and Twitter meta tags to your site's <head>. Read more about Metadata Files Conventions.

By following these steps and leveraging Next.js file conventions, you can easily set up consistent branding across your application and social platforms.

References

A curated list of helpful resources for UI development.

On this page