Logo & Favicon Options

BuddyX Pro provides comprehensive logo customization options to help you establish your brand identity. Configure primary logos, dark mode alternatives, mobile versions, and site icons (favicons) to create a cohesive visual experience across all devices and color schemes.

Logo and favicon configuration in Site Identity

Accessing Logo Settings

Go to Appearance > Customize in your WordPress admin
Click on Site Identity in the customizer panel
Logo options appear after the site title and tagline settings

What You Can Do

BuddyX Pro’s logo system gives you complete control over your branding:

Upload and configure your primary logo
Adjust logo size for optimal display (150-300px)
Set a separate dark mode logo that appears automatically when dark mode is active
Upload a mobile-specific logo for better display on small screens
Configure your site icon (favicon) for browser tabs and bookmarks
Use different logo formats (SVG, PNG, JPG) based on your needs
Optimize logos for retina/high-DPI displays

Primary Logo Settings

Logo Upload

Upload your main logo that appears in the header across your website.

Setting	Description	Default
Logo	Primary logo image file	None
Supported Formats	PNG, SVG, JPG, WebP	–
Upload Location	Site Identity > Logo	–

How to Upload:

Click Select Logo button
Choose Upload Files or select from Media Library
Click Select to apply the logo
Use Skip Cropping to maintain original dimensions

Logo Size Control

Adjust your logo’s display width on desktop screens.

Setting	Description	Default
Logo Size	Desktop logo width	150px
Minimum	Smallest allowed width	150px
Maximum	Largest allowed width	300px
Adjustment	1px increments via slider	–

Sizing Best Practices:

Start at 150px and adjust upward for visibility
Consider your logo’s aspect ratio when sizing
Test at different screen sizes to ensure clarity
Balance logo size with available header space
Larger sizes work better for text-based logos

Example Sizes by Use Case:

Logo Type	Recommended Size	Notes
Icon/Symbol	150-180px	Simple marks need less space
Text Logo	180-220px	Ensure text readability
Combination Mark	200-250px	Balance icon and text
Wide Horizontal	250-300px	Use max space available

Dark Mode Logo

When dark mode is enabled, BuddyX Pro automatically switches to an alternate logo optimized for dark backgrounds.

Setting	Description	Location
Dark Mode Logo	Alternate logo for dark theme	Site Identity (below primary logo)
Automatic Switching	Changes based on user’s color mode	Automatic
Same Size Setting	Uses primary Logo Size setting	–

When to Use Dark Mode Logo:

Your primary logo has dark text that’s invisible on dark backgrounds
Your logo uses colors that clash with dark mode color scheme
You want brand consistency across both light and dark themes
Your logo includes shadows or effects designed for light backgrounds

Design Tips for Dark Mode Logos:

Use light or white text instead of dark
Increase contrast between logo elements
Consider simplified versions with better visibility
Test against actual dark mode background colors
Maintain brand recognition despite color changes

Common Approaches:

Inverted Colors: Swap dark text for light text
Outlined Version: Use outline logo on dark backgrounds
Alternative Colorway: Brand-approved dark theme colors
Simplified Mark: Simpler version optimized for dark

Site Icon (Favicon)

The site icon appears in browser tabs, bookmarks, mobile home screens, and various browser interfaces.

Setting	Description	Requirements
Site Icon	Square favicon image	512x512px minimum
Format	PNG recommended	Must be square
Location	Site Identity > Site Icon	WordPress native

Site Icon Requirements:

Dimensions: Exactly square (1:1 aspect ratio)
Minimum Size: 512 x 512 pixels
Recommended Format: PNG with transparency
Design: Simple, recognizable at small sizes
File Size: Under 100KB for fast loading

Where Your Site Icon Appears:

Location	Size Displayed	Notes
Browser Tabs	16×16 or 32x32px	Tiny, needs to be simple
Bookmark Bars	16x16px	Same as tabs
Mobile Home Screen	180x180px	iOS web clips
Windows Taskbar	32x32px	Pinned sites
Android Home	192x192px	Add to home screen
RSS Feed Readers	64x64px	Feed icons
Search Suggestions	Varies	Browser-dependent

Design Best Practices:

Keep It Simple: Should work at 16x16px
High Contrast: Clear against browser backgrounds
Brand Recognition: Use primary brand element
No Text: Text becomes illegible at small sizes
Center Focus: Important elements in center
Test at Scale: View at actual browser tab size

Recommended Logo Sizes by Use Case

Business Website

Primary Logo:

Desktop Width: 180-200px
Original File: 400px wide (2x for retina)
Format: PNG with transparency or SVG
Aspect Ratio: 3:1 horizontal

Dark Mode Logo:

Same dimensions as primary
Light text on transparent background

Site Icon:

512x512px PNG
Simple icon or letter mark

Community Platform

Primary Logo:

Desktop Width: 200-220px
Original File: 500px wide
Format: SVG preferred (scales perfectly)
Aspect Ratio: 4:1 or wider

Dark Mode Logo:

Essential for community sites with dark mode toggle

Site Icon:

Community symbol or first letter
512x512px with good contrast

E-Commerce Site

Primary Logo:

Desktop Width: 150-180px (leaves space for cart icon)
Original File: 400px wide
Format: PNG or SVG
Aspect Ratio: 2.5:1

Dark Mode Logo:

Optional, unless using dark theme

Mobile Logo:

Recommended: Square icon version
Saves mobile header space

Site Icon:

Store symbol or brand mark
High recognition factor

Portfolio/Creative Site

Primary Logo:

Desktop Width: 220-280px (bold presence)
Original File: 600px wide
Format: SVG for crisp display
Aspect Ratio: Flexible based on design

Dark Mode Logo:

Highly recommended for creative sites

Site Icon:

Creative mark or monogram
Reflects portfolio style

Learning/Course Platform

Primary Logo:

Desktop Width: 200-240px
Original File: 500px wide
Format: SVG or PNG
Aspect Ratio: 3:1 to 4:1

Dark Mode Logo:

Important for course reading modes

Site Icon:

Educational symbol (book, graduation cap, etc.)
Simple, professional design

File Format Recommendations

SVG (Scalable Vector Graphics)

Best For:

Text-based logos
Simple icon logos
Geometric designs
Logos needing perfect scaling

Advantages:

Infinite scaling without quality loss
Small file size
Crisp on all displays
No retina version needed

Considerations:

Not suitable for photographic logos
Complex SVGs can impact performance
Ensure browser compatibility

PNG (Portable Network Graphics)

Best For:

Logos with transparency
Complex designs with gradients
Photographic elements
Retina display optimization

Advantages:

Lossless compression
Transparency support
Wide browser support
Predictable rendering

Considerations:

Larger file size than SVG
Requires 2x version for retina
Can appear blurry if scaled up

Optimization Tips:

Export at 2x size (e.g., 400px for 200px display)
Use PNG-8 for simple logos (smaller file)
Use PNG-24 for complex logos
Optimize with tools like TinyPNG

JPG (JPEG)

Best For:

Photographic logos
Complex color gradients
Backgrounds within logos

Advantages:

Small file sizes
Good for photographs
Universal support

Considerations:

No transparency support
Lossy compression
Not ideal for text or sharp edges

When to Use:

Logo includes photograph
White or solid background is acceptable
File size is critical concern

WebP

Best For:

Modern websites prioritizing performance
Logos with transparency
High-quality with small file size

Advantages:

Superior compression
Supports transparency
Better quality-to-size ratio

Considerations:

Newer format, not universally supported
Provide PNG fallback
Check theme support

Logo Optimization Tips

File Size Optimization

Keep logo files under these sizes for optimal performance:

Format	Target Size	Maximum Size
SVG	Under 10KB	50KB
PNG	Under 50KB	150KB
JPG	Under 30KB	100KB
WebP	Under 30KB	80KB

Tools for Optimization:

TinyPNG/TinyJPG: Compress PNG and JPG files
SVGOMG: Optimize SVG files
Squoosh: Google’s image compression tool
ImageOptim: Mac application for all formats
ShortPixel: WordPress plugin for automatic optimization

Retina/High-DPI Displays

Modern devices have high-resolution displays requiring sharper images.

Approach 1: 2x Image Export

Design logo at actual display size (e.g., 200px)
Export at 2x size (400px)
Upload the 400px version
WordPress/theme scales it down to 200px
Result: Crisp on retina displays

Approach 2: SVG Format

Use SVG for vector logos
Automatically crisp at any size
No need for multiple versions
Best for text and geometric logos

Testing Retina Quality:

View on actual retina device (MacBook, iPhone, etc.)
Zoom browser to 200% on desktop
Check for pixelation or blur
Compare against vector version

Transparent Backgrounds

When to Use Transparency:

Logo needs to work on any background color
Header has image or gradient background
Logo overlays header image
Supporting dark mode with one logo file

Formats Supporting Transparency:

PNG (most common)
SVG (vector transparency)
WebP (modern option)

Exporting with Transparency:

Remove background layer in design software
Export as PNG-24 or SVG
Verify transparency in image viewer
Test against different background colors

Common Transparency Issues:

White “halo” around edges (export at higher resolution)
Semi-transparent elements appearing different (check alpha channels)
Background showing through thin strokes (increase stroke weight)

Logo Positioning & Spacing

While logo upload happens in Site Identity, logo positioning is controlled by Header Layout settings.

Header Layout Impact on Logo

Header Layout	Logo Position	Best Logo Type
Layout 1	Left aligned	Horizontal logos
Layout 2	Centered	Balanced logos
Layout 3	Left (above menu)	Horizontal or tall
Layout 4	Centered (above menu)	Any aspect ratio

Related Setting: Appearance > Customize > Header > Header Layout

Visual Spacing Considerations

Although padding/margins aren’t directly configurable in the customizer, logo spacing is built into each layout:

Automatic Spacing:

Logo has built-in padding from header edges
Spacing adjusts based on logo size setting
Mobile breakpoints automatically adjust spacing
Sticky header may reduce spacing when scrolling

Custom Spacing (Advanced):

If you need custom logo spacing, use Additional CSS:

/* Adjust logo top/bottom spacing */
.site-branding .custom-logo-link {
    padding: 20px 0;
}

/* Adjust logo left spacing */
.site-branding {
    padding-left: 30px;
}

/* Mobile logo spacing */
@media (max-width: 768px) {
    .site-branding .custom-logo-link {
        padding: 10px 0;
    }
}

Text Logo Fallback

If no logo image is uploaded, BuddyX Pro displays your site title as a text logo.

Text Logo Display

Condition	Display
No logo uploaded	Site Title as text
Logo uploaded	Logo image
Logo + “Display Site Title” ON	Both show

Text Logo Styling:

Controlled by Typography settings:

Font family: Customizer > Typography > Site Title
Font size: Automatic based on theme
Font color: Customizer > Colors
Font weight: Typography settings

When Text Logo Works Well:

Clean, modern designs
Typography-focused branding
Startup/bootstrap phase before logo design
Minimalist aesthetic

Common Questions

Q: What’s the best logo format?

A: SVG for vector logos (text, geometric), PNG for complex logos with transparency. SVG scales perfectly and loads fast. PNG works everywhere and supports detailed designs.

Q: Why does my logo look blurry?

A: You’re likely uploading a file that’s too small for the display size. Upload at 2x the desired display width (e.g., 400px file for 200px display), or use SVG format.

Q: How do I add a mobile-specific logo?

A: BuddyX Pro currently uses the same logo on mobile but scales it appropriately. For a custom mobile logo, you would need custom code or a child theme. The logo automatically responds to mobile screen sizes.

Q: Can I have different logos for different pages?

A: The customizer sets a site-wide logo. For page-specific logos, you’d need custom code using conditional logic in a child theme’s header.php.

Q: Does the logo link to the homepage?

A: Yes, clicking the logo always returns users to your site’s homepage. This is standard web convention and improves navigation.

Q: How large should my original logo file be?

A: For PNG: 2x your desired display size (e.g., 400-600px wide). For SVG: design at actual size, it scales automatically. For retina displays, always export at 2x.

Q: Will a large logo file slow down my site?

A: Yes, if not optimized. Keep logos under 100KB. Use compression tools like TinyPNG. Consider SVG for smallest file sizes. Optimize all images before uploading.

Q: How do I create a dark mode logo?

A: Design the same logo with inverted colors (light on transparent). If your primary logo has black text, make the dark mode version with white text. Upload both in Site Identity.

Q: Why isn’t my dark mode logo showing?

A: Check three things: 1) Dark mode is enabled in Customizer > Skin Settings, 2) Dark mode logo is actually uploaded, 3) Clear browser and plugin caches.

Q: What’s the difference between logo and site icon?

A: Logo appears in your header and is typically horizontal/rectangular. Site icon (favicon) is the tiny square icon in browser tabs, must be 512x512px, and appears in bookmarks.

Q: Can I use a full-width logo?

A: Logo width is controlled by the Logo Size slider (150-300px maximum). For full-width branding, consider using the Sub-Header or a custom header image instead.

Q: How do I center my logo?

A: Logo position is determined by Header Layout. Choose Layout 2 or Layout 4 in Customizer > Header > Header Layout for centered logo display.

Q: Does the logo automatically resize on mobile?

A: Yes, logos automatically scale down on mobile devices to fit smaller screens while maintaining aspect ratio. The theme handles responsive sizing.

Q: Why does my logo have a white box around it?

A: Your logo file has a white background instead of transparency. Re-export your logo as PNG-24 with a transparent background, or use SVG format.

Q: Can I use animated logos?

A: Animated GIFs work as logos, but they can’t be resized well and increase page load time. SVG animations are possible but require custom code. Static logos are recommended for performance.

Recommended Logo Dimensions by Aspect Ratio

Square Logos (1:1)

Display Size: 150-180px Upload Size: 360px x 360px (2x) Best For: Icon-based brands, app-style logos

Horizontal Logos (3:1)

Display Size: 240px wide x 80px tall Upload Size: 480px x 160px (2x) Best For: Text-heavy logos, wide wordmarks

Balanced Logos (2:1)

Display Size: 200px wide x 100px tall Upload Size: 400px x 200px (2x) Best For: Combination marks, balanced text and icon

Wide Logos (4:1 or wider)

Display Size: 300px wide x 75px tall (maximum width) Upload Size: 600px x 150px (2x) Best For: Long company names, tagline inclusion

Tall Logos (1:2)

Display Size: 150px wide x 300px tall Upload Size: 300px x 600px (2x) Best For: Stacked text, vertical marks Note: Works best with Layout 3 or 4

Troubleshooting

Logo Not Appearing After Upload

Problem: Logo doesn’t display after uploading and selecting.

Solutions:

Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
Click Publish in customizer to save changes
Check file format is supported (PNG, SVG, JPG, WebP)
Verify file uploaded successfully to Media Library
Disable caching plugins temporarily
Try uploading a different logo file to isolate issue
Check browser console for JavaScript errors
Verify file permissions on wp-content/uploads folder

Logo Appears Stretched or Distorted

Problem: Logo doesn’t maintain correct proportions.

Solutions:

Re-upload with correct aspect ratio from design software
Don’t use WordPress crop tool – skip cropping
Check original file isn’t already distorted
Verify Logo Size setting isn’t forcing unusual dimensions
Try SVG format which preserves aspect ratio
Clear browser cache after re-uploading
Inspect with browser dev tools for conflicting CSS

Logo Too Large on Mobile

Problem: Logo takes up too much space on mobile screens.

Solutions:

Theme automatically scales logos on mobile
Reduce desktop Logo Size setting (affects mobile too)
Clear mobile browser cache to see changes
Check for custom CSS forcing desktop sizes on mobile
Consider adding mobile-specific logo via child theme
Test on actual device, not just browser resize

Dark Mode Logo Not Switching

Problem: Same logo appears in both light and dark modes.

Solutions:

Verify dark mode is enabled: Customizer > Skin Settings
Check Dark Mode Logo is actually uploaded and published
Clear all caches (browser, WordPress, plugin caches)
Test in incognito/private browsing window
Verify you’re actually in dark mode (check color scheme)
Check for JavaScript errors preventing mode switch
Disable theme-related plugins to test for conflicts

Logo Quality Poor on Retina Displays

Problem: Logo looks pixelated on high-resolution screens.

Solutions:

Upload logo at 2x the display size (e.g., 400px for 200px display)
Use SVG format for infinite scaling
Export PNG at higher resolution with quality set to maximum
Don’t scale up a small logo – create larger source file
Test on actual retina device (MacBook, iPhone, iPad)
Check Logo Size setting isn’t enlarging a small file
Use PNG-24 instead of PNG-8 for better quality

Site Icon Not Showing in Browser Tab

Problem: Favicon doesn’t appear after uploading.

Solutions:

Ensure image is exactly square (512x512px minimum)
Use PNG format, not JPG
Clear browser cache (may take several refreshes)
Close and reopen browser completely
Wait up to 24 hours for browser to fetch new favicon
Force refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
Check browser bookmark bar – may update there first
Test in different browser to rule out caching
Verify file uploaded to Site Icon, not Logo field

Logo Overlapping Header Elements

Problem: Logo covers menu items or icons.

Solutions:

Reduce Logo Size setting
Change Header Layout to one with more space
Reduce number of menu items in primary navigation
Hide some header icons if not essential
Consider Header Layout 3 or 4 (logo above menu)
Check for custom CSS forcing logo width
Test at different screen sizes to find breakpoint

White Background Behind Transparent Logo

Problem: Logo shows white box despite transparent PNG.

Solutions:

Re-export logo with transparency enabled
Save as PNG-24, not PNG-8 or JPG
Remove white background layer in design software
Check for CSS adding background-color to logo
Verify transparency in image viewer before uploading
Try SVG format which better preserves transparency
Check “Additional CSS” for conflicting styles

Integration with Other Settings

Logo settings work with several other theme features:

Header Options

Header Layout: Controls logo position (left, center, above menu)
Sticky Header: Logo appears in fixed header when scrolling
Header Background: Logo must contrast with background color/image

Location: Customizer > Header

Skin & Color Settings

Dark Mode: Triggers automatic switch to dark mode logo
Color Scheme: Logo should work with selected color palette
Accent Colors: Consider logo colors when choosing accents

Location: Customizer > Skin Settings

Typography

Site Title Font: Used for text logo fallback
Heading Fonts: Should complement logo typography
Font Pairing: Logo font should work with site fonts

Location: Customizer > Typography

Mobile Header

Mobile Breakpoints: Logo automatically scales at mobile sizes
Mobile Menu: Logo appears with hamburger menu icon
Touch Targets: Logo link sized for touch interaction

Location: Automatic responsive behavior

Logo & Favicon Options

Accessing Logo Settings

What You Can Do

Primary Logo Settings

Logo Upload

Logo Size Control

Dark Mode Logo

Site Icon (Favicon)

Recommended Logo Sizes by Use Case

Business Website

Community Platform

E-Commerce Site

Portfolio/Creative Site

Learning/Course Platform

File Format Recommendations

SVG (Scalable Vector Graphics)

PNG (Portable Network Graphics)

JPG (JPEG)

WebP

Logo Optimization Tips

File Size Optimization

Retina/High-DPI Displays

Transparent Backgrounds

Logo Positioning & Spacing

Header Layout Impact on Logo

Visual Spacing Considerations

Text Logo Fallback

Text Logo Display

Common Questions

Q: What’s the best logo format?

Q: Why does my logo look blurry?

Q: How do I add a mobile-specific logo?

Q: Can I have different logos for different pages?

Q: Does the logo link to the homepage?

Q: How large should my original logo file be?

Q: Will a large logo file slow down my site?

Q: How do I create a dark mode logo?

Q: Why isn’t my dark mode logo showing?

Q: What’s the difference between logo and site icon?

Q: Can I use a full-width logo?

Q: How do I center my logo?

Q: Does the logo automatically resize on mobile?

Q: Why does my logo have a white box around it?

Q: Can I use animated logos?

Recommended Logo Dimensions by Aspect Ratio

Square Logos (1:1)

Horizontal Logos (3:1)

Balanced Logos (2:1)

Wide Logos (4:1 or wider)

Tall Logos (1:2)

Troubleshooting

Logo Not Appearing After Upload

Logo Appears Stretched or Distorted

Logo Too Large on Mobile

Dark Mode Logo Not Switching

Logo Quality Poor on Retina Displays

Site Icon Not Showing in Browser Tab

Logo Overlapping Header Elements

White Background Behind Transparent Logo

Integration with Other Settings

Header Options

Skin & Color Settings

Typography

Mobile Header

Related Documentation