Logo & Favicon

This guide covers how to replace the default logo and favicon with your own brand’s assets.

Customizing the Main Logo

The main logo component is located at src/components/shared/logo.tsx. You can customize it using one of the following methods.

Option 1: Inline SVG (Recommended)
Option 2: SVG as Image File
Option 3: PNG/JPG as Image File

This is the most flexible method, allowing your logo to dynamically change color with themes (like dark mode).

Get Your SVG Code

Open your SVG logo file in a code editor and copy the SVG code.

Edit the Logo Component

Open src/components/shared/logo.tsx and replace the existing <svg>...</svg> element with your code.

src/components/shared/logo.tsx

// ...
{showIcon && (
  // ---- REPLACE THIS SVG BLOCK ----
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="your-svg-viewbox"
    className={cn("h-6 w-6", iconClassName)}
  >
    <path d="your-svg-path-data" fill="currentColor" />
  </svg>
  // ---- END OF REPLACEMENT ----
)}
// ...

Keep the className prop on your new <svg> tag for correct sizing. Using fill="currentColor" will allow the logo to automatically adapt to the current text color.

Update the Logo Text

In the same file, find the <span> element containing “Acme” and replace it with your brand’s name.

src/components/shared/logo.tsx

// ...
<span ...>
  YourBrand
</span>
// ...

Need a new logo?If you don’t have a logo, you can create a simple, professional-looking SVG logo for free using these resources:

Shapes.gallery: A collection of beautiful, open-source SVG shapes.
SVG Backgrounds: Various geometric SVG shapes that can be used as a base.

Customizing the Favicon

The favicon is the small icon that appears in the browser tab. The file is located at src/app/favicon.ico.

Create a Favicon

The easiest way to create a .ico file is to start with a square image (e.g., a 64x64px PNG) and use a free online converter.Recommended converters:

favicon.io/favicon-converter
favicon-generator.org

Replace the File

Once you have your favicon.ico file, simply replace the existing file at src/app/favicon.ico with your new one.

After replacing the file, restart your development server and clear your browser cache to see the new favicon.

Getting Started.

Customization Guides

UI Components

Core Features

Deployment

API Reference

Logo & Favicon

Customizing the Main Logo

Customizing the Favicon

Getting Started.

Customization Guides

UI Components

Core Features

Deployment

API Reference

​Customizing the Main Logo

​Customizing the Favicon

Customizing the Main Logo

Customizing the Favicon