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

# Custom Branding

> Customize logos and branding assets in the Wazuh Dashboard

The Wazuh Dashboard supports custom branding to align the interface with your organization's visual identity. This guide explains how to replace logos and other branding assets.

## Overview

Custom branding allows you to:

* Replace the Dashboard loading logo
* Customize the header logo
* Set custom logos for the Wazuh application
* Brand PDF reports with custom headers and footers
* Support both light and dark mode themes

## Dashboard Loading and Header Logos

The Dashboard uses OpenSearch Dashboards branding configuration to customize the loading screen and header logos.

### Configuration

Edit the `opensearch_dashboards.yml` file to set custom branding URLs:

```yml theme={null}
opensearchDashboards.branding:
  loadingLogo:
    defaultUrl: 'https://domain.org/default-logo.png'
    darkModeUrl: 'https://domain.org/dark-mode-logo.png'
  mark:
    defaultUrl: 'https://domain.org/default-logo.png'
    darkModeUrl: 'https://domain.org/dark-mode-logo.png'
```

### Branding Parameters

**`loadingLogo.defaultUrl`**

URL to the logo displayed on the loading screen in light mode.

**`loadingLogo.darkModeUrl`**

URL to the logo displayed on the loading screen in dark mode.

**`mark.defaultUrl`**

URL to the logo displayed in the Dashboard header in light mode.

**`mark.darkModeUrl`**

URL to the logo displayed in the Dashboard header in dark mode.

### Logo Requirements

**File Format:** PNG, SVG, or JPG

**Recommended Dimensions:**

* Loading logo: 200px × 200px
* Header logo: 40px × 40px (height), variable width

**File Size:** Keep logos under 500KB for optimal loading performance

**Hosting:**

* Use publicly accessible URLs (HTTPS recommended)
* Alternatively, use local file paths or data URIs

### Apply Configuration

Restart the Wazuh Dashboard service after modifying the configuration:

```bash theme={null}
systemctl restart wazuh-dashboard
```

## Wazuh Application Custom Logos

The Wazuh application provides additional branding options for logos displayed within the application interface.

### Configuration Methods

#### Dashboard Management UI (Recommended)

If the App Settings UI is available in your build:

1. Navigate to **Dashboard management** > **App Settings**
2. Locate the **Custom branding** section
3. Configure the following properties:
   * `customization.logo.app`
   * `customization.logo.healthcheck`
   * `customization.logo.reports`
4. Upload or specify URLs for your custom logos
5. Apply the changes

### Logo Properties

**`customization.logo.app`**

Logo displayed in the main Wazuh application interface.

**Recommended dimensions:** 300px × 70px

**`customization.logo.healthcheck`**

Logo displayed on the health check screen.

**Recommended dimensions:** 300px × 70px

**`customization.logo.reports`**

Logo included in generated PDF reports.

**Recommended dimensions:** 190px × 40px (optimized for print)

### Asset Storage Location

Custom logo assets are stored in the following directory:

```
/usr/share/wazuh-dashboard/plugins/wazuh/public/assets/custom/images/
```

### File-Based Configuration (Deprecated)

**Note:** In-file `customization.logo.*` settings are deprecated. Use the Dashboard management UI to update these values when available.

If the App Settings UI is not present in your version, rely exclusively on the `opensearchDashboards.branding` settings in `opensearch_dashboards.yml`.

## PDF Reports Branding

Customize the branding elements that appear in generated PDF reports.

### Configuration

Configure PDF report branding through **Dashboard management** > **App Settings**:

**Logo:**

```
customization.logo.reports
```

**Footer:**

```
customization.reports.footer
```

**Header:**

```
customization.reports.header
```

### Report Branding Elements

**Report Logo**

The logo displayed at the top of PDF reports. Use the `customization.logo.reports` setting.

**Recommended specifications:**

* Format: PNG or SVG
* Dimensions: 190px × 40px
* Resolution: 150-300 DPI for print quality

**Report Header**

Custom text displayed in the report header. Use the `customization.reports.header` setting.

**Example:**

```
Organization Security Report
```

**Report Footer**

Custom text displayed in the report footer. Use the `customization.reports.footer` setting.

**Example:**

```
Confidential - For Internal Use Only
```

### Best Practices for Report Branding

1. **Print-Friendly Colors:** Use colors that render well in both digital and print formats
2. **High Resolution:** Provide high-resolution logos (at least 150 DPI)
3. **Simple Designs:** Logos with simple designs render better in PDF format
4. **Contrast:** Ensure sufficient contrast between text and background
5. **File Size:** Optimize images to keep PDF file sizes manageable

## Advanced Branding Options

### Using Local Files

Instead of hosting logos on an external server, you can use local file paths:

```yml theme={null}
opensearchDashboards.branding:
  loadingLogo:
    defaultUrl: 'file:///usr/share/wazuh-dashboard/assets/logo.png'
  mark:
    defaultUrl: 'file:///usr/share/wazuh-dashboard/assets/header-logo.png'
```

**Note:** Ensure the Wazuh Dashboard process has read permissions for the specified files.

### Using Data URIs

Embed logos directly in the configuration using base64-encoded data URIs:

```yml theme={null}
opensearchDashboards.branding:
  mark:
    defaultUrl: 'data:image/png;base64,iVBORw0KGgoAAAANS...'
```

**Generate data URI:**

```bash theme={null}
cat logo.png | base64 | tr -d '\n' | sed 's/^/data:image\/png;base64,/'
```

### Theme-Specific Logos

Provide different logos for light and dark themes to ensure optimal visibility:

**Light Mode Logo:**

* Use darker colors for contrast against light backgrounds
* Ensure logo elements are clearly visible

**Dark Mode Logo:**

* Use lighter colors or inverse versions
* May require a different color scheme or outline

## Branding Verification

### Check Configuration

Verify your branding configuration is correctly applied:

1. **Clear browser cache** to ensure you see the latest changes
2. **Test both themes** (light and dark mode)
3. **Generate a test report** to verify PDF branding
4. **Check health check screen** to verify health check logo

### Browser Developer Tools

Use browser developer tools to inspect logo loading:

1. Open browser developer console (F12)
2. Navigate to the Network tab
3. Filter by image requests
4. Verify custom logos are loading without errors
5. Check for 404 errors or CORS issues

## Troubleshooting

### Logo Not Displaying

**Possible Causes:**

1. Incorrect URL or file path
2. File permissions preventing access
3. CORS restrictions on external URLs
4. Browser caching old logos

**Solutions:**

1. Verify the URL or path is accessible
2. Check file permissions: `chmod 644 /path/to/logo.png`
3. Configure CORS headers if using external hosting
4. Clear browser cache and hard refresh (Ctrl+F5)
5. Check Dashboard logs for loading errors

### Logo Quality Issues

**Problem:** Logo appears blurry or pixelated

**Solutions:**

1. Use higher resolution images (2x or 3x for retina displays)
2. Use vector formats (SVG) when possible
3. Ensure image dimensions match recommended sizes
4. Avoid excessive scaling

### PDF Report Logos Not Appearing

**Solutions:**

1. Verify `customization.logo.reports` is configured
2. Ensure the logo file is accessible from the server
3. Check PDF generation logs for errors
4. Test with a simple, smaller logo file

### Dark Mode Logo Not Switching

**Solutions:**

1. Verify `darkModeUrl` is configured
2. Clear browser cache
3. Check that theme switching is working correctly
4. Ensure dark mode logo URL is accessible

## Security Considerations

1. **Use HTTPS:** Host logos on HTTPS URLs to avoid mixed content warnings
2. **File Permissions:** Restrict access to logo files to necessary users only
3. **External URLs:** Validate external logo URLs are from trusted sources
4. **File Size Limits:** Implement file size restrictions to prevent resource exhaustion
5. **Input Validation:** Sanitize logo URLs to prevent injection attacks

## Example Configurations

### Complete Branding Configuration

```yml theme={null}
opensearchDashboards.branding:
  useExpandedHeader: false
  loadingLogo:
    defaultUrl: 'https://assets.example.com/logos/loading-light.png'
    darkModeUrl: 'https://assets.example.com/logos/loading-dark.png'
  mark:
    defaultUrl: 'https://assets.example.com/logos/header-light.png'
    darkModeUrl: 'https://assets.example.com/logos/header-dark.png'
  applicationTitle: 'Organization Security Dashboard'
```

### Minimal Configuration

```yml theme={null}
opensearchDashboards.branding:
  mark:
    defaultUrl: 'https://example.com/logo.png'
```

## Related Documentation

For additional details and IdP-specific configurations, refer to the official Wazuh documentation:

* [Custom Branding Documentation](https://documentation.wazuh.com/current/user-manual/wazuh-dashboard/custom-branding.html)

## Related Topics

* [Plugin Settings](/configuration/settings)
* [Notifications and Alerting](/configuration/notifications-alerting)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.