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

# Branding, Theme, and Landing Page

> Upload your restaurant logo, set a brand colour, manage browser and app icons, and choose a landing page background — all from the web admin.

Control how your restaurant looks to customers and staff across the web admin, the customer site, and when visitors save your site to their phone's home screen. All options are in **Settings** in the web admin.

<Note>
  You need the **Manage Settings** permission to make changes on these pages.
</Note>

## Theme settings

Go to **Settings → Theme Settings** to upload logos, pick a brand colour, and manage icons.

### Brand colour

<Steps>
  <Step title="Open Theme Settings">
    In the web admin, go to **Settings → Theme Settings**.
  </Step>

  <Step title="Pick your colour">
    Click the **Theme Color** field and enter a hex value, or use the colour picker to choose your brand colour. This colour is applied across the customer site interface.
  </Step>

  <Step title="Save">
    Click **Save** to apply the change.
  </Step>
</Steps>

### Logos

You can upload three logo variants so the right one appears in light and dark contexts.

| Slot            | When it's used                                      |
| --------------- | --------------------------------------------------- |
| **Logo** (main) | Default fallback across the admin and customer site |
| **Dark logo**   | Shown when the interface is in dark mode            |
| **Light logo**  | Shown when the interface is in light mode           |

**Accepted formats:** PNG, JPG, JPEG, WEBP, SVG — maximum **1 MB** per file.

<Steps>
  <Step title="Choose a logo slot">
    Under **Theme Settings**, locate the logo slot you want to update (Logo, Dark Logo, or Light Logo).
  </Step>

  <Step title="Upload the file">
    Click the upload area and select your image. Keep the file under 1 MB.
  </Step>

  <Step title="Toggle logo text">
    Turn **Show Logo Text** on if you also want your restaurant name displayed as text next to the logo, or off to show the image only.
  </Step>

  <Step title="Save">
    Click **Save**.
  </Step>
</Steps>

<Tip>
  SVG files scale perfectly at any size. If you have an SVG version of your logo, prefer it over raster formats.
</Tip>

### Favicon and app icons

These files control what appears in browser tabs, bookmarks, and on a customer's home screen when they save your site.

**Accepted formats for all icon slots:** ICO (favicon only), PNG, JPG, JPEG, WEBP, SVG — maximum **2 MB** per file.

| Slot                     | Size      | Purpose                      |
| ------------------------ | --------- | ---------------------------- |
| **Favicon** (.ico)       | Any       | Classic browser tab icon     |
| **Favicon 16px**         | 16 × 16   | Small browser tab            |
| **Favicon 32px**         | 32 × 32   | Standard browser tab         |
| **Android Chrome 192px** | 192 × 192 | Android home screen shortcut |
| **Android Chrome 512px** | 512 × 512 | Android splash screen / PWA  |
| **Apple Touch Icon**     | Any       | iOS home screen shortcut     |

<Steps>
  <Step title="Open Theme Settings">
    Go to **Settings → Theme Settings** and scroll to the icons section.
  </Step>

  <Step title="Upload each icon">
    Click the upload area next to each slot and select the correctly sized file. You do not need to fill every slot — upload the ones that matter most to your customers.
  </Step>

  <Step title="Save">
    Click **Save** when done.
  </Step>
</Steps>

<Warning>
  Keep icon files under 2 MB. Uploading an oversized file will be rejected and the previous icon will remain.
</Warning>

***

## Landing page background

Go to **Settings → Landing Page** to choose how the background of your customer-facing landing page looks.

oFatoura offers a set of ready-made background presets. Each preset is a coordinated combination of colours, gradients, and button styles.

**Available presets include:**

* Clean White (minimal-white)
* Soft Gray
* Warm Beige
* Fresh Green
* Obsidian (dark)
* and additional options shown in the selector

<Steps>
  <Step title="Open Landing Page settings">
    Go to **Settings → Landing Page**.
  </Step>

  <Step title="Browse the presets">
    Each preset is shown as a preview card with its colour scheme and button style. Click the card for the preset you want.
  </Step>

  <Step title="Save">
    Click **Save**. The background updates immediately on your customer site.
  </Step>
</Steps>

<Tip>
  Pick a preset that complements your logo and brand colour. A warm beige preset pairs well with earth-tone food photography; obsidian suits venues with a modern or late-night feel.
</Tip>

***

## How these settings appear to customers

* **Your logos** appear in the navigation header and, depending on the theme, the footer of your customer site.
* **The brand colour** is used for call-to-action buttons, highlights, and interactive elements on the customer site.
* **Favicons and app icons** appear in browser tabs and when customers add your site to their phone home screen.
* **The landing page background** sets the overall feel of the first page customers land on.

***

## Related

* [Configuring the Customer Site](/online-ordering/customer-site-settings) — storefront display options, social links, and SEO metadata
* [How Customers Browse and Order](/online-ordering/storefront-and-checkout) — the full customer ordering experience
* [Restaurant Information and Localization](/essential-setup/restaurant-information) — restaurant name, address, and contact details