Customizing Your Website Logo
Learn how to customize your website logo for both light and dark themes.
Logo Implementation
The logo is implemented using a
DatabaseLogo
component that supports 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
Best Practices
- Keep logo files optimized for web performance
- Test logo visibility in both light and dark themes
- Ensure logo is responsive and scales well on different devices
- Use descriptive alt text for accessibility
- Maintain consistent branding across your application