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

November 1, 2016

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.

2016-11-01-twenty-seventeen-header-logo-a

Header with logo image.

2016-11-01-twenty-seventeen-header-logo-b

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:
  • 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…

    • 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.

  • 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?

  • 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?

  • 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.

    • 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,
      Bharat

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >