Adding your Logo

The logo is a crucial part of identifying a brand. It is what makes you — you — as a symbol and a significant element to be recognized by the right people. Because of its huge relevance, we offer you two options to play with: you can add a graphic symbol (such as an image) or a text version (logotype). You choose a font, and we help you fine-tune the logo after its personality.

Of course, a stand-alone logo is not sufficient for creating a strong brand. You also need a system to correctly use all the elements: from logo to colors, from the visual identity to the verbal one. However, read further to learn what you need to do to insert a logo within your website correctly.

Before you start

In order to properly make things happen with your logo, we highly suggest you take into consideration these factors:

• File Formats. You should be aware that a logo looks best in a .png or .svg format with a transparent background. If your logo file doesn't have a transparent background, it's likely that your logo will partly cover the background image.
• Logo Size. We encourage you to have a larger image for your logo. Try to use a high dimension of the logo, and we'll do the rest by scaling it. This way the logo will adapt to any screen size (both desktop and mobile).

Adding a logo image

Now that you know what's better to do when setting up your logo, here's what you have to do in order to upload it on your WordPress site. Your logo lives in the Site Logo block inside your header, and you add it directly in the Site Editor.

1. In your WordPress Dashboard, go to Appearance → Editor to open the Site Editor. You'll see a live preview of your site.
2. Open your header. The most reliable way is to click directly in the preview to start editing, then click the header area at the top of the page to select it. This works the same across WordPress versions.
3. In the header, click the Site Logo block (the logo image, or the empty logo placeholder if you haven't added one yet). Opening List View (the list icon in the top toolbar) makes the block easy to find.
4. Click the placeholder to open the Media Library, then select an image that's already there or upload a new one. If a logo is already set, use the Replace button in the block toolbar to swap it.
5. Click Save in the top-right corner to publish your change.

It couldn't be easier than that, and you've already made an important step in order to personalize your upcoming website.

Using a text version (site title)

If you don't have any graphic symbol that stands for your business, we recommend you choose the text option instead. It's a good switch if you're careful with details like the font and its size.

1. Set the text itself under Settings → General → Site Title in your WordPress Dashboard.
2. In the Site Editor (Appearance → Editor), open your header the same way as above — click into the preview, then click the header area — and make sure a Site Title block is in place. It displays the name you set in step 1.
3. To restyle the title's font, size, and color, use Style Manager (open it from the Site Editor's Styles panel, or from Appearance → Pixelgrade Design → Design System with the Open Style Manager button). Click Save when you're done.

Changing the logo height

If your logo does not appear at the preferred size on your website, have no worries; you can adjust it in a few easy steps.

To change the logo height, follow the steps below:

1. In your WordPress Dashboard, go to Appearance → Editor to open the Site Editor.
2. Click into the preview to start editing, then click the header area at the top of the page to select your header.
3. Open List View (the list icon in the top toolbar) and click the Header block (the block that wraps the whole header).
4. In the right sidebar, open the Header Layout option. There you'll find Logo Height and Mobile Logo Height settings you can adjust.
5. Click Save once you're done.