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:
About Bharat Karavadra

"I research and share leading-edge information, tools and exercises to help people transform and heal their life situations."

Share your thoughts

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

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

  2. 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?

  3. 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. Hello,
      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: https://wordpress.org/plugins/menu-image/
      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 https://wordpress.org/support/topic/update-for-wordpress-4-7-2/
      Try it and let us know how it works.

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

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Bharat Karavadra