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.
The MkSaaS template includes a flexible image system that allows you to:
Images are primarily configured in the website.tsx configuration file.
MkSaaS Docsexport 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',
Configuration Options:
| Property | Description |
|---|---|
ogImage | The Open Graph image used for social media previews when sharing the website |
logoLight | The logo displayed in light mode |
logoDark | The logo displayed in dark mode |
Image assets are primarily stored in the public directory, which is directly accessible from the browser.
The following image assets are typically stored in the root of the public directory:
logo.png (light mode) and logo-dark.png (dark mode)og.png for social media previewsFor better organization, you can create subdirectories within the public folder:
/public/images/ - For general website images/public/blocks/ - For section block images/public/svg/ - For SVG assetsFor the best display across the website, logos should:
To create a professional logo for your website:
/public directoryAfter creating your custom logos:
/public/logo.png/public/logo-dark.pngwebsite.tsx if you used different filenames or locations:images: {
// ...other image settings
logoLight: '/path/to/your-logo.png',
logoDark: '/path/to/your-dark-logo.png',
},Favicons are the small icons displayed in browser tabs, bookmarks, and when adding your site to a mobile home screen.
A complete favicon set includes several files:
favicon.ico - Traditional favicon (16x16, 32x32, 48x48px)favicon-16x16.png - 16x16 pixel PNG faviconfavicon-32x32.png - 32x32 pixel PNG faviconapple-touch-icon.png - 180x180 pixel icon for iOSandroid-chrome-192x192.png - Icon for Android (192x192 pixels)android-chrome-512x512.png - Larger icon for Android (512x512 pixels)To create a complete set of favicon files:
/public directoryThe 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=These links are typically included in the <head> section of your application's HTML.
The Open Graph image (og.png) is displayed when your website is shared on social media platforms.
For optimal display across platforms:
og.png/public directorywebsite.tsx if needed:images: {
ogImage: '/your-custom-og.png',
// ...other image settings
},If your images aren't displaying correctly:
website.tsx configurationIf your favicon isn't displaying:
Now that you understand how to work with images in MkSaaS, explore these related topics:
Configure website settings