How to Add Your Site’s Logo in the WordPress Customizer [VIDEO]

Add WordPress Site Logo in Customizer

The WordPress site logo feature was added in WordPress 4.5. Some are referring to it as a “custom logo” or “theme logo support,” but they are all referring to the same thing. Theme developers can now add one line of code to their themes to enable easy support for you to add a custom logo to your WordPress site, via the Customizer.

This tutorial will be geared towards teaching site owners how to use the WordPress site logo feature. Let’s get started. Or jump straight to the video.

SEE ALSO: How to Add a Favicon in WordPress (Site Icon)

Find the Site Logo in the Customizer

After logging into your WordPress admin area

  1. Navigate to Appearance > Customize
  2. Click on Site Identity
  3. Site Logo should be one of the first options
WordPress > Appearance > Customize
Navigate to the Customizer
Site identity in WordPress customizer
Choose “Site Identity” in the Customizer

Create/Crop Your Logo

Before adding your logo to WordPress, you’ll want to make sure its dimensions are close to the dimensions that your theme recommends for custom logos.

When you click the Select Logo button, you’ll see the WordPress Media Library. At the very top, you’ll see a note that says Suggested image dimensions: 000×000. Before uploading or choosing an image, I recommend you have something that is at least close to that size. Or if your theme recommends a wide & short logo, make sure your image is also wide & short. If it recommends a square, make sure your image is also a square.

Upload or Select a Logo

Once you have a an appropriately-sized logo…

  1. Click Select Logo if you haven’t already
  2. Either choose the image from your Media Library, or drag’n’drop your image into the Media Library to upload it
  3. Click the Select button in the bottom-right corner
WordPress Site Logo Select Button
Click “Select logo”
Choose WordPress site icon
Select an image in your Media Library or upload a new logo

Crop Your Site Logo (optional)

If you need to crop your logo, you can do so in this step. Click, hold & drag from any one of the corners (or the small, white boxes on the outer edges of the image). The area that will get cropped out of the image will be faded out with a dark overlay.

Crop WordPress site logo
Drag white boxes on the outer edges to crop your logo

If your logo is already the perfect size, just click Skip Cropping. If you’ve made adjustments, click the Crop Image button.

You’ll see your new site logo appear right away in the Customizer.

Removing Site Title & Tagline

You may have previously had your site title & tagline appearing in your site’s header area. Now that you’ve added your company logo, the additional text might be overkill. Let’s look at the options for removing it.

Remove WordPress Site Title/Tagline
Uncheck the box to remove Site Title and Tagline

Uncheck the “Display Site Title and Tagline” Box Recommended

You should see a checkbox in the WordPress Customizer, underneath the “Tagline,” that says “Display Site Title and Tagline.” Simply uncheck this box to remove all the text from your header, and just display your site’s logo.

Remove Either the Title or the Tagline

If you’d like to delete only one or the other (site or tagline), you can delete the contents of the appropriate input box.

NOTE: This will remove the information from the General Settings page as well, which might be used in other areas of your site (SEO settings, email notifications, etc.). That’s why I recommend removing both, using the checkbox.

Save & Publish

Be sure to click the Save & Publish button in the top-left corner of the Customizer to make your new WordPress site logo appear on your live site.

WordPress Site Logo Tutorial Video

WordPress Site Logo Theme Support

Both the Twenty Fifteen & Twenty Sixteen themes have been updated to include support for site logos. Check with your theme developer to see if they will add support, or install any updates to your theme. If support was added, you’ll see it in the Customizer.

Developers

Here’s the line of code to enable theme support for a site logo:

add_theme_support( 'site-logo', size );

Here’s an example of how the Twenty Sixteen theme has setup custom logo support:

add_theme_support( 'custom-logo', array(
	'height'      => 240,
	'width'       => 240,
	'flex-height' => true,
) );

In case you need to reference it, here’s the official post from WordPress.


What do you think of the WordPress site logo feature? Let me know if you have any trouble implementing it in the comments, or share a link to your beautiful new logo :-)

15 Commentson "How to Add Your Site’s Logo in the WordPress Customizer [VIDEO]"

  1. /

    Hi,

    I have followed all the instructions for uploading my site logo. It has been uploaded successfully however I am having trouble changing the size of the logo and moving it to the centre of my header space. Any suggestions helpful.

    P.s. I am a complete beginner! :)

    → Reply
    1. (Author) /

      Hi Nick — Welcome to the world of WordPress!

      1. Changing the size of your logo
      To do this, you can actually edit the image itself, making it smaller. Then go back through the process of adding it as your site logo, and it will use the new, smaller version.

      – Click on the image from your media library
      – Click on the “Edit Image” button
      – Enter a smaller value in the width or height of the “Scale Image” area. Click the “Scale” button.
      – Be sure to click the “Save” button
      view screenshot

      2. Moving your logo to the centre of the header
      This is a theme customization, and not something that is handled by the site logo functionality. Some themes provide an easy way to do this. Others will require some custom code.

      You can check to see if your theme offers it by going to…
      – Appearance > Customize
      – Look for a section labeled “Header”
      – In that section, the theme author might have provided an option to place your logo in the center.

      Holler back with any additional questions!

  2. /

    Hello, I have trouble loading my logo as there is no Select logo button at all, when I am on the Site Identity page. All I have is Site title, Tagline and Site Icon. My website already has a logo in the Primary Menu, but I can not find a way to change it. The only thing that I found clicking through the options was check/uncheck box named HIDE LOGO IMAGE in the Customizing ▸ Header & Navigation▸Primary Menu Bar
    I will really appreciate it if you help me.

    → Reply
    1. (Author) /

      Hi Iliyana — It could be the theme you are using. If you can send me a link to the theme and where you got it, I can take a look for you.

      Some themes support adding a logo via the Customizer (as described in this article), and some themes use their own custom method.

  3. /

    Hi, I uploaded a logo and it looks great! http://recipeforwealth.com/ However, when I resize the browser window on my screen so that it is narrower, the logo size jumps from its proper size to a tiny version with lots of white space. Is there anything I can do so that it fits the space better as the window gets narrower? I know it needs to shrink, but I’d rather the change be less severe. Thanks.

    → Reply
    1. (Author) /

      Hi Sara — Nice looking site! Great job.

      I looked at the code, and the reason your logo is shrinking as the screen gets smaller is because your WordPress theme has intentionally set it up this way. You should be able to override it using some custom CSS.

      1. Log into the backend of your site: http://recipeforwealth.com/wp-admin/.
      2. Go to Appearance > Customize, and then click on Additional CSS at the bottom of the screen.
      3. Add these lines of code:
      .logo-img { max-width: none !important; }
      .entry-header { padding: 0 !important; }

      That should do the trick. If you’re still having issues and/or would like me to assist you, I’d be happy to do so for a small fee. Just shoot me an email at [email protected].

    2. /

      Thank you so much, Dave! That did the trick and your instructions were clear and easy.

  4. /

    Hi there. I can’t see the “Skip Cropping” button… so frustrating… I just want to upload the logo and maintain the quality of image. Any suggestions please? Thank you for your help

    → Reply
    1. (Author) /

      It’s possible that your theme has disabled it, or is requiring you to crop the image because it’s too large.

      What theme are you using? How big is your image? Can you send a link to your site please?

  5. /

    Hi Dave, the theme I’m using doesn’t have the option to change the logo in site identity, it’s stuck with the theme logo… I wondered if you were know of any code i can use in the customiser – additional css (or anywhere else for that matter) where I can point to the logo I wish to use, replacing the standard theme logo, Im using a theme called Talent Hunt by Kayapati, they recommend using elementor header footer plugin to create new header but this conflicts with essential theme functionality so is not an option. I’m getting zero support from the developer and I’ve arrived here on my long journey scourging the internet for an answer. Please could you help me? I’d be forever grateful! Thank you, Damon.

    → Reply
    1. (Author) /

      Hi Damon — I’d love to try & help you, but I’m a little suspicious that you’re using a bit.ly link. It looks like that link redirects to a suspicious website, one that I couldn’t find in any Google results either.

      Can you post a link to your actual website, please? And confirm that you aren’t trying to do anything malicious?

  6. /

    Hi. I’m trying to change the logo on my blog but I can’t find the right size it should be. All the images I’ve used arent working. It just reverts to the original image

    → Reply
    1. (Author) /

      The size depends on your theme. Sometimes the theme will include text at the top of the Customizer, on the Site Identity tab, that says the recommended logo size.

      If you can post a link to your site, I can try to help you with what the right size might be.

    2. (Author) /

      Esther — What size do you want the logo to be? I think it looks fine as a square right now. I guess I’m not sure what you’re asking. You could crop the image and make it more of a rectangle. But it’s entirely up to you.

      Also, I would recommend you uncheck the box for “Display Site Title and Tagline.” This will remove the text that is showing up below the logo. You probably don’t want that there.

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.