How To Add A Logo Image To The Header Of The Twenty Seventeen Theme

You can add a logo image to the site identity header in addition to having a text title and description.

You can see examples below of the header with and without a logo image.

Default header without logo image.


Header with logo image.


Where and how to add the logo image:

In WordPress Admin > Appearance > Site Identity> Change Logo.

The recommended size is 250 x 250 pixels.

I uploaded an image of size 1920 x 1080 and by default, the customizer is set to crop the image to square proportions. I dragged the crop rectangle to make it full size and the full image is displayed as the logo.

There is an option to display, or not, the site text title and tagline (description) under the logo. If you switch off the text, the header logo is displayed slightly at a slightly larger size.

Share this:

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.





10 responses to “How To Add A Logo Image To The Header Of The Twenty Seventeen Theme”

  1. DV avatar

    Whonderful Theme! Thank you for support!
    Please advise how I can change the recommended logo size from 250*250 to (for example) 200×50 px? The problem is, that the width of my logo is bigger than the hight. So if I load my logo 200×50 with padding 0 px to minimize gaps, I get low quality image. If I load logo 250*250 with padding 0px the logo size is very small.

    1. Bharat Karavadra avatar

      Hello DV,
      I just added a 250×50 image logo and it appears OK. Make sure you do not crop the image after you select it for the logo. There is a skip cropping button at the bottom of the page after you select an image from the media library for the logo.
      Thank you,

  2. RS avatar

    Hello. I have uploaded a high quality logo file and then resized it larger to a max height of 300px and centered it. The logo however is showing at very poor quality. Am I missing a setting?

    1. Bharat Karavadra avatar

      Can you post a link to the site with the logo?

  3. Jeff avatar

    Do you happen to know how to center the logo within the header? Also, have you found that when adding a logo it does not always seem to resize properly on mobile devices?

    1. Bharat Karavadra avatar
  4. smakasnack avatar

    Hello Bharat, thanks for great tips. Is it possible to add the logo to the menu navigation bar to have before the menu options? Thanks,

    1. Bharat Karavadra avatar

      The placement of the logo within the menu should be defined better as the menu items can meet the very left and right of the screen on lower resolutions, and on mobile, the menu items do not appear until the 3 bar hamburger is pressed, and so where does the logo appear and how does it behave on different screen resolutions. However, there may be a plug-in solution here:
      Even though it’s compatibility is not stated to be up to WordPress 4.7, the author says it is up to date. See here
      Try it and let us know how it works.

  5. Christophe avatar

    Hello. Great site and nice tips you have here. I am just confused by the recommended size you mentioned for the logo. I thought I read somewhere that the recommended size (for the logo !) was 250 x 250pixels…

    1. Bharat Karavadra avatar

      Hello Christophe,

      The recommended size is 250 by 250. The dimensions that you saw above were from an early version of the Twenty Seventeen Customizer. I have now updated the size. Thank you for pointing that out.

Leave a Reply to Christophe Cancel reply

Your email address will not be published. Required fields are marked *