1. What This Page Is For
The Logo page is used to upload and manage the site's main brand logo and browser tab icon (Favicon). The logo appears in the lobby header on both desktop and mobile viewports, while the tab icon appears on browser tabs and bookmarks. It is used when launching a new site, rebranding, or setting festive variations, and is intended for administrators and brand designers.
If you do not upload custom images, the system automatically draws the default system logo and icon matching your selected Theme colour.
2. Before You Begin
- Permission Requirements: You must have the 'Logo' permission in your staff role to view and update images on this page. (Users without update permission see the page in read-only mode).
- Files to Prepare:
- Site Logo Image: Recommended wide picture with a transparent background, recommended size 560 × 152 px. Accepted formats: PNG, JPG, WEBP, or GIF up to 5 MB.
- Browser Tab Icon (Favicon): Recommended square picture (1:1 ratio), recommended size 256 × 256 px. Accepted formats: PNG, JPG, WEBP, or GIF up to 5 MB.
- Dark Mode Compatibility: The lobby is dark-themed by default. Use transparent PNG or WEBP files so the graphics blend cleanly into the dark top bar.
3. Page Layout and Components
From top to bottom, this page consists of the following sections:
- Page Header: Displays the title Logo, description, and navigation breadcrumbs (Settings / Theme / Logo).
- Page Audit Bar: Displays the current configuration version, last updater name, updater type, and last update timestamp.
- Preview Card (On the site): A real-time preview reflecting your live theme colours, containing:
- Browser Tab: Simulates a browser tab with the site icon, website title, and close button.
- Computer (Desktop): Simulates the lobby top bar on computers (140 × 38 px logo container).
- Phone (Mobile): Simulates the lobby top bar in a phone frame (120 × 32 px logo container).
- Image Upload Sections: Two form sections for Logo on the left and Browser tab icon on the right.
- Form Action Bar: Floating bottom bar with Cancel and Save buttons, enabled when draft changes are pending.
4. Search and Filters
Because this page is a brand visual configuration interface, there is no search box or data filter. Instead, it provides 3 preview views to review image sizing and clarity before saving:
| Preview Area | Location | What It Verifies |
|---|
| Browser tab | Top-left of the preview card | Favicon sharpness at 16 px size and page title truncation. |
| Computer | Top-bar simulation box | Logo scale, clarity, and contrast on the desktop navbar. |
| Phone | Simulated mobile frame on the right | Readability and padding when scaled down to mobile screen sizes. |
5. Data Table and Layout Cards
Image Upload Field Specifications
| Upload Box | Recommended Size | Target Location | Default System Behaviour |
|---|
| Logo | 560 × 152 px (Wide) | Lobby top bar (Computer 140×38 px, Phone 120×32 px) | Uses the system's logo drawn in the site's theme colours. |
| Browser tab icon | 256 × 256 px (1:1 Square) | Browser tab bar, bookmarks, and mobile home shortcuts | Uses the system's icon drawn in the site's theme colours. |
| Button / Action | Icon / Appearance | Action Taken | Notes / Conditions |
|---|
| Upload area | Dashed dropzone frame | Opens native file browser or accepts dragged image files. | Supports PNG, JPG, WEBP, GIF up to 5 MB. |
| Change image | Grey button | Replaces the current image with a newly selected file. | Available when an image is already set. |
| Delete / Reset | Red trash can icon | Marks the field to revert to the system default logo/icon. | A warning note confirms that saving will reset the image. |
| Keep current picture | Blue text link | Discards the staged change and restores the currently saved image. | Clickable before submitting the save request. |
6. Step-by-Step Guide
1. Uploading a New Site Logo
- Navigate to Site look > Logo from the left navigation menu.
- In the Logo section, click the upload box or drag your logo file into it.
- Wait briefly for the file to process and review the helper note under the image:
- Ratio fits: Image matches the recommended aspect ratio.
- Image is not about 560 × 152: The system will contain the image inside the logo frame without distortion.
- Review the desktop and mobile preview bars in the card above.
- Click Save in the bottom action bar.
- A green alert will notify you: "Logo saved".
2. Uploading a New Browser Tab Icon (Favicon)
- In the Browser tab icon section, click the upload box or drag your square image into it.
- Review the aspect ratio helper note:
- Ratio fits: Image is an exact square.
- Image is not square: The image will be fitted inside the square bounding box.
- Check the simulated browser tab preview at the top of the page.
- Click Save in the bottom action bar.
3. Reverting to the System Default Logo or Icon
- Click the trash can icon on the image box you wish to clear.
- The card displays a status note: "When you save, the site goes back to the system's logo" or "When you save, the site goes back to the system's icon".
- Notice the preview immediately switches back to the system's branded graphic in your theme colour.
- Click Save to confirm.
4. Discarding Changes Before Saving
- If you uploaded the wrong file or want to undo changes, click Cancel in the bottom action bar.
- The page restores all fields to the currently active database values.
| Field | Required? | Description | Example | Constraints |
|---|
| Logo | Optional | Wide graphic with transparent background for the site header. | Image file brand-logo.png (560 × 152 px) | Formats: PNG, JPG, WEBP, GIF. Max file size: 5 MB. Falls back to system logo if left empty. |
| Browser tab icon | Optional | Square graphic for the browser tab and bookmarks. | Image file favicon.png (256 × 256 px) | Formats: PNG, JPG, WEBP, GIF. Max file size: 5 MB. Square 1:1 ratio. Falls back to system icon if left empty. |
8. Popups and Confirmation Modals
1. Version Conflict Alert
- Triggered When: Another administrator saved logo settings before your save request was submitted.
- What You See: A red error snackbar: "Another admin saved this page first. Their pictures are shown; pick yours again".
- Action Required: The system automatically reloads the other admin's newest image. Re-select your desired picture and click Save again.
- Result: Prevents accidental overwrites of concurrent settings.
- Triggered When: You have selected a new image or marked an image for deletion and attempt to navigate to another page or close the tab without clicking Save.
- What You See: A browser confirmation dialog warning that unsaved changes will be lost.
- Action Required: Click Cancel to remain on the page and save, or confirm navigation to discard your staged changes.
9. Status Badges and Colors
| Status Message / Badge | Color | Meaning | Required Action |
|---|
| Ratio fits | Green | The image matches recommended dimensions. | Ready to save and publish. |
| Not about 560 × 152... | Yellow | Sizing differs from recommended ratio; image will be scaled inside bounds. | Verify legibility in the top preview bar. |
| Not square... | Yellow | Favicon is not 1:1 square; image will be fitted inside the square. | Recommended to crop image to 1:1 before uploading. |
| Uploading picture… | Blue | File is uploading to cloud storage. | Wait until upload completes before clicking Save. |
| The system's logo / icon | Grey | System default graphics are currently active. | Normal state; customize whenever desired. |
| When you save, the site goes back to... | Orange | Image marked for removal, awaiting save confirmation. | Click Save to confirm reset, or click Keep current picture to cancel. |
10. Frequently Asked Questions and Troubleshooting
- Why does the logo have an unsightly white background box in the header?
- The lobby is in dark mode. Have your design team export the logo with a transparent background as a PNG or WEBP file before uploading.
- Why is the Save button greyed out and unclickable?
- The button is only enabled when changes have been made and image files have finished uploading without errors.
- What should I do if an upload error appears?
- If "Choose a PNG, JPG, WEBP or GIF picture" appears, verify the file extension.
- If "The picture is too large" appears, compress or resize the file below 5 MB and upload again.
- Why do players still see the old logo after saving?
- Browser caching may delay updates on client devices. Perform a hard refresh (Ctrl + F5 or Cmd + Shift + R) or clear browser cache to force the latest assets to load.