We’ve migrated our documentation to a new site, which means some URLs have changed.
Subscriptions
Subscriptions
Breadcrumbs

How do I customize logos, favicons, and registration-only images in Piano Identity Management templates?

1. How the logo appears on Identity Management screens

The logo on Identity Management screens is rendered by <img class="logo" appLogo> in the Identity Management Layout template. The appLogo directive automatically populates the src from the Edit Business logo setting.

The same Layout serves login, registration, password reset, and other Identity Management screens. A separate logo is shown inside checkout (the business logo set at the app level).

Source of truth is Edit Business:

  1. From the dashboard home, click Edit Business.

  2. Scroll to the logo section.

  3. Upload your new logo. Recommended format/size: 400×400px SVG.

This logo is consumed by <img class="logo" appLogo> in Identity Management Layout, and also used on the checkout screen.

To set the logo URL directly in the template (overriding appLogo):

  1. Open Manage → Templates → Identity Management Layout (HTML tab).

  2. Find <img class="logo" appLogo>.

  3. Replace with <img class="logo">.

  4. In the CSS tab, on .logo, add a background-image referencing your logo URL:

css .logo { background-image: url('https://your-cdn/logo.svg'); }

To set the logo via direct src, replace the image URL in the HTML (typically near the top of the Identity Management Layout template). Use the full URL.

3. Style the logo (border, spacing, size)

The default .logo CSS in Identity Management Layout is:

.logo {
  padding-top: 40px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 16px;
}

To remove the border around the logo, remove:

border: 1px solid rgba(0, 0, 0, 0.06);

To remove the whitespace above the logo, remove:

padding-top: 40px;

To prevent the logo from being cut off in a constrained container:

.logo {
  background-size: contain;
  background-repeat: no-repeat;
  width: 120px;
  height: 60px;
}

Hide globally (all Identity Management templates)

In Identity Management Layout → CSS:

.logo { display: none; }

Hide only inside checkout

For a single-step checkout, replace hideIfCheckoutForm with hideIfInsideCheckout on the logo's pane in Identity Management Layout:

<!-- Before -->
<div class="pane" hideIfCheckoutForm>
  <img class="logo" appLogo>
</div>

<!-- After (single-step checkout) -->
<div class="pane" hideIfInsideCheckout>
  <img class="logo" appLogo>
</div>

The logo is still shown when login opens outside of checkout. The inverse showIfInsideCheckout renders alternative content only inside checkout.

The logo on the checkout screen is the business logo set at the app level (separate from the Identity Management Layout logo). To change it:

  1. From the dashboard home, click Edit Business.

  2. Scroll to the logo section and update it.

6. Show a registration-only image

  1. Remove the image from the shared Layout so it doesn't leak to login or password reset.

  2. Edit the Piano ID register page template:

    • Manage → Templates → Piano ID register page, duplicate, edit.

    • Add the image, e.g. below the existing logo:

html <header> <language-selector></language-selector> <div class="pane"> <img class="logo" appLogo> </div> <div class="pane"> <img src="https://assets.rbl.ms/" alt="Registration Image" class="registration-only-image"> </div> </header> 

  • Style:

html <style> .registration-only-image { max-width: 160px; margin-top: 12px; } </style> 

  • Save and publish.

  • Verify in registration / login / password reset flows. Use private browsing to avoid cached template versions.

Alternative: keep the image in the shared Layout and gate it via conditional rendering for the register screen. Direct placement in the register template is simpler.

7. Change the favicon 

<custom-script>
function setFavicon(url) {
  const existingFavicon = document.querySelector('link[rel="icon"]');
  if (existingFavicon) {
    document.head.removeChild(existingFavicon);
  }
  const link = document.createElement('link');
  link.rel = 'icon';
  link.href = url;
  document.head.appendChild(link);
}
setFavicon('https://your-cdn-url/favicon.ico');
</custom-script>

Ensure the CDN allows the request origin and the URL points to a valid favicon. Validated in production.

8. Troubleshooting logo display

Logo missing on registration / login

  1. Confirm a logo is uploaded in Edit Business (correct format, e.g. 400×400 SVG).

  2. Open browser dev tools - look for "image not found" or CORS errors.

  3. Use the full URL in the src attribute.

  4. Confirm you're editing the right template - the source is the Edit Business setting that Identity Management Layout consumes via appLogo unless explicitly overridden.

  5. If overriding manually, confirm the URL is reachable from the user's browser (HTTPS, no CORS).

Externally-hosted logo not displaying

  • Verify URL is correct and accessible.

  • Use full HTTPS URL.

  • Confirm CDN permits cross-origin requests from Identity Management domains.

Logo appears cut off

  • Check the template's width / height on .logo.

  • Add background-size: contain (see Section 3).

  • Adjust dimensions to your logo's aspect ratio.

Template list pagination tip

When sorting templates by Updated date, the relevant template may be on a later page even if the current page appears to have space - switch pages if it's not visible.

Last updated: