Branding
BugPin supports full branding customization, allowing teams to replace the default logo, icon, and favicon with their own assets. Separate assets can be uploaded for light and dark modes. All branding settings are configured in Settings → Branding in the Admin Console.
Light and Dark Mode
BugPin supports separate branding assets for light and dark modes. This ensures your logo and icons look great regardless of the user's theme preference.
- Light Mode: Used when the system/browser is in light mode
- Dark Mode: Used when the system/browser is in dark mode
Logo
The main logo appears in the sidebar when expanded and in email templates.
| Requirement | Value |
|---|---|
| Formats | SVG, PNG, JPEG, WebP |
| Max size | 2MB |
| Recommended | SVG for best quality at any size |
Tips
- Use a horizontal logo that works well in the sidebar
- Ensure sufficient contrast against the background (white for light mode, dark for dark mode)
- SVG format is recommended for crisp display at any resolution
Icon
The icon appears in the sidebar when collapsed (icon-only mode).
| Requirement | Value |
|---|---|
| Formats | PNG, JPEG, WebP |
| Max size | 1MB |
| Output | Auto-resized to 256×256px |
Tips
- Upload a square image for best results
- Non-square images will be center-cropped
- Use a simplified version of your logo that's recognizable at small sizes
Favicon
The favicon appears in browser tabs, bookmarks, and mobile home screens. Upload a single high-resolution image and BugPin automatically generates all required sizes.
| Requirement | Value |
|---|---|
| Formats | PNG, JPEG |
| Minimum size | 512×512px |
| Max file size | 1MB |
Auto-Generated Sizes
When you upload a favicon, BugPin automatically creates:
| File | Size | Usage |
|---|---|---|
favicon.ico | Multi-size | Browser tabs (legacy) |
apple-touch-icon.png | 180×180px | iOS home screen |
android-chrome-192x192.png | 192×192px | Android home screen |
android-chrome-512x512.png | 512×512px | Android PWA splash screen |
Tips
- Start with a 512×512px or larger square image
- Use a simple, recognizable icon
- Test how it looks at small sizes (16×16px) before uploading
Resetting to Defaults
Each branding element can be reset individually:
- Click on the branding element you want to reset
- Click Reset to Default in the dialog
- The default BugPin branding will be restored
Theme Colors
In addition to logos and icons, you can customize:
- Primary brand color: Used throughout the admin UI
- Navigation colors: Sidebar background and text colors
- Button colors: Primary action button styling
- Widget colors: Colors used in the feedback widget
All color settings accept hex color codes (e.g., #6366f1).