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

# Customize branding

> Customize the look of member-facing pages and forms. Set a button color, choose a page background, and upload your logo and favicon to match your brand.

export const RelatedDocs = ({link1, link2, link3, link4, link5, link6, link7, link8, link9, link10, className = ""}) => {
  const links = [link1, link2, link3, link4, link5, link6, link7, link8, link9, link10].filter(Boolean);
  if (!links.length) return null;
  return <section className={`related-docs border dark:border-gray-700 rounded-2xl px-6 py-4 mt-6 ${className}`}>
      <p className="mb-2 font-medium">
        <strong>Related help docs:</strong>
      </p>
      <ul className="space-y-1 mb-1 mt-1">
        {links.map((link, index) => <li key={index}>
            <a href={link.url}>{link.label}</a>
          </li>)}
      </ul>
    </section>;
};

## Upload a logo image

Memberful allows you to upload and display your logo across all Memberful pages, [including checkout forms](/overview/getting-started/checkout-experience/), [transactional emails](/configuration/emails/email-templates/), your [Memberful-hosted subscription page](/website-builder/pages/subscribe-page/), [Memberful paid newsletters](/overview/setup-guides/member-newsletter/), and your [Memberful-hosted member website.](/overview/setup-guides/hosted-member-site/)

Go to the **Website** tab in your Memberful dashboard, and click **Branding**. From there, you can upload your logo image.

<Frame>
  <img src="https://mintcdn.com/memberful/7IeFbrAJZPdcaipt/images/customize/branding/branding.png?fit=max&auto=format&n=7IeFbrAJZPdcaipt&q=85&s=49162338be65c1df4a7ac73648435e20" alt="Branding pathway" width="1440" height="664" data-path="images/customize/branding/branding.png" />
</Frame>

Click **Choose file** under *Logo* to upload from your computer, then click **Save** to apply the changes.

<Frame>
  <img src="https://mintcdn.com/memberful/zfHsjCK1h1UMRz66/images/customize/branding/branding-choose-logo.png?fit=max&auto=format&n=zfHsjCK1h1UMRz66&q=85&s=6d04f9eaddeb1c84f907a3337dea1093" alt="Choose a logo to upload" width="1440" height="1102" data-path="images/customize/branding/branding-choose-logo.png" />
</Frame>

Logo images must be either a JPG or PNG file, no larger than 5MB. If you have a rectangular logo, we recommend that it be at least 560px wide. If you have a square or circular logo, we recommend that it be at least 180px x 180px.

<Frame>
  <img src="https://mintcdn.com/memberful/zfHsjCK1h1UMRz66/images/customize/branding/branding-logo-guidelines.png?fit=max&auto=format&n=zfHsjCK1h1UMRz66&q=85&s=4672feae9dbe279b78b6cf224fed7961" alt="Logo guidelines" width="1440" height="283" data-path="images/customize/branding/branding-logo-guidelines.png" />
</Frame>

To remove an uploaded logo, click **Remove**, then click **Save** to apply the change.

<Frame>
  <img src="https://mintcdn.com/memberful/0sA94k065n1qKJXK/images/customize/branding/branding-remove-logo.png?fit=max&auto=format&n=0sA94k065n1qKJXK&q=85&s=2ee88e9d70f2ac67b6b62ff5c35f9f65" alt="Remove a logo image" width="1440" height="966" data-path="images/customize/branding/branding-remove-logo.png" />
</Frame>

## Upload a favicon image

Memberful allows you to upload and display your logo as a favicon icon that shows up in the browser tab instead of Memberful's icon.

<Frame>
  <img src="https://mintcdn.com/memberful/0sA94k065n1qKJXK/images/customize/branding/favicon-example.png?fit=max&auto=format&n=0sA94k065n1qKJXK&q=85&s=5066e6f2cdefb9da74e343338616d5d7" alt="Example of a custom favicon in the browser tab" width="1440" height="453" data-path="images/customize/branding/favicon-example.png" />
</Frame>

Go to the **Website** tab in your Memberful dashboard, click **Branding**, then use *Base Options* to upload your favicon.

Click **Choose file** under *Your favicon* to upload from your computer, then click **Save** to apply the changes.

<Frame>
  <img src="https://mintcdn.com/memberful/zfHsjCK1h1UMRz66/images/customize/branding/branding-choose-favicon.png?fit=max&auto=format&n=zfHsjCK1h1UMRz66&q=85&s=f5c90428c250f8735348f535a25fd004" alt="Choose a favicon to upload" width="1440" height="1094" data-path="images/customize/branding/branding-choose-favicon.png" />
</Frame>

Favicon images must be either a JPG or PNG file, no larger than 5MB, and they must have a square aspect ratio. The image will be resized to 32px x 32px.

This only affects the browser's favicon, it won't change the Apple Touch Icon or the Android equivalent.

To remove a favicon that you've already uploaded, click **Remove** under *Your favicon* and click **Save** at the bottom of the page.

<Frame>
  <img src="https://mintcdn.com/memberful/0sA94k065n1qKJXK/images/customize/branding/branding-remove-favicon.png?fit=max&auto=format&n=0sA94k065n1qKJXK&q=85&s=d1c9c88145b2b267848ed953f0144db9" alt="Remove a favicon image" width="1440" height="890" data-path="images/customize/branding/branding-remove-favicon.png" />
</Frame>

Uploading a new favicon or removing the current one should take effect immediately in most browsers except Safari, which may cache them for a longer time.

## Choose a background color

Memberful lets you set a custom background color for your hosted member site.

This is the base color for important elements of your membership pages, including both the Subscribe and Checkout pages. If the footer and navigation colors for your hosted member site aren't set, this color will be applied.

Go to the **Website** tab, click **Branding**, then use *Base Options* to set or reset the background color.

<Frame>
  <img src="https://mintcdn.com/memberful/zfHsjCK1h1UMRz66/images/customize/branding/branded-posts.png?fit=max&auto=format&n=zfHsjCK1h1UMRz66&q=85&s=4a704d23d73ce8c581021a5015ed50e6" alt="Branded Posts" width="1440" height="1006" data-path="images/customize/branding/branded-posts.png" />
</Frame>

Enter a valid 6-digit hex code in the RGB fields, then click **Save** to apply the changes.

<Frame>
  <img src="https://mintcdn.com/memberful/zfHsjCK1h1UMRz66/images/customize/branding/branding-hex-value.png?fit=max&auto=format&n=zfHsjCK1h1UMRz66&q=85&s=e91339af17ebaed93598b7f24a259a52" alt="Input a hex value" width="1440" height="1102" data-path="images/customize/branding/branding-hex-value.png" />
</Frame>

Alternatively, if your browser supports it, click the circular color swatch to launch the color picker. As you interact with the color picker (it looks a little bit different on a Mac vs. a PC), the corresponding hex value will show up in the text field.

<Frame>
  <img src="https://mintcdn.com/memberful/zfHsjCK1h1UMRz66/images/customize/branding/branding-color-picker.png?fit=max&auto=format&n=zfHsjCK1h1UMRz66&q=85&s=c0bfa3e2b9388875c29a66f329ced16a" alt="Using the color picker" width="1440" height="1378" data-path="images/customize/branding/branding-color-picker.png" />
</Frame>

To use Memberful's default colors, click **Reset** next to the background color field.

<Frame>
  <img src="https://mintcdn.com/memberful/0sA94k065n1qKJXK/images/customize/branding/branding-reset-color.png?fit=max&auto=format&n=0sA94k065n1qKJXK&q=85&s=15db8f7fd3cf97b6c88f8783d19754d6" alt="Reset colors to default" width="1440" height="1102" data-path="images/customize/branding/branding-reset-color.png" />
</Frame>

## Choose a link color

You can set a custom color for all **links** across your hosted member site and emails.

<Frame>
  <img src="https://mintcdn.com/memberful/zfHsjCK1h1UMRz66/images/customize/branding/branding-link-example.png?fit=max&auto=format&n=zfHsjCK1h1UMRz66&q=85&s=52e5e89eac485bf3fe625431320109f0" alt="Branded link" width="1440" height="590" data-path="images/customize/branding/branding-link-example.png" />
</Frame>

The process of choosing a link color works exactly the same way as for choosing a background color. Please see [Choose a background color](#choose-a-background-color) for detailed instructions.

<Frame>
  <img src="https://mintcdn.com/memberful/zfHsjCK1h1UMRz66/images/customize/branding/branding-link-color.png?fit=max&auto=format&n=zfHsjCK1h1UMRz66&q=85&s=b70158098157039cd236bf5af6b9349b" alt="Branded links" width="1440" height="1102" data-path="images/customize/branding/branding-link-color.png" />
</Frame>

The color will be applied to links on our hosted member site and emails.

## Choose a button color

You can set a custom color for the main action buttons on your hosted member site and emails. This also applies to buttons like sign-in, place an order, update profile, and more.

<Frame>
  <img src="https://mintcdn.com/memberful/zfHsjCK1h1UMRz66/images/customize/branding/branding-button-examples.png?fit=max&auto=format&n=zfHsjCK1h1UMRz66&q=85&s=2b2a73ea113daac559ae8c6f0ea2ef5e" alt="Button examples" width="1440" height="342" data-path="images/customize/branding/branding-button-examples.png" />
</Frame>

The process of choosing a button color works exactly the same way as choosing a background or link color. Please see [Choose a background color](#choose-a-background-color) for detailed instructions.

<Frame>
  <img src="https://mintcdn.com/memberful/zfHsjCK1h1UMRz66/images/customize/branding/branding-button-color.png?fit=max&auto=format&n=zfHsjCK1h1UMRz66&q=85&s=926d7426a92ce2f07e53f61a74dfbd5f" alt="Branded links" width="1440" height="1102" data-path="images/customize/branding/branding-button-color.png" />
</Frame>

<Callout icon="info" color="#22E273">
  Buttons added through custom blocks use your **Base options** button color by default, but you can customize them using the [color picker in the block settings](https://memberful.com/docs/website-builder/pages/create-a-page#button-block-settings)
</Callout>

## Preview your changes

Go to the **Website** tab in your Memberful dashboard, and toggle through the different pages and forms. Make sure that your logo is sized correctly, and that the colors you selected match your brand and are readable.

<Frame>
  <img src="https://mintcdn.com/memberful/srkEEu2G5YWCAT7S/images/Configuration/Branding/branding-preview.gif?s=3d4f39220218cd744f25e8e26907342f" alt="Branding Preview" width="1041" height="722" data-path="images/Configuration/Branding/branding-preview.gif" />
</Frame>

<RelatedDocs
  link1={{
url: "/overview/getting-started/checkout-experience/",
label:
"Try a live demo of Memberful's payment and account management experience.",
}}
  link2={{
url: "/configuration/feedback-and-policies/create-custom-fields/",
label: "Create custom fields to collect member data.",
}}
  link3={{
url: "/configuration/localization/choose-your-currency/",
label: "Choose your currency to sell to members.",
}}
/>
