Site Identity Settings

The Site Identity panel in the WordPress Customizer allows you to configure your website’s core branding elements including the site title, tagline, logo, and site icon (favicon).

Site title typography settings in the Customizer

Accessing Site Identity Settings

1. Go to Appearance > Customize in your WordPress admin
2. Click on Site Identity in the customizer panel

Available Settings

Site Title

The site title appears in browser tabs, search results, and can be displayed in your header.

Setting	Description
Site Title	Your website’s name (e.g., “My Community Site”)
Display Site Title	Toggle whether to show the title in the header

Best Practices:

• Keep your site title concise (under 60 characters)
• Use your brand name or a descriptive title
• Consider SEO implications for search visibility

Tagline

The tagline is a short description of your website’s purpose.

Setting	Description
Tagline	A brief description of your site
Display Tagline	Toggle visibility in the header

Best Practices:

• Keep taglines under 120 characters
• Describe what makes your site unique
• Include relevant keywords naturally

Logo

BuddyX Pro provides extensive logo customization options.

Setting	Description	Default
Logo	Upload your primary logo image	None
Logo Size	Adjust logo width (150-300px)	150px
Logo Retina	Upload @2x logo for high-DPI displays	None

Logo Size Adjustment:

The Logo Size slider allows you to control the desktop display width:

• Minimum: 150px
• Maximum: 300px
• Step: 1px increments

Supported Formats:

• PNG (recommended for logos with transparency)
• SVG (vector format, scales without quality loss)
• JPG (for photographic logos)
• WebP (modern format with good compression)

Recommended Dimensions:

• Standard logo: 300px x 100px (max)
• Retina logo: 600px x 200px (@2x)
• File size: Under 100KB for optimal loading

Dark Mode Logo

When dark mode is enabled, BuddyX Pro can display an alternate logo optimized for dark backgrounds.

Setting	Description
Dark Mode Logo	Alternate logo for dark color scheme
Dark Mode Retina Logo	@2x version for high-DPI displays

When to Use:

• Your primary logo has dark text that’s invisible on dark backgrounds
• You want brand consistency across color schemes
• Your logo uses colors that clash with dark mode

Mobile Logo

Optimize your header for mobile devices with a separate mobile logo.

Setting	Description
Mobile Logo	Smaller logo for mobile devices
Mobile Logo Size	Width adjustment for mobile

Best Practices:

• Use a simplified version of your logo
• Consider a square icon or abbreviated version
• Test on actual mobile devices

Site Icon (Favicon)

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

Setting	Description
Site Icon	Square image for browser tabs
Recommended Size	512 x 512 pixels

Requirements:

• Must be square (1:1 aspect ratio)
• Minimum 512 x 512 pixels
• PNG format recommended
• Simple, recognizable design

Where It Appears:

• Browser tabs
• Bookmark bars
• Mobile home screen (when saved)
• Windows taskbar pins
• RSS feed readers

Configuration Examples

Example 1: Standard Business Site

Site Title: "Acme Community"
Tagline: "Connect, Learn, and Grow Together"
Logo: acme-logo.webp (280px wide)
Site Icon: acme-icon.webp (512x512)

Example 2: Community Platform

Site Title: "Developer Network"
Tagline: "Where developers connect and collaborate"
Logo: devnet-logo.svg
Dark Mode Logo: devnet-logo-light.svg
Mobile Logo: devnet-icon.webp

Example 3: Learning Platform

Site Title: "LearnHub Academy"
Tagline: "Online courses for professionals"
Logo: learnhub-logo.webp
Logo Size: 200px
Site Icon: learnhub-favicon.webp

Troubleshooting

Logo Not Displaying

Problem: Logo doesn’t appear after upload.

Solutions:

1. Clear browser cache and refresh
2. Check file permissions on uploads folder
3. Verify image format is supported
4. Check for CSS conflicts with caching plugins

Logo Appears Blurry

Problem: Logo looks pixelated on high-resolution displays.

Solutions:

1. Upload a larger source image (at least 2x desired display size)
2. Use SVG format for vector logos
3. Enable and upload a retina version
4. Check the Logo Size setting isn’t scaling up a small image

Dark Mode Logo Not Switching

Problem: Same logo shows in both light and dark mode.

Solutions:

1. Verify Dark Mode Logo is uploaded
2. Check dark mode is enabled in Skin settings
3. Clear any caching plugins
4. Test in incognito/private browser window

Site Icon Not Showing

Problem: Favicon doesn’t appear in browser tabs.

Solutions:

1. Ensure image is exactly square
2. Upload at least 512×512 pixels
3. Use PNG format
4. Clear browser cache (Ctrl+F5 / Cmd+Shift+R)
5. Wait for browser to fetch new favicon

Integration with Other Settings

Site Identity settings work in conjunction with:

• Header Options – Logo placement and alignment
• Skin Settings – Dark mode logo switching
• Mobile Header – Mobile logo display
• Typography – Site title font styling

Related Documentation

• Logo & Favicon Options – Advanced logo configuration
• Header Layout Styles – Header design options
• Dark Mode – Dark color scheme settings

---

Need Help?

• Visit our Documentation Portal
• Contact Support at support@wbcomdesigns.com