Extras

Learn how to customize your application branding and assets in Nexset. This guide covers logo setup, favicons, and social media images.

Application Icon

  • 1

    Add your application icon as icon.png in the /app folder

  • 2

    If using a different format (e.g., .svg), update references in components like Header

  • 3

    Recommended size: 32x32 pixels

Favicon Setup

  • 1

    Use a Favicon Generator to create your favicon

  • 2

    Download the generated zip file

  • 3

    Add these files to the /app folder:

  • 4

    - apple-icon.png (renamed from apple-touch-icon.png)

  • 5

    - favicon.ico

  • 6

    Next.js will automatically add them to your HTML

Application Logo

Create a rectangular logo with your application name:

  • 1

    Design a logo with your application name

  • 2

    Save it as logoAndName.png

  • 3

    Place it in the /public folder

  • 4

    NextAuth will automatically use it on login pages

Social Media Images

Create social media sharing images:

  • 1

    Design two images with dimensions 1200x660 pixels

  • 2

    Save them as:

  • 3

    - opengraph-image.png

  • 4

    - twitter-image.png

  • 5

    Place both files in the /app folder

  • 6

    Next.js will automatically add them to your HTML

File Structure

app/
  ├── icon.png
  ├── apple-icon.png
  ├── favicon.ico
  ├── opengraph-image.png
  └── twitter-image.png
public/
  └── logoAndName.png

Best Practices

  • 1

    Use high-quality images for all assets

  • 2

    Optimize images for web use

  • 3

    Maintain consistent branding across all assets

  • 4

    Test social media sharing previews

  • 5

    Verify favicon display across different browsers

Additional Resources