Branding

Branding allows you to customize the visual appearance of your Legend instance by uploading your organization’s logo and favicons. This helps users immediately recognize that they’re using your organization’s Legend deployment and creates a more professional, integrated experience.

Accessing Branding Settings

To access branding settings:

1. Click your user menu in the top-right corner
2. Select Admin Panel from the dropdown
3. Click Branding in the admin sidebar

Only users in the Admins group can access branding settings.

Tier Requirements

Starter Custom logo upload requires the Starter tier or above.

Business Custom favicon upload requires the Business tier.

Community tier users cannot upload custom branding assets. The default Legend logo and favicons are displayed for Community tier instances.

If you attempt to access branding features on a tier that doesn’t support them, you’ll see a message indicating the required tier and a link to upgrade your license.

Custom Logo

The custom logo appears in the top-left corner of the Legend interface, next to the “Legend” text. It’s displayed on:

• The main dashboard
• The admin panel
• The login page
• Email notifications (when applicable)

Logo Specifications

Supported formats:

• SVG (recommended for scalability)
• PNG (with transparent background)
• WebP (modern format with good compression)

Recommended dimensions:

• Width: 200-400 pixels
• Height: 40-80 pixels
• Aspect ratio: Approximately 4:1 to 5:1

File size limit: 500 KB

SVG is the recommended format because it scales perfectly at any size and typically has a smaller file size. If you don’t have an SVG version of your logo, use PNG with a transparent background.

Uploading a Custom Logo

To upload a custom logo:

1. Navigate to Admin Panel > Branding
2. In the Logo section, click Choose File or drag and drop your logo file
3. Select a file that meets the specifications above
4. Click Upload to save the logo
5. The logo is immediately displayed in the interface

The upload process validates the file format, size, and dimensions. If the file doesn’t meet the requirements, you’ll see an error message explaining the issue.

Previewing the Logo

After uploading, the logo appears in the preview section of the branding page. You can see how it looks in:

• Light mode
• Dark mode (if your theme supports it)
• Different screen sizes

If the logo doesn’t look right, you can upload a different version or remove it to return to the default Legend logo.

Removing the Custom Logo

To remove your custom logo and return to the default:

1. Navigate to Admin Panel > Branding
2. In the Logo section, click Remove Logo
3. Confirm the removal
4. The default Legend logo is restored immediately

Removing the logo does not delete the uploaded file from your server, but it will no longer be displayed in the interface.

Custom Favicons

Favicons are the small icons that appear in browser tabs, bookmarks, and mobile home screens. Legend supports multiple favicon sizes to ensure proper display across different devices and browsers.

Favicon Specifications

Legend requires three favicon sizes:

16x16 pixels:

• Used in browser tabs
• Displayed next to the page title
• Smallest favicon size

32x32 pixels:

• Used in browser bookmarks
• Displayed in bookmark bars
• Standard favicon size

180x180 pixels:

• Used for Apple touch icons
• Displayed on iOS home screens
• Largest favicon size

Supported formats:

• PNG (recommended for all sizes)
• ICO (legacy format, not recommended)

File size limit: 100 KB per favicon

Uploading Custom Favicons

To upload custom favicons:

1. Navigate to Admin Panel > Branding
2. In the Favicons section, you’ll see three upload areas for each size
3. For each size (16x16, 32x32, 180x180):
   • Click Choose File or drag and drop your favicon file
   • Select a file that matches the required dimensions
   • Click Upload to save the favicon
4. All three favicons must be uploaded for the custom branding to take effect

If you only upload some of the required favicon sizes, the missing sizes will use the default Legend favicons. For a consistent experience, upload all three sizes.

Previewing Favicons

After uploading, the favicons appear in the preview section of the branding page. You can see how they look in:

• Browser tab (16x16)
• Bookmark (32x32)
• Mobile home screen (180x180)

If the favicons don’t look right at different sizes, you may need to create versions optimized for each size. A logo that looks good at 180x180 might not be recognizable at 16x16.

Removing Custom Favicons

To remove your custom favicons and return to the default:

1. Navigate to Admin Panel > Branding
2. In the Favicons section, click Remove All Favicons
3. Confirm the removal
4. The default Legend favicons are restored immediately

You can also remove individual favicon sizes by clicking the Remove button next to each size.

Cache Behavior

Branding assets are cached by browsers to improve performance. This means:

When you upload new branding:

• The changes take effect immediately for new page loads
• Users with cached pages may see the old branding until they refresh
• Browser cache typically expires within 24 hours

To force a cache refresh:

• Instruct users to perform a hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
• Or wait for the cache to expire naturally

For development and testing:

• Use an incognito or private browsing window to bypass the cache
• Or disable caching in your browser’s developer tools

Best Practices

Logo Design:

• Use a simplified version of your logo that’s recognizable at small sizes
• Ensure good contrast against both light and dark backgrounds
• Avoid fine details that may be lost at small sizes
• Test the logo at different sizes before uploading

Favicon Design:

• Create a simplified icon that’s recognizable at 16x16 pixels
• Use a square aspect ratio for all favicon sizes
• Consider using a monogram or simplified logo mark
• Test favicons in actual browser tabs before uploading

File Optimization:

• Compress images to reduce file size without losing quality
• Use SVG when possible for logos
• Use PNG with appropriate compression for favicons
• Remove unnecessary metadata from image files

Consistency:

• Ensure your logo and favicons use consistent branding
• Match your organization’s visual identity guidelines
• Consider how the branding looks in both light and dark modes
• Test across different browsers and devices

Tier Upgrade

If you’re on the Community tier and want to use custom branding, you’ll need to upgrade to the Starter tier (for custom logo) or Business tier (for custom favicons).

To upgrade your license:

1. Navigate to Admin Panel > License
2. Click Upgrade License
3. Enter your new license key
4. Click Apply to activate the new tier

Once upgraded, branding features become immediately available.

Troubleshooting

Cannot upload logo or favicons:

• Verify you have the required license tier
• Check that the file format is supported (SVG, PNG, or WebP)
• Ensure the file size is within the limit
• Verify the dimensions match the requirements

Logo or favicons not displaying:

• Refresh the browser cache (hard refresh)
• Verify the files were uploaded successfully
• Check that the files are not corrupted
• Try uploading the files again

Logo looks blurry or pixelated:

• Upload a higher resolution version
• Use SVG format for better scalability
• Ensure the logo is optimized for the display size

Favicons not showing in browser tabs:

• Perform a hard refresh to clear the cache
• Verify all three favicon sizes are uploaded
• Check that the favicon files are not corrupted
• Try a different browser to isolate the issue

Next Steps

After configuring branding, proceed to Single Sign-On (OIDC) to configure authentication, or License Management to manage your Legend license.