LogoMkSaaS Docs

Images

Learn how to customize the images in your MkSaaS website

This guide covers the image system in your MkSaaS website, focusing on how to configure and customize logos, favicons, and other image assets.

Core Features

The MkSaaS template includes a flexible image system that allows you to:

  • Configure logos for both light and dark modes
  • Set up social media preview images (Open Graph)
  • Customize favicons and browser icons
  • Organize and access image assets efficiently

Image Configuration

Images are primarily configured in the website.tsx configuration file.

Configuration Settings

src/config/website.tsx
export const websiteConfig: WebsiteConfig = {
  metadata: {
    // ...other settings
    images: {
      ogImage: '/og.png',            // Social media preview image
      logoLight: '/logo.png',        // Logo for light mode
      logoDark: '/logo-dark.png',    // Logo for dark mode
    },
    // ...other configuration
  },
  // ...rest of config
};

Configuration Options:

PropertyDescription
ogImageThe Open Graph image used for social media previews when sharing the website
logoLightThe logo displayed in light mode
logoDarkThe logo displayed in dark mode

Image Directory Structure

Image assets are primarily stored in the public directory, which is directly accessible from the browser.

Main Image Assets

The following image assets are typically stored in the root of the public directory:

  • Main Logos: logo.png (light mode) and logo-dark.png (dark mode)
  • Open Graph Image: og.png for social media previews
  • Favicon Assets: Various sizes of favicons and browser icons

Additional Image Directories

For better organization, you can create subdirectories within the public folder:

  • /public/images/ - For general website images
  • /public/blocks/ - For section-specific images
  • /public/svg/ - For SVG assets

Customizing Logos

Logo Requirements

For the best display across the website, logos should:

  • Be in PNG format with transparency
  • Have a consistent height (the width can vary)
  • Be prepared in both light and dark versions for different themes

Creating Custom Logos

To create a professional logo for your website:

  1. Use a Logo Creation Tool: We recommend Ray.so Icon Maker for creating simple, clean logos
  2. Export your logo in PNG format with transparency
  3. Create two versions: one for light mode and one for dark mode
  4. Place both files in your /public directory

Updating Logo Configuration

After creating your custom logos:

  1. Save your light mode logo as /public/logo.png
  2. Save your dark mode logo as /public/logo-dark.png
  3. Optionally update the paths in website.tsx if you used different filenames or locations:
src/config/website.tsx
images: {
  // ...other image settings
  logoLight: '/path/to/your-logo.png',
  logoDark: '/path/to/your-dark-logo.png',
},

Customizing Favicons

Favicons are the small icons displayed in browser tabs, bookmarks, and when adding your site to a mobile home screen.

Favicon Files

A complete favicon set includes several files:

  • favicon.ico - Traditional favicon (16x16, 32x32, 48x48px)
  • favicon-16x16.png - 16x16 pixel PNG favicon
  • favicon-32x32.png - 32x32 pixel PNG favicon
  • apple-touch-icon.png - 180x180 pixel icon for iOS
  • android-chrome-192x192.png - Icon for Android (192x192 pixels)
  • android-chrome-512x512.png - Larger icon for Android (512x512 pixels)

Creating Custom Favicons

To create a complete set of favicon files:

  1. Design a simple, recognizable icon (ideally square)
  2. Use Favicon.io Converter to generate a complete set of favicons
  3. Upload your image to the converter
  4. Download the generated zip file containing all favicon formats
  5. Extract and place all files in the root of your /public directory

Favicon HTML

The favicon files are automatically linked in your HTML via the following tags in MkSaaS boilerplate, so you don't need to add them manually.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

These links are typically included in the <head> section of your application's HTML.

Creating an Open Graph Image

The Open Graph image (og.png) is displayed when your website is shared on social media platforms.

Open Graph Image Guidelines

For optimal display across platforms:

  • Use dimensions of 1200×630 pixels (ratio of 1.91:1)
  • Keep important content in the central area
  • Include your logo, website name, and possibly a tagline
  • Use colors consistent with your brand

Updating Open Graph Image

  1. Create your Open Graph image using a design tool
  2. Save it as og.png
  3. Place it in the root of your /public directory
  4. Update the configuration in website.tsx if needed:
src/config/website.tsx
images: {
  ogImage: '/your-custom-og.png',
  // ...other image settings
},

Best Practices

  • Image Optimization: Always compress images before adding them to your project
  • Responsive Images: Use the Next.js Image component for automatic responsive handling
  • SVG for Icons: Use SVG format for icons and simple graphics
  • Consistent Styling: Maintain consistent dimensions and styling for logos across the site
  • Alt Text: Always include descriptive alt text for accessibility
  • File Size: Keep image file sizes as small as possible for better performance
  • Format Selection: Use WebP or AVIF formats when possible for better compression
  • Image Dimensions: Store images at their maximum required dimensions, letting Next.js handle resizing

Troubleshooting

Images Not Displaying

If your images aren't displaying correctly:

  1. Verify the file paths in your website.tsx configuration
  2. Check that image files exist in the correct location (case-sensitive)
  3. Clear your browser cache and reload the page
  4. Verify the image dimensions and format are supported

Favicon Not Showing

If your favicon isn't displaying:

  1. Check that all favicon files are in the root of your public directory
  2. Verify that the HTML links are correctly set up
  3. Force refresh your browser (Ctrl+F5 or Cmd+Shift+R)
  4. Check browser developer tools for any 404 errors

Next Steps

Now that you understand how to work with images in MkSaaS, explore these related topics:

Themes

Configure theme and appearance settings

Fonts

Work with fonts in your MkSaaS website

Environment Setup

Configure environment variables

Website Configuration

Configure core settings for your website

Table of Contents