Sizing your logo artwork

All our themes allow users to upload their own logo artwork in place of the Site Title. This article discusses recommendations and best practices for how to size your artwork so it looks great atop your header.

  • In our Rania, Presidio, Miramar, Brevier and Archer themes, add your logo artwork by going to Appearance > Customize > Site Identity. 
  • In our Barton, Pearl and Hayes themes, add your logo artwork by going to Appearance > Customize > Header Options > Site Identity. 
  • Looking for guidance on what all the controls of the Site Identity tab do? Check out our Help Desk Article, "Customizing the Site Identity Menu."

One important item to keep in mind when sizing artwork for your logo: the final sizing is completely dependent on the logo artwork itself. So, while you can try out the recommendations below, you may need to tweak your artwork slightly based upon the artwork layout and various elements.

EDITING THE LOGO FOR YOUR BLOG (HEADER)

Look for your theme name below, for recommendations related to your specific logo/header area.

Barton, Pearl and Hayes Themes

The Site Identity tab in the Barton, Pearl and Hayes themes allow you to upload a large image, crop, and resize the image directly within the Customizer. With this in mind, you can upload an image at virtually any size you wish, even as large as 1100px or even 1200px in width. After upload, the Customizer will prompt you to crop the image to your liking. 

After saving the crop edits, use the slider in the Customizer to change the overall width of the logo image. We generally recommend 380px as a great place to start (this is the default setting in the theme). Depending on the nature of your artwork, you can make it larger or smaller from there.

Here's a short video showing you these steps:

Rania, Presidio, Miramar, Brevier, and Archer Themes

In these themes, the logo container widths range in size from 1100-1200px. While you  could upload a logo file that is this large, baring a specific design that is meant to span the width of a page, a logo that is this big will look far too large within your theme.

We think an optimal size for any logo is  a width of 600-800px in width, depending on how tall the artwork is, too. However, if you are optimizing your blog for Retina displays and have enabled Retina settings in the theme, you should double the total width of any image you are uploading. Our Customizer features a space for you to upload your logo artwork for both standard displays (@1x) and Retina displays (@2x). It looks like this:

You do not have to upload both in order for your logo to work, so if you only have artwork for one, that’s ok.

  • For more information about images for Retina displays and why they matter, read this article.

In the Rania, Presidio, Miramar, Brevier, and Archer themes, here are some examples that show you how a logo might look at various sizes of upload:

At the max width of 1100px (@1x) / 2200px (@2x):

Too big! The logo takes up too much space, and pushes the content too far down the page. Generally speaking, we do NOT recommend uploading your artwork at the max allowable width of the logo container.

At a “medium” size of 800px (@1x) / 1600px (@2x)

This looks better. For logos that are completely inline (i.e., there’s no monogram, symbol or other artwork above or below it, this size will likely work for you).

At a “smallest” size of 600px (@1x) / 1200px (@2x)

Ding ding ding. This looks the best! Note that this size works the best for this particular logo, since it’s pretty tall and wide overall, with an icon element stacked above the wordmark. If your logo is your blog’s name in a pretty font and written inline, you might be able to get away with uploading it a bit larger, at 700px/1400px, or at 800px/1600px.

For most blogs, we do not recommend sizing your logo beneath 600px (@1x) / 1200px (@2x) in width, as artwork smaller than this may look too small and lose detail on mobile devices.

EDITING THE LOGO FOR YOUR BLOG FOOTER

Some themes offer the ability to upload a logo near the bottom of the page, i.e. in the page footer. Themes by default will show a text based version of your logo, rendered in the primary font of the font family you’ve chosen for your theme. You can remove this text based version of your logo by checking editing the Footer Logo display settings. You can also add a footer logo in the same area. 

Keep in mind the logo you add in the footer can be different than the one in your header!  For footers in which the logo is sitting atop a colored background, we recommend creating and uploading a .PNG version of your logo, with a transparent background.

To edit footer logo settings:

In the Hayes theme, these settings can be accessed by going to Appearance > Customize > Footer Options > Footer Layout.

  • To remove the text-based version of the logo, toggle the Display Site Title and Display Site Tagline options to OFF.
  • To add logo artwork, toggle Display Logo to ON, then upload your logo with the settings below. You can then use the slider to change the overall width of the logo artwork.
  • View what this panel looks like in the example on the left, below.

In Brevier and Archer themes, these settings can be accessed by going to Appearance > Customize > Site Identity. Look for the Footer Logo and Footer Retina Logo upload boxes.

  • To hide the text-based version of the logo in the footer, check off Hide Site Title in footer.
  • View what this pane looks like in the example on the right, below.

Related Articles