Skip to main content
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: 
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: 
systemctl restart wazuh-dashboard

​
Wazuh Application Custom Logos

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

​
Configuration Methods

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: 
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: 
opensearchDashboards.branding:
  mark:
    defaultUrl: 'data:image/png;base64,iVBORw0KGgoAAAANS...'
Generate data URI: 
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

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

opensearchDashboards.branding:
  mark:
    defaultUrl: 'https://example.com/logo.png'
For additional details and IdP-specific configurations, refer to the official Wazuh documentation:

Build docs developers (and LLMs) love

Get started for freeTalk to us