Skip to main content

​
Overview

Kuest allows you to fully customize your platform’s branding including the site name, logo, favicon, and metadata. All branding settings are managed through the Admin Panel under General Settings.

​
Site Identity

​
Site Name

The site name appears throughout the platform, including:
  • Navigation header
  • Page titles
  • PWA manifest
  • Meta tags
  1. Navigate to Admin → General
  2. Find the Brand identity section
  3. Enter your company name (max 80 characters)
  4. Click Save settings
The site name defaults to “Kuest” if not configured.

​
Site Description

The description is used in:
  • Meta tags for SEO
  • PWA manifest
  • Wallet connection dialogs
  • Social media previews
Configuration:
  • Field: Company description
  • Location: Admin → General → Brand identity
  • Max length: 180 characters
  • Default: “Decentralized Prediction Markets”

​
Logo Customization

Kuest supports two logo modes: SVG (default) or Image.
  1. Go to Admin → General
  2. Under Brand identity, find Logo icon
  3. Click Upload and select your SVG file
  4. Supported format: SVG only
  5. Max size: 100KB
For PNG, JPG, or WebP logos:
  1. In Admin → General, set Logo icon mode to Image
  2. Upload your image file
  3. Supported formats: SVG, PNG, JPG, WebP
  4. Recommended: Square format, transparent background
  5. Path is stored and served via the public assets system
Image logos are stored in the database with their file path. The actual files are managed through the storage system configured in src/lib/storage.

​
Favicon and PWA Icons

​
PWA App Icons

Provide two icon sizes for progressive web app installation:
Purpose:
  • Home screen shortcuts
  • App launcher icons
  • Browser install prompts
Configuration:
  • Field: Icon 192x192
  • Location: Admin → General → App install icon (PWA)
  • Format: PNG, JPG, WebP, or SVG
  • Recommended size: 192x192px

​
Icon Usage in Manifest

Icons are automatically configured in the PWA manifest at src/app/manifest.ts: 
icons: [
  {
    src: site.pwaIcon192Url,
    sizes: '192x192',
    type: 'image/png',
  },
  {
    src: site.pwaIcon512Url,
    sizes: '512x512',
    type: 'image/png',
  },
  {
    src: site.pwaIcon512Url,
    sizes: '512x512',
    type: 'image/png',
    purpose: 'maskable',
  },
]

​
Apple Touch Icon

The 192x192 icon is automatically used as the Apple touch icon for iOS devices.
If icons are not configured, the system falls back to default icons:
  • /images/pwa/default-icon-192.png
  • /images/pwa/default-icon-512.png

​
Google Analytics

Configuration:
  • Field: Google Analytics ID
  • Location: Admin → General → Community and analytics
  • Format: G-XXXXXXXXXX
  • Optional field
Only Google Analytics 4 (GA4) IDs are supported. Legacy Universal Analytics IDs will not work.
Add your Discord community invite link:
  • Field: Discord community link
  • Format: https://discord.gg/invite-url
  • Used in navigation and community sections
Provide a support contact URL:
  • Field: Support link
  • Accepts: Discord, Telegram, WhatsApp links, or email addresses
  • Example: mailto:[email protected]
  • Example: https://t.me/yoursupport

​
Settings Location

All branding settings are stored in the database:
SettingGroupKeyDescription
Site Namegeneralsite_namePlatform name
Site Descriptiongeneralsite_descriptionPlatform description
Logo Modegeneralsite_logo_modesvg or image
Logo SVGgeneralsite_logo_svgSVG markup
Logo Image Pathgeneralsite_logo_image_pathFile path
PWA Icon 192generalpwa_icon_192_pathFile path
PWA Icon 512generalpwa_icon_512_pathFile path
Google Analyticsgeneralsite_google_analyticsGA4 ID
Discord Linkgeneralsite_discord_linkURL
Support URLgeneralsite_support_urlURL

​
Accessing Settings in Code

Branding configuration is loaded via: 
import { loadRuntimeThemeState } from '@/lib/theme-settings'

const runtimeTheme = await loadRuntimeThemeState()
const site = runtimeTheme.site

console.log(site.name)        // Site name
console.log(site.description) // Site description
console.log(site.logoUrl)     // Logo URL (data URI or image URL)
console.log(site.pwaIcon192Url) // Icon URL

​
Best Practices

  • Use vector SVG format for crisp rendering at all sizes
  • Keep SVG file size under 50KB for optimal performance
  • Ensure logo works on both light and dark backgrounds
  • Test logo at various screen sizes (mobile, tablet, desktop)
  • Provide square icons with important content in the center
  • Avoid placing critical elements near edges (safe zone: 80%)
  • Test maskable icons to ensure they display correctly
  • Use consistent branding across all icon sizes
  • Write concise, descriptive site descriptions
  • Include relevant keywords naturally
  • Keep site name short for better mobile display
  • Test social media previews with tools like Open Graph debugger

Theme Customization

Customize colors and visual appearance

Fee Configuration

Set up trading fees and wallet addresses

Localization

Configure multi-language support

Admin Panel

Learn about admin panel features

Build docs developers (and LLMs) love

Get started for freeTalk to us