Logo & Favicon

How to customize the site logo and browser 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)

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

1. Get Your SVG Code

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

2. 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.

3. 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>
   // ...
   

Option 2: SVG as Image File

This method is simple if you want to use your .svg file directly without editing code. However, you lose the ability to dynamically change its color with themes.

1. Add Your SVG File

   Place your logo file (e.g., logo.svg) inside the public/ directory.

2. Modify the Logo Component

   Replace the contents of the logoContent variable with the Image component from next/image.

   src/components/shared/logo.tsx

   import Link from "next/link";
   import Image from "next/image"; // 1. Import Image
   import { cn } from "@/lib/utils";
   
   // ... (interface props)
   
   export function Logo({ /* ...props */ }) {
     const logoContent = (
       // 2. Replace with the Image component
       <Image
         src="/logo.svg" // Path relative to public/
         alt="YourBrand Logo"
         width={100}
         height={24}
       />
     );
     // ...
   }
   

Option 3: PNG/JPG as Image File

Use this option for raster image formats. Note that these may appear blurry on high-resolution screens and won’t adapt to theme changes.

1. Add Your Image

   Place your logo image file (e.g., logo.png) inside the public/ directory.

2. Modify the Logo Component

   Replace the logoContent variable with the Image component, pointing to your .png or .jpg file.

   src/components/shared/logo.tsx

   import Link from "next/link";
   import Image from "next/image"; // 1. Import Image
   import { cn } from "@/lib/utils";
   
   // ... (interface props)
   
   export function Logo({ /* ...props */ }) {
     const logoContent = (
       // 2. Replace with the Image component
       <Image
         src="/logo.png" // Path relative to public/
         alt="YourBrand Logo"
         width={100}
         height={24}
       />
     );
     // ...
   }
   

   When using next/image, you must provide width and height props to avoid layout shift.

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.

1. 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
2. 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.