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

Written by

Bharat Karavadra

Blog Posts

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.

Comments

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

December 6, 2019

DV

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.

Reply
1. December 14, 2019
  
  Bharat Karavadra
  
  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
  
  Reply
March 4, 2018

RS

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?

Reply
1. March 6, 2018
  
  Bharat Karavadra
  
  Can you post a link to the site with the logo?
  
  Reply
February 22, 2017

Jeff

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?

Reply
1. February 22, 2017
  
  Bharat Karavadra
  
  Hello Jeff,
  To centre the logo, site title and site description, see here: http://karavadra.net/centre-header-logo-site-title-description-twenty-seventeen/
  
  Reply
February 7, 2017

smakasnack

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,

Reply
1. February 7, 2017
  
  Bharat Karavadra
  
  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.
  
  Reply
February 2, 2017

Christophe

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…

Reply
1. February 2, 2017
  
  Bharat Karavadra
  
  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.
  
  Reply