Logo Configuration – Adding Branding to Your Consent Banner

Adding your company logo to your cookie consent banner reinforces brand identity and builds trust with visitors. When users see your familiar brand mark alongside the consent request, it reassures them that this is a legitimate part of your website, not a third-party intrusion. DigiConsent provides flexible logo configuration options that let you seamlessly integrate your branding into the consent experience.

This comprehensive guide covers everything from uploading and positioning your logo to sizing, styling, and optimizing it for different devices and banner configurations.

Why Add a Logo to Your Consent Banner

Including your logo in the consent banner offers several important benefits:

Brand consistency: The logo makes the banner feel like an integrated part of your website rather than a generic popup
Trust building: Users are more likely to trust consent requests when they see your established brand identity
Recognition: Regular visitors immediately recognize your brand, creating familiarity
Professionalism: A branded banner demonstrates attention to detail and professional implementation
Differentiation: Your branded banner stands out from generic, unbranded cookie notices

However, logos should be used thoughtfully. On small mobile screens or in compact banner designs, logos can take up valuable space that might be better used for consent information. The key is finding the right balance for your specific design.

Preparing Your Logo

Before uploading your logo to DigiConsent, prepare it for optimal display in the consent banner.

Logo File Format

DigiConsent supports multiple image formats, each with different characteristics:

SVG (Scalable Vector Graphics) – Recommended:

Scales perfectly to any size without quality loss
Smallest file size for clean, simple logos
Looks crisp on high-DPI/Retina displays
Can be styled with CSS (colors can be changed)
Best for: Text-based logos, icon logos, geometric designs

PNG (Portable Network Graphics):

Supports transparency (important for logos on varied backgrounds)
Good quality for raster images
Larger file size than SVG
Looks good but may appear slightly soft on high-DPI displays unless using 2x version
Best for: Complex logos with gradients, photographic elements, or when SVG isn’t available

JPG/JPEG:

No transparency support (will have white or colored background)
Smaller file size with compression
Not recommended for logos unless transparency isn’t needed
Best for: Generally avoid for logos; PNG or SVG are better choices

Recommendation: Use SVG when possible for the best quality and performance. If your logo has complex effects that don’t work well in SVG, use PNG with transparency.

Logo Size and Dimensions

Prepare your logo at appropriate dimensions for banner display:

Recommended logo dimensions:

Height: 40-60px for typical banner display
Width: Proportional to height (depends on your logo shape)
Maximum: Don’t exceed 200px in either dimension

For SVG: Dimensions don’t matter as much since it scales perfectly, but ensure the viewBox is set correctly.

For PNG: Export at 2x the display size for Retina displays (e.g., if displaying at 50px height, export at 100px height).

Aspect ratio considerations:

Horizontal logos: Work well in most banner layouts (e.g., 200x50px)
Square logos: Compact and versatile (e.g., 60x60px)
Vertical logos: May take too much vertical space; consider using a horizontal variation

Logo File Optimization

Optimize your logo file for web performance:

For PNG files:

Use tools like TinyPNG or ImageOptim to compress without quality loss
Target file size under 50KB, preferably under 20KB
Remove unnecessary metadata

For SVG files:

Use SVGOMG or similar tools to remove unnecessary code
Remove hidden layers, unused groups, and editor-specific data
Simplify paths where possible
Target file size under 10KB

Smaller file sizes ensure your banner loads quickly, particularly important since it appears on every page of your site.

Logo Color Variations

Prepare logo variations for different banner backgrounds:

Full-color logo: Use on neutral (white/light gray) backgrounds

Dark logo: For light banner backgrounds

Light/white logo: For dark banner backgrounds

Monochrome logo: Single-color version that adapts to any background

Ensure your logo has sufficient contrast with the banner background. A full-color logo on white background might be perfect, but the same logo on a colored background might be illegible.

Uploading Your Logo

DigiConsent provides a simple interface for uploading and managing your banner logo.

Upload Methods

WordPress Media Library:

Navigate to DigiConsent settings
Find the Logo section
Click “Upload Logo” or “Select from Media Library”
Either upload a new file or choose from existing media
Select your logo and confirm

Direct URL:

If your logo is already hosted elsewhere, you can enter the direct URL. However, using the media library is recommended for better control and reliability.

Logo Preview

After uploading, DigiConsent typically shows a preview of how the logo will appear in your banner. This preview helps you:

Verify the logo displays correctly
Check sizing and proportions
Ensure colors and contrast work with your banner design
Confirm transparency is rendering properly

Always preview your logo in the actual banner on your live site before finalizing, as the preview may not perfectly represent all display contexts.

Logo Position and Placement

Where you position the logo within the banner affects both aesthetics and functionality.

Left Position

Placing the logo on the left side of the banner:

Advantages: Follows left-to-right reading pattern, logo is seen first, traditional placement
Best for: Horizontal banner layouts, Western audiences
Layout impact: Content (text and buttons) flows to the right of the logo

This is the most common logo placement and works well for most banner configurations.

Right Position

Placing the logo on the right side:

Advantages: Balances banner if buttons are on the left, creates unique layout
Best for: When you want content on the left, alternative design approach
Layout impact: Content flows to the left of the logo

Less common but can work well in specific designs, particularly when the banner text is left-aligned.

Center Position

Centering the logo in the banner:

Advantages: Creates symmetrical design, emphasizes brand
Best for: Modal/center-positioned banners, minimal text content
Layout impact: Content typically stacks below the logo

Works particularly well for center-positioned modal banners where you want the logo prominent at the top.

Top vs. Inline

Top placement: Logo appears above the banner content as a separate element

Creates clear visual separation
Works well with centered logos
Requires more vertical space

Inline placement: Logo sits inline with text and buttons in the same row

More compact, uses space efficiently
Better for horizontal layouts
May need to adjust on mobile (stack vertically)

Logo Sizing Configuration

Controlling logo size ensures it complements rather than overwhelms the banner content.

Fixed Size

Set an exact logo size in pixels:

Height: Typically 40-60px for desktop
Width: Auto (maintains aspect ratio) or set explicitly
Advantages: Precise control, consistent appearance
Disadvantages: May not scale ideally across all devices

Example configuration:

height: 48px;
width: auto;

Responsive Sizing

Use relative units for responsive sizing:

Percentage: Size relative to container (e.g., max-width: 150px, height: auto)
Em/Rem: Size relative to font size
Advantages: Adapts to different screen sizes automatically
Best practice: Set max-height to prevent logo from becoming too large

Example responsive configuration:

max-height: 50px;
max-width: 200px;
height: auto;
width: auto;

Mobile Adjustments

Logo sizing often needs adjustment for mobile devices:

Smaller size: Reduce logo size on mobile to preserve space for content

Desktop: 50px height
Mobile: 36-40px height

Alternative: Hide on mobile: If space is very limited, consider hiding the logo on small screens and showing it only on tablet/desktop

Prioritizes consent information over branding
Frees up valuable mobile real estate
Acceptable since users can still see your logo elsewhere on the page

Logo Styling Options

Beyond basic sizing and positioning, you can apply additional styling to integrate the logo with your banner design.

Spacing and Margins

Add space around the logo to prevent it from feeling cramped:

Right margin (left-positioned logo): 16-24px to separate from text

Left margin (right-positioned logo): 16-24px

Bottom margin (top-positioned logo): 12-20px to separate from content below

Adequate spacing ensures the logo breathes and doesn’t clash with text and buttons.

Opacity and Filters

Adjust logo appearance to match banner aesthetics:

Opacity: Reduce opacity (e.g., 80-90%) for a subtle, integrated look

opacity: 0.85;

Grayscale: Convert colorful logos to grayscale for minimal designs

filter: grayscale(100%);

Brightness: Lighten or darken the logo to match banner tone

filter: brightness(1.2); /* Lighter */
filter: brightness(0.8); /* Darker */

Use filters sparingly. Your logo was designed with specific colors for brand recognition, so significant alterations should be considered carefully.

Background and Padding

Add a background container to make the logo stand out:

Background color: Place logo on a contrasting background square/circle

background: white;
padding: 8px;
border-radius: 4px;

When to use: When your banner background color doesn’t provide enough contrast with your logo

Logo Link Configuration

Make your logo clickable to enhance functionality:

Link to Homepage

The most common configuration is linking the logo to your homepage:

Provides familiar navigation pattern (logos typically go to homepage)
Gives users a way to start fresh if they’re confused
Reinforces brand identity

Link to Privacy Policy

Alternatively, link to your privacy policy:

Contextually relevant to the consent banner
Provides quick access to detailed privacy information
Less conventional but logical in this context

No Link

Keep the logo as a static image without a link:

Simplifies the banner interface
Prevents accidental clicks that navigate away
Acceptable when logo serves purely decorative/branding purpose

Design Considerations

When integrating a logo into your banner, consider these design factors:

Visual Balance

The logo should complement, not dominate, the banner:

Proportion: Logo should not exceed 30% of the banner’s total visual weight
Alignment: Vertically center the logo with text or buttons for balance
Symmetry: If using a centered layout, ensure logo placement creates visual symmetry

Readability Priority

Consent information is legally required; the logo is optional enhancement:

Never let the logo obscure or crowd the consent text
If space is limited, reduce logo size or hide it
Prioritize button accessibility over logo prominence

Mobile Prioritization

Mobile screens have limited space:

Consider whether logo adds value on a 320px-wide screen
May be better to hide logo on mobile and show only on tablet/desktop
If keeping logo on mobile, make it significantly smaller
Test thoroughly on actual mobile devices, not just browser dev tools

Common Logo Configurations

Configuration 1: Left-Aligned Classic

Position: Left
Size: 48px height (desktop), 36px (mobile)
Margin: 20px right margin
Vertical alignment: Center with text
Best for: Traditional horizontal banners

Configuration 2: Centered Modal

Position: Top center
Size: 60px height
Margin: 16px bottom margin
Alignment: Centered above content
Best for: Center-positioned modal banners

Configuration 3: Minimal Mobile-Hidden

Position: Left (desktop only)
Size: 44px height
Display: Hidden on screens below 768px
Best for: Content-heavy banners where mobile space is precious

Accessibility Considerations

Ensure your logo implementation is accessible:

Alt text: Provide descriptive alt text (e.g., “CompanyName logo”)
Contrast: Ensure sufficient contrast between logo and background
Focus state: If logo is clickable, ensure it has a visible focus state for keyboard navigation
Screen readers: Logo should not interfere with screen reader navigation of consent options

Configuring Logo in DigiConsent

To configure your logo in DigiConsent:

Navigate to DigiConsent > Settings > Logo
Click Upload Logo or Select from Media Library
Choose your optimized logo file (SVG or PNG recommended)
Set Logo Position (left, right, center, top)
Configure Logo Size (height in pixels)
Set Logo Margin to create spacing around the logo
Optionally add Logo Link URL to make it clickable
Configure Mobile Logo Settings (size or hide on mobile)
Set Alt Text for accessibility
Save settings and preview on your live site
Test across devices, especially mobile phones

Testing Your Logo Configuration

After configuring your logo, thoroughly test it:

Visual check: Does the logo display clearly and at the correct size?
Proportion test: Is the logo appropriately sized relative to text and buttons?
Contrast test: Is the logo visible against the banner background?
Mobile test: How does the logo look and fit on small screens?
Link test: If clickable, does the logo link to the correct destination?
Retina test: Does the logo look sharp on high-DPI displays?
Load test: Does the logo load quickly without delaying banner appearance?

A well-configured logo enhances your consent banner by reinforcing brand identity and building user trust. By preparing an optimized logo file, positioning it thoughtfully within your banner layout, and testing across devices, you create a professional, branded consent experience that feels like a natural part of your website.