Display a larger, high-resolution logo in the Cookiebot banner (CSS)

Overview

If you want your logo to appear larger or in a higher resolution than the default logo area of the Cookiebot banner, you can host the image on your own website and display it with CSS. This gives you full control over the logo’s file, size, and shape.

⚠️Note: Custom CSS is outside the scope of standard support. The element IDs used below may change in future banner updates, so test the result after each banner update.

Before you begin

• You need access to your website’s global CSS or the <head> section of your pages.
• Prepare your logo as a high-resolution image in its natural shape (for example, rectangular, not padded to a square).
• Host the image on your own website and note its full HTTPS URL.

Steps

1. Upload your logo file to your web server and copy its URL.

2. Add the following code to your website so it loads on every page, for example at the end of the <head> section:

   <style>
    /* Hide the default logo */
    #CybotCookiebotDialogPoweredbyCybot {
      display: none !important;
    }
    /* Show your custom logo */
    #CybotCookiebotDialogPoweredbyImage {
      content: url("https://yourdomain.com/path/to/your-logo.png") !important;
      display: block !important;
      width: 90px !important;
      height: auto !important;
      max-width: none !important;
      max-height: none !important;
    }
   </style>

3. Replace the URL with the address of your own logo.
4. Set the width value to the display size you want. Keep height set to auto so the logo keeps its proportions.
5. Save, clear your cache, and reload your website to check the banner.

Tips

• For a crisp result on high-density screens, use an image at roughly twice the display size.
• If you see empty space above or below the logo, crop the image to the logo’s actual shape.
• This code goes on your website, not in the Cookiebot Admin.

Troubleshooting

• The previous logo still shows: Clear your cache and check that the code loads on every page.
• The logo doesn’t appear: Check that the image URL is correct and opens in a browser.