Overview
The CloudRadial Unified Client Portal (UCP) has several image slots, and each one appears on a different background. A logo that looks right in one slot can be invisible in another — not because the image is wrong, but because it was made for a different background.
This article lists every slot, says where it appears, and explains the two rules the portal uses to choose between logo variants.
- Every Image Slot at a Glance
- The Title Bar Logos
- The Home Page Logo
- Favicons and Desktop Icons
- Email and Log In Images
- Client-Level Images
- Choosing Images That Work Everywhere
Every Image Slot at a Glance
All of these are set under Partner > Settings > Account & Branding > Branding, except the desktop icons.
| Slot | Where it appears | Size | Changes with light/dark? |
|---|---|---|---|
| Logo for Dark Backgrounds | Title bar, when your bar color is dark | 150 x 26 | No — follows the bar color |
| Logo for Light Backgrounds | Title bar, when your bar color is light | 150 x 26 | No — follows the bar color |
| Home Page Logo (Light Mode) | Top of Search Home, Support Home and Chat Home | Up to 80 tall | Yes |
| Home Page Logo (Dark Mode) | The same three pages, in dark mode | Up to 80 tall | Yes — CloudRadial Fluent only |
| FavIcon 16x16 ICO | Browser tab | 16 x 16 | No |
| FavIcon 32x32 / 144x144 / 180x180 / 512x512 PNG | Browser tab, bookmarks, installed portal icon | As named | No |
| Email Logo | Top of portal emails | 240 x 50-90 | No — emails are always light |
| Log In Portal Logo | Above the log in options | 240 x 50-90 | No |
| Log In Background Wallpaper | Behind the log in screen | 1280 x 800 or larger | No |
| Desktop icon (256x256 PNG) | Desktop application icon | 256 x 256 | No |
| Desktop small icon (32x32 PNG) | Inside the desktop application | 32 x 32 | No |
Only two of these have a light-mode and a dark-mode variant, and they are the pair on the home page. Everything else has one image.
The Title Bar Logos
You upload two title-bar logos: one drawn for dark backgrounds (light ink) and one drawn for light backgrounds (dark ink).
The portal picks between them from your bar color, not from light or dark mode. It measures how light or dark your bar color is and shows whichever logo will read against it. A dark navy bar gets the light-ink logo; a white or pale bar gets the dark-ink logo.
This is why the title-bar logos have no light/dark split on the Branding tab, and why they span both columns there: your bar color is the same in both modes unless you set a dark Bar Color, so the logo choice is the same too.
Upload both. If you change your bar color later — or set a dark Bar Color that sits on the other side of the line — the portal switches to the other logo without you doing anything, provided it is there.
Size. The title bar scales a logo down to fit 150 wide by 26 tall, and to 100 by 18 on small screens. Supply an image at or near that shape. A tall square logo will be scaled until its height fits and end up very small.
The Home Page Logo
The Home Page logo appears at the top of Search Home, Support Home and Chat Home — whichever of those your portal opens on. It sits on the portal's page background, and that background is the thing that flips between modes: near-white in light mode, near-black in dark.
That is why this slot, and only this slot, has two variants. A wordmark drawn in white ink on a transparent background looks correct on a dark title bar and then disappears completely on the light home page. The reverse is just as true — a dark-ink logo vanishes on the dark home page.
The dark Home Page logo works on CloudRadial Fluent only. Legacy themes have a single fixed background, so they always show the light-mode logo even if a dark one has been uploaded. If you are preparing to move to Fluent you can upload it in advance; it simply does nothing until you switch.
If you upload only one, it is used in both modes. The portal will not leave the space empty. So if you have set only a dark-mode logo, you will see it in light mode too — that is expected, and the fix is to upload the light-mode one.
Size. The home page scales a logo down to 80 pixels tall. Width is unconstrained, so a wide wordmark works well here — but supply it at roughly the size it will be shown, not a full-resolution print asset.
Favicons and Desktop Icons
Favicons are the small icons in the browser tab, in bookmarks, and on a phone or desktop home screen when someone installs the portal. Five images cover the range: a 16x16 ICO plus 32x32, 144x144, 180x180 and 512x512 PNGs.
Favicons and desktop icons are set at the partner level only. They are not part of client-level branding — a client with its own custom domain and its own logos still gets your favicon. There is no per-client override.
The desktop application icons are set separately, under Partner > Settings > Desktop Application: a 256x256 PNG used to generate the desktop icon, and a 32x32 PNG used inside the application.
Full detail, including how to clear a cached favicon, is in Setting the Client Portal Favicons.
Email and Log In Images
The Email Logo sits at the top of portal emails, on a white background. Emails have no dark mode, so there is one image and it should be drawn for a light background. Recommended size is 240 wide by 50-90 tall.
The Log In Portal Logo appears above the log in options, and the Log In Background Wallpaper sits behind the whole screen. The log in screen does not follow a user's theme — nobody has signed in yet, so the portal does not know who they are or what they chose. Treat both as light-background images. Recommended sizes are 240 x 50-90 for the logo and 1280 x 800 or larger for the wallpaper.
Client-Level Images
When you turn on Apply custom branding for this company? on a client, that client can have its own title-bar logos, its own Home Page logos (both variants), its own Email Logo, and — if the client has a custom domain — its own Log In logo and wallpaper.
Two things to know:
- Favicons and desktop icons are not included. As above, those are partner-level only.
- If a client has only one title-bar logo, that image is used in both title-bar positions for that client. It does not fall back to your partner-level logo. Upload both variants for a client, or accept that one of them may be hard to read.
See About Client-Level Branding.
Choosing Images That Work Everywhere
- Transparent PNG or SVG, sized close to the display size. Every slot scales down, none scales up well.
- Know which ink your logo is drawn in. Most "my logo looks wrong" cases are a light-ink image in a light-background slot, or the reverse. Look at the preview tile on the Branding tab before you save — the Title Bar tiles show your real logo on your real bar color, and the Home Page tiles show it on the real page background for each mode.
- For favicons and desktop icons, a multi-color mark on a transparent background is safest. A single-color mark disappears against half the desktops it lands on. If your mark is one color, put it on a solid shape.
- Check the home page in both modes after you upload. It is the one surface that changes underneath the image, and it is the one people notice.
Related
- Setting Themes for Branding in CloudRadial UCP — the Branding tab, control by control
- About the CloudRadial Fluent Theme — what Fluent is and what it gives your users
- Setting the Client Portal Favicons
- About Client-Level Branding
If you are still having trouble, we're here to help!
Submit a ticket here for assistance, and don't forget to check our status page to ensure there are no outages in your area.
Comments
0 comments
Please sign in to leave a comment.