Kadence - Site Title & Logo

The Header Builder in your theme makes it easy to customize your site's branding. This guide will show you how to customize your site title, upload a logo, add a favicon, and adjust your header branding for desktop, tablet, and mobile devices.

Site Title

Adding a Site Title

  1. In your WordPress dashboard, go to Appearance > Customize.
  2. Click on the Header tab, then select Logo.
  3. Type your desired site title into the Site Title field. A tagline (optional) can be added to the Tagline field.

Customizing the Site Title

To customize the appearance of your site title, go to Appearance > Customize > Header > Logo and click on the Design tab at the top.

In the Design tab, you can adjust settings like:

  • Site Title Font – Choose the typography used for your site title
  • Font Size – Set different font sizes for desktop, tablet, and mobile devices
  • Line Height & Letter Spacing – Fine-tune the spacing between letters and lines of text
  • Text Transform – Display the title in uppercase, lowercase, capitalize each word, or leave it unchanged
  • Font Weight – Choose how bold or light the text appears
  • Text Color – Select a custom color for your site title
  • Padding – Spacing around your site title

Most of these settings include separate controls for desktop, tablet, and mobile, allowing you to optimize the appearance of your site title on different screen sizes.

Learn More: Customizing the Header in Kadence →

Custom Logo

Adding a Logo Image

  1. Go to Appearance > Customize > Header > Logo.
  2. Under Logo, click Select Logo.
  3. Upload or select your logo image.
  4. If you're prompted to crop the image, click Skip Cropping (unless you intentionally want WordPress to crop it).

Logo Layout

Under Logo Layout, choose how you'd like your branding to appear:

  • Logo
  • Logo & Title
  • Logo, Title, & Tagline

If you choose Logo & Title or Logo, Title, & Tagline, you can also select whether the logo appears above, below, left, or right of the site title.

Note: Desktop, tablet, and mobile each have their own logo layout settings. If you make a change on one device, be sure to review the others too! For example, if you disable the site title on desktop (logo only), you'll likely want to disable it on tablet and mobile as well.

Logo Size

After selecting a logo, a Logo Max Width setting will appear. You can adjust this value to control the size of your logo.

There's no one-size-fits-all logo width. The ideal setting will depend on your logo and header layout, so experiment with the width until you achieve the look you're after!

Note: Desktop, tablet, and mobile each have their own logo width settings, so be sure to review the size on tablet and mobile as well.

Logo Spacing

If you'd like more or less space around your logo, click on the Design tab and adjust the Padding settings.

If your logo appears to have a lot of empty space around it, the image file itself likely contains extra white/transparent space. We recommend cropping the image so the edges closely "hug" your logo before uploading it. This allows the logo to make better use of the available space, improves its positioning within the header, and should result in a cleaner appearance on both desktop and mobile devices.

Mobile Logo Tips

If your logo appears too large or causes the header area to become too large on mobile, these steps should help:

  1. Click the mobile phone icon next to Logo Layout.
  2. Set the layout to Logo Only.
  3. Reduce the Logo Max Width for mobile (around 200px is a good starting point for most logos).

Site Icon (Favicon)

  1. Go to your WordPress dashboard > Appearance > Customize > Site Identity.
  2. Under Site Icon, click Select Site Icon to choose your favicon image. If you already have a favicon in place, click Change Image instead to select a new image.

Customizing the Header Layout

Looking to customize your header even further? The Kadence Header Builder lets you rearrange elements, add additional rows, adjust spacing, and much more. Learn more: