v3.23.1

Getting Started Devices Gateways Integrations Reference
Get The Things Stack

Reference

    Overview
  • Adaptive Data Rate
  • API
  • Application Packages
  • Billing with Stripe
  • Command-Line Interface
  • Components
  • Configuration
  • Data Formats
  • Data Retention and Privacy
  • Email Templates
  • Federated Authentication
  • Frequency Plans
  • FUOTA
  • Gateway RTT
  • Glossary
  • ID and EUI Constraints
  • Last Activity
  • LoRa Basics Station Implementation Guide
  • LoRaWAN Backend Interfaces Interoperability
  • LoRaWAN Specification and Regional Parameters
  • Networking
  • Packet Broker Routing
  • Packet Forwarders
  • Purging Entities
  • Rate Limiting
  • Resource Limiting
  • Root Certificates
  • Telemetry
  • Tenant Management
  • Web UI Branding

Web UI Branding

This reference gives details on how to customize the branding of the login pages and the Console.

Cloud Branding

The Things Stack Cloud users can use a custom branding in The Things Stack Console. Branding customization is available for each The Things Stack Cloud tenant.

See below for what’s available to customize and what files are necessary. Users need to host these files on a CDN (e.g. an S3 bucket) and provide a link to it as shown in the Tenant Settings guide.

Title, Subtitle and Description

The title, subtitle and description of the login pages and the Console can be changed using configuration options. For details, see the Identity Server configuration reference and the Console configuration reference.

Logos

Logos of the web UI can be rebranded by pointing the Branding base URL in the Console (as described in Tenant Settings) to a location that contains the following files:

Filename Size Purpose
console-favicon.svg vector The SVG logo for the console that is shown in browser tabs and bookmarks
console-favicon.png multiple The fallback favicon logo for the console in PNG format; recommended size 32x32
console-favicon.ico multiple The fallback favicon logo for the console in ICO format; recommended size 32x32
console-og-image.png 1200x600 The logo for the console that is shown when sharing links on social media
console-touch-icon.png 400x400 The logo for the console that is shown mobile devices
claim-favicon.svg vector The SVG logo for the device claiming frontend that is shown in browser tabs and bookmarks
claim-favicon.png multiple The fallback favicon logo for the device claiming frontend in PNG format; recommended size 32x32
claim-favicon.ico multiple The fallback favicon logo for the device claiming frontend in ICO format; recommended size 32x32
claim-og-image.png 1200x600 The logo for the device claiming frontend that is shown when sharing links on social media
claim-touch-icon.png 400x400 The logo for the device claiming frontend that is shown mobile devices
logo.svg vector The logo for the console that is shown in the menu bar of the console
oauth-favicon.svg vector The SVG logo for the login pages that is shown in browser tabs and bookmarks
oauth-favicon.png multiple The fallback favicon logo for the login pages in PNG format; recommended size 32x32
oauth-favicon.ico multiple The fallback favicon logo for the login pages in ICO format; recommended size 32x32
oauth-og-image.png 1200x600 The logo for the login pages that is shown when sharing links on social media
oauth-touch-icon.png 400x400 The logo for the login pages that is shown mobile devices

If the Branding base URL option is set, the logo.svg is used to display a secondary logo next to the logo of The Things Stack for LoRaWAN. It is recommended to use a logo with a wide (e.g. 5:1) or square (1:1) aspect ratio. Tall logos (e.g. 1:5; height larger than width) will be displayed very small, due to the limited height of the header bar.

If you have your favicon as a PNG, use ImageMagick to convert it to ICO:

convert console-favicon.png \
    -define icon:auto-resize=64,48,32,16 \
    console-favicon.ico

For the additional info about configuration options required to set a custom branding, see the Identity Server configuration reference and the Console configuration reference.

Deployment Information and Disclaimers

It is possible to highlight some deployment information and disclaimers in the header of the web UIs. E.g. you can highlight an SLA that applies or a support tier that is connected with the deployment. Please see the respective sections in the Identity Server configuration reference and Console configuration reference.

← Tenant Management

On this page

  • Cloud Branding
  • Title, Subtitle and Description
  • Logos
  • Deployment Information and Disclaimers

The Things Stack

Getting Started

Devices

Gateways

Integrations

Reference

Contributing

GitHub

Forum

About Us

The Things Network

The Things Industries

About this page

Last changed by Nejra Selimović on 13 Apr 2022.
doc: Link to tenant settings -> branding options (#847)

Edit on Github