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

# Customize Your Brand Logo and Favicon in Cal ID for Team

> Replace the default Cal ID branding on your team's booking page with your own logo and browser tab favicon for a fully white-labeled experience.

Give your team a fully white-labeled booking experience. The **Custom brand logo and favicon** section replaces the Cal ID branding on your team's booking page with your organization's logo and browser icon.

<Info>
  Have your files ready before you start:

  * **Logo** — a **600 x 400 px** image. A transparent-background `.PNG` is strongly recommended.
  * **Favicon** — an icon file under **1 MB**.
</Info>

## Step-by-step configuration

<Steps>
  <Step title="Log in to Cal ID">
    Access your account dashboard.
  </Step>

  <Step title="Go to Teams">
    Click the **Teams** icon in the left-hand sidebar.
  </Step>

  <Step title="Access the team menu">
    Locate the team, click the **three horizontal dots**, and select **Edit team**.

    <Frame>
      <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/logo-favicon-team-1.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=6953764a611c73057861ea86e3df1a49" alt="Edit team menu" width="1433" height="759" data-path="images/branding/logo-favicon-team-1.png" />
    </Frame>
  </Step>

  <Step title="Open the Custom Branding tab">
    Click the **Custom Branding** tab at the top of the page.

    <Frame>
      <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/logo-favicon-team-2.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=a8b3b0ae24bdf6073b0d4e9dc479b6e7" alt="Custom Branding tab" width="1600" height="857" data-path="images/branding/logo-favicon-team-2.png" />
    </Frame>
  </Step>

  <Step title="Enable the feature">
    Scroll to **Custom brand logo and favicon** and switch the section toggle to **ON**.

    <Frame>
      <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/logo-favicon-team-3.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=cd43bd2bcc4609c63b8b83742d1cc9e6" alt="Enable custom brand logo and favicon" width="1435" height="765" data-path="images/branding/logo-favicon-team-3.png" />
    </Frame>
  </Step>

  <Step title="Upload your brand logo">
    Click the **Upload logo** button, then select your **600 x 400 px** image.

    <Frame>
      <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/logo-favicon-team-4.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=409b526c37bc070fac54ab2235aeb1fe" alt="Upload brand logo" width="1436" height="763" data-path="images/branding/logo-favicon-team-4.png" />
    </Frame>
  </Step>

  <Step title="Upload your brand favicon">
    Click the **Upload favicon** button, then select your icon file (ensure it is under **1 MB**).

    <Frame>
      <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/logo-favicon-team-5.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=23dba450d81d80e1d72439e7e2e31a96" alt="Upload brand favicon" width="1436" height="763" data-path="images/branding/logo-favicon-team-5.png" />
    </Frame>
  </Step>

  <Step title="Save">
    Click the **Update** button (if visible) to apply the changes.
  </Step>
</Steps>

<Tip>
  For the **brand logo**, using a file with a transparent background (like a `.PNG`) is highly recommended. This ensures your logo looks natural whether your guest is viewing your page in **Light** or **Dark** mode.
</Tip>

## Visible changes for your team's public booking page

* **Public booking page** — your custom logo appears clearly at the bottom of your booking interface, replacing the default branding.

<Frame>
  <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/logo-favicon-team-6.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=0994287c41802e5ca3004c3543969afa" alt="Custom logo on team public booking page" width="1433" height="733" data-path="images/branding/logo-favicon-team-6.png" />
</Frame>

* **Browser tab** — your uploaded favicon is displayed in the browser tab whenever a guest opens your booking link.

<Frame>
  <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/logo-favicon-team-7.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=d2c9cac9f7a3325e12bdf1bc46741c89" alt="Custom favicon in browser tab" width="1437" height="688" data-path="images/branding/logo-favicon-team-7.png" />
</Frame>

## Next steps

<CardGroup cols={1}>
  <Card title="Set a logo and favicon for yourself" icon="user" href="/docs/branding/logo-favicon">
    Configure custom branding on your personal booking page.
  </Card>
</CardGroup>


## Related topics

- [Customize Your Brand Logo and Favicon in Cal ID](/docs/branding/logo-favicon.md)
- [Custom Branding For Teams](/docs/branding/teams.md)
- [Managing Custom Brand Colors in Cal ID for Team](/docs/branding/brand-colors-team.md)
- [Public Page Banner for Team](/docs/branding/banner-team.md)
- [Team Appearance Settings](/docs/appearance/team-appearance.md)