> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Tabs>
  <Tab title="Option 1: Inline SVG (Recommended)">
    This is the **most flexible** method, allowing your logo to dynamically change color with themes (like dark mode).

    <Steps>
      <Step title="Get Your SVG Code">
        Open your SVG logo file in a code editor and copy the SVG code.
      </Step>

      <Step title="Edit the Logo Component">
        Open `src/components/shared/logo.tsx` and replace the existing `<svg>...</svg>` element with your code.

        ```tsx src/components/shared/logo.tsx theme={null}
        // ...
        {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 ----
        )}
        // ...
        ```

        <Tip>
          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.
        </Tip>
      </Step>

      <Step title="Update the Logo Text">
        In the same file, find the `<span>` element containing "Acme" and replace it with your brand's name.

        ```tsx src/components/shared/logo.tsx theme={null}
        // ...
        <span ...>
          YourBrand
        </span>
        // ...
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="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.

    <Steps>
      <Step title="Add Your SVG File">
        Place your logo file (e.g., `logo.svg`) inside the `public/` directory.
      </Step>

      <Step title="Modify the Logo Component">
        Replace the contents of the `logoContent` variable with the `Image` component from `next/image`.

        ```tsx src/components/shared/logo.tsx theme={null}
        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}
            />
          );
          // ...
        }
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="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.

    <Steps>
      <Step title="Add Your Image">
        Place your logo image file (e.g., `logo.png`) inside the `public/` directory.
      </Step>

      <Step title="Modify the Logo Component">
        Replace the `logoContent` variable with the `Image` component, pointing to your `.png` or `.jpg` file.

        ```tsx src/components/shared/logo.tsx theme={null}
        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}
            />
          );
          // ...
        }
        ```

        <Warning>
          When using `next/image`, you **must** provide `width` and `height` props to avoid layout shift.
        </Warning>
      </Step>
    </Steps>
  </Tab>
</Tabs>

<Note>
  **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](https://www.shapes.gallery/)**: A collection of beautiful, open-source SVG shapes.
  * **[SVG Backgrounds](https://www.svgbackgrounds.com/elements/svg-shapes-geometric/)**: Various geometric SVG shapes that can be used as a base.
</Note>

## Customizing the Favicon

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

<Steps>
  <Step title="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](https://favicon.io/favicon-converter/)**
    * **[favicon-generator.org](https://www.favicon-generator.org/)**
  </Step>

  <Step title="Replace the File">
    Once you have your `favicon.ico` file, simply replace the existing file at `src/app/favicon.ico` with your new one.

    <Check>
      After replacing the file, restart your development server and clear your browser cache to see the new favicon.
    </Check>
  </Step>
</Steps>