Customizing Your Website Logo

Learn how to customize your website logo for both light and dark themes.

How to Change Your Logo

To change your website logo, you need to modify the DatabaseLogo.tsx component and update the image paths.

File Location:

The logo component is located at public/DatabaseLogo.tsx

TypeScript
"use client";  import * as React from "react"; import ThemedImage from "@/components/ThemedImage"  export const DatabaseLogo = () => {   return (     <ThemedImage       lightSrc="/images/logo.png" // Replace with your light theme image URL       darkSrc="/images/logo_white.png"   // Replace with your dark theme image URL       alt="A preview of the Database web app" // Update the alt text to describe your media       width={140}  // Adjust the width as needed       height={35} // Adjust the height as needed     />   ); }; 

Logo Requirements

1

Image Format

Use WebP format for best quality and smaller file size.

Recommended Specifications:

  • Format: WebP
  • Resolution: 1150 × 250 pixels (recommended)
  • Transparency: Supported
2

Theme Support

Provide separate images for light and dark themes for optimal visibility.

Theme Images:

  • Light theme: Use darker logo colors
  • Dark theme: Use lighter logo colors
  • Ensure good contrast in both themes
3

Dimensions

Adjust the width and height props to match your logo's aspect ratio.

Size Guidelines:

  • Default width: 140px
  • Default height: 35px
  • Maintain aspect ratio when resizing
SuperFast - Go From Idea to Revenue in Just Days | Product Hunt