Apply your organization’s branding to the dashboard

Apply custom branding images to the OpenShift Dev Spaces dashboard by overriding the default images in the assets/branding directory, so that the dashboard reflects your organization’s visual identity.

Before you begin

You have an active oc session with administrative permissions to the OpenShift cluster. See This page is not included, but the link has been rewritten to point to the nearest parent document.Getting started with the CLI.

About this task

The following images can be customized:

che-logo.svg: the logo displayed in the dashboard header.
loader.svg: the loader icon displayed during dashboard loading. The loader image supports the following formats, in priority order: jpg, jpeg, png, gif, webp, svg. The svg format is used as the default fallback.
favicon.ico: the browser tab icon.

Procedure

Create a Secret that mounts custom branding images into the dashboard:
```
oc apply -f - <<EOF
apiVersion: v1
kind: Secret
metadata:
  name: devspaces-dashboard-customization
  namespace: openshift-devspaces
  annotations:
    che.eclipse.org/mount-as: subpath
    che.eclipse.org/mount-path: /public/dashboard/assets/branding
  labels:
    app.kubernetes.io/component: devspaces-dashboard-secret
    app.kubernetes.io/part-of: che.eclipse.org
data:
  che-logo.svg: <Base64_encoded_content_of_the_image>
  loader.svg: <Base64_encoded_content_of_the_image>
  favicon.ico: <Base64_encoded_content_of_the_image>
type: Opaque
EOF
```
where:

che-logo.svg

The dashboard logo. Replace the value with the Base64-encoded content of your custom logo with disabled line wrapping.

loader.svg

The loader icon. Replace loader.svg with the filename matching your image format (for example, loader.png, loader.webp). The value is the Base64-encoded content of the image with disabled line wrapping.

favicon.ico

The favicon. The value is the Base64-encoded content of the .ico file with disabled line wrapping.

Note:

You can override one or all images from the /public/dashboard/assets/branding directory in the dashboard pod. Only the images specified in the Secret data section are overridden. Unspecified images remain unchanged.

Verify that the rollout completes:

$ oc rollout status deployment/devspaces-dashboard -n openshift-devspaces

Results

Open the OpenShift Dev Spaces dashboard in a browser and confirm that the custom branding images are displayed.