WordPress: How to change the header image (logo)

NOTE: The header of your site will automatically display your site’s name when not using a header image. You can change the name of your site by going to the Settings > General page in your dashboard.

You can upload your own header image or logo from the WordPress Customizer options in Appearance > Customize

This will show the following options for uploading and displaying your image:

How do I change the spacing around the image?

You can change the margin at the top and bottom of your header image by using the options shown below:

Can I change the font?

You can change the font of the header text from the “Font Options” tab in the Customizer screen. We also have some extra font options in this guide.

What size image should I use?

The image can be any size you like. A good starting point is usually 1000×250 pixels though. If you would like the image to span the full width of the page please see the following:

Can I set the image to be the full width of the screen?

You can do this by enabling this option:

Please note that the image will only show across the full screen if it is wide enough.

Why does the image look blurry?

If you are using a device with a high resolution screen (e.g. iPad, Laptop) then you may notice that the image is blurry. To fix this, you should upload an image which double the size, then set the width using the option shown below:

For example, if you wanted to display the header image as 600 pixels wide, then you would upload an image which was 1200 pixels wide. Then set the option shown above to 600.

Article tags: logo, header, banner image, branding, space between header

Was this article helpful?

38 Comments

  1. India Foster

    Hi! I’m updating my header on my website and there’s a lot of white space above and some below. On the mobile websites it’s horrible! Can you please help me?

    1. Phil (pipdig)

      Hi India, it looks like the extra space is coming from Google Adsense. If you try removing Adsense temporarily does it fix it?

  2. Wumi Oyewole

    Hi Phil,
    I’ve uploaded my header but there is space to the left and right of it. How do i resolve the problem. Thank you for your help.
    http://www.Wumi.co.uk

    1. Phil (pipdig)

      Hi Wumi, we’re just created a new option for you to do this. After updating, you will be able to set the image to full width via https://i.imgur.com/qzt6joG.png. You can update by going to ‘Dashboard > Updates’ in your dashboard.

      1. Wumi Oyewole

        Hi Phil,
        I’ve done the update and its looking good. Thank you.

  3. Danielle

    Hi Phil,

    Thanks for your response. Unfortunately the code you sent me didn’t work –
    .site-header .container { max-width: 100% } – The first time I pasted it in to the additional CSS and error page came up saying I am not aloud to edit the theme (VENTURE) I don’t know if this is because the banner image I am using is a gif.

    The next time I pasted it in it just changed nothing.

    As for removing the banner image from my about page, you said that I just change it in the dashboard at the bottom of the page, Can you show me where? I am sorry, just having trouble locating it.

    Thanks so much,

    Danielle

    1. Phil (pipdig)

      That sounds strange regarding the CSS. Please could you try again once more and take a screenshot if the error message shows?

      You can find the extra page editing options near the bottom of the screen when editing the page https://imgur.com/a/Kz2fV.

      1. Danielle

        Hi Phil,

        First off, thank you for your help. I have successfully managed to remove the header from the about page and switched it to a different photo.

        As for the CSS. I tried removing it and putting it in again. No error msg this time. It didn’t seem to be making any changes at all so I played around with the number in the %. It changed only when I deleted the second two numbers. Other than that it won’t change the size of the image.

        I am wondering if It is the image itself which is at full capacity? Could you have a look for me?

        Thanks again,

        Danielle

        1. Phil (pipdig)

          Glad to hear you got the about page working! Regarding the header image, there seems to be lots of white space on the left and right side. This is making it look like it isn’t spanning 100% width, however it actually is. You may wish to remove that extra space from the sides if you’d like your shoulders to go closer to the edges of the screen.

  4. crystal

    I am trying to crop my logo image but do not know what the ratio would be or how to find that out. the logo is there but it is too long and takes up a lot of space. is there an easier way to do this, how do i crop it? thanks!

    1. Phil (pipdig)

      Hi Crystal, it looks like there is lots of extra white space at the top and bottom of your current image. If you remove that then it will reduce the height of the image. You may wish to try uploading this image instead https://i.imgur.com/bbpsFtJ.png

      1. crystal

        Thanks so much! I don’t know how you did that but it worked and i love it!!!

        I tried cropping the extra space but when i did it still had too much space…i don’t think i was doing it right. How did you do it, for future images:)

          1. crystal

            Hi Phil, I didn’t know who else to ask, I am trying to add a picture widget to my page but don’t know how to. Is it possible to add with my pip dig theme? For example i am an affiliate of shop collective and wanted to add pictures of items on my blog so people can click on them to shop. If you can’t help me can you lead me to that direction? thanks in advance!

            1. Phil (pipdig)

              Hi Crystal, Shopstyle have a widget you could use to create this. If you contact their support team they will be able to help 🙂

              1. crystal

                Hi Phil sorry, one more question. How can we edit or or design a nicer email subscription template/layout? I am not sure that the one we are given through wordpress is the only design option we have to use or do we get to create one of our own? Does my theme allow me to customize one? The one i have is plain with blue bordering, it doesnt have a picture and just plain blah! I have seen other bloggers with this same outline. When i subscribe I receive their post and it looks like mine. very minimal and boring. tia!

                1. Phil (pipdig)

                  It is not possible to edit the standard WordPress subscription email. However you may wish to try using http://www.mailchimp.com instead. This service allows you to edit the design further. We have some tips for Mailchimp in this guide.

                    1. crystal

                      by adding this mail chimp widget it will not affect my theme correct? since i already have one, would i just be replacing my current standard subscription email? and do my current subscribers have to re subscribe?

                    2. Phil (pipdig)

                      That depends how you configure it. If you add it in addition to your current subscription service then it would run along side it. If you arrange to migrate the subscribers to the new service then you could replace it entirely.

  5. Fanny

    Hello! How should I do to show my header and the description of my website when I post a link to my website on Facebook ? Thanks!

    1. Phil (pipdig)

      Hi Fanny, it is possible to setup the titles/images shown on Facebook by using the Yoast SEO plugin.

  6. Tayla

    Hi Phil, I have the Infinite theme. I’m trying to adjust the space around the header as you talk about above, however I don’t have this option in the customizer. It only allows me to choose the image but not close the space between the header and the nav bar. Any ideas why? Thanks!

    1. Phil (pipdig)

      Hi Tayla, this has not yet been added to the infinite theme. However it will be included in an update soon. Until then, if you’d like to send me a link to your blog I will let you know how to adjust the spacing manually. Is there header image you’d like to use currently in position?

          1. Tayla

            That’s fixed it however now it’s too close haha is there a way I can manually adjust the space? Thank you 🙂

  7. Danielle

    Hi Phil,

    We are using the Venture template and we are trying to upload a gif that we made to the header. The gif is an mp4. It is saying there is an HTML error.

    Can you help with this?

    Thank you

    1. Phil (pipdig)

      Hi Danielle, an mp4 is not an image file format, so it won’t work as a header image. You would need to convert the mp4 to a gif before uploading. You can do that via websites such as https://ezgif.com/video-to-gif

  8. Ali

    Hi,
    I’m interested in your Holly & Weave theme. The demo shows the text box in the header not center aligned. Can it be center aligned? Thanks.

    1. Phil (pipdig)

      Hi Ali, if the social icons are removed from the navbar then the menu items can be centered.

  9. Maurine

    Hi ! I want to separate the menu to the logo, is that possible ? (theme Blossom, preview 3)

  10. charlotte

    I have an issue with the Galvani template with the header size as its appearing way too small to the standard size when uploaded.
    Do you have recommended dimensions for this as the menu covers the header slightly?

    Thanks

    1. Phil (pipdig)

      Hi Charlotte, you can upload any sizes image, however an image of 1000 x 250 pixels is usually a good starting point. You can also add extra space above the image by using the options in the Customizer.

Leave a comment


The link to your website will be visible to support staff only. It will not be shown publicly.