Branding Your Status Page
Make your status page look like it belongs to your company. Add your logo, match your brand colors, and create a professional appearance that your users will recognize.
Accessing Branding Settings
- Go to Status Pages from the left menu
- Click on your status page
- You’ll find branding options in the Visual tab
Uploading Your Logo
Your logo appears at the top of your status page:
- Find the Logo section
- Click Upload or drag and drop an image
- Wait for the upload to complete
- Click Save
Logo Requirements
| Requirement | Recommendation |
|---|---|
| Format | PNG or SVG (transparent background works best) |
| Size | At least 200x200 pixels |
| File size | Under 2MB |
Show Logo Text
Toggle the Show logo text option to display your status page name next to the logo. This is helpful if:
- Your logo doesn’t include text
- You want to reinforce your brand name
- Your logo is an icon or symbol
Accent Color
The accent color is used for:
- Buttons and interactive elements
- Links and highlights
- Status indicators
To set your accent color:
- Click on the color picker
- Choose your brand’s primary color
- Or enter a hex code (like
#3B82F6) - Click Save
Tip: Use a color that contrasts well with both light and dark backgrounds.
Theme Options
Choose how your status page appears:
| Theme | Description |
|---|---|
| Light | White background with dark text |
| Dark | Dark background with light text |
| Auto | Matches the visitor’s system preference |
Most companies choose Auto so their page looks good for everyone.
Custom Favicon
The favicon is the small icon that appears in browser tabs. Upload your own to match your brand:
- Find the Favicon section
- Upload a square image (recommended: 32x32 or 64x64 pixels)
- PNG or ICO format works best
- Click Save
Preview Your Changes
Before saving, you can preview how your status page will look:
- Make your branding changes
- Click the Preview button
- See how visitors will experience your page
- Go back and adjust if needed
Branding Best Practices
| Do | Don’t |
|---|---|
| Use your official logo | Use a low-quality or pixelated image |
| Match your website’s colors | Use colors that clash with your logo |
| Keep it simple | Overcomplicate with too many elements |
| Test on mobile devices | Forget to check the mobile experience |