How to Change the Logo in WordPress: Using Customizer, Template Editor, and Custom CSS

A website’s logo is an important tool for brand recognition, helping visitors set the site apart from competitors and form a strong impression. It also makes the website look more legitimate and professional.

After creating a high-quality and relevant logo, you only need to add it to your WordPress website and customize it.

If you are looking for an effective way to add or change a WordPress site logo, we will guide you using different methods. We will also teach you how to replace the default login logo.

Download all in one WordPress cheat sheet

How to Change the Logo in WordPress

As there is no default button or shortcut, figuring out how to change a WordPress site logo can be tricky for beginners.

Thus, we will provide detailed instructions to change or add a custom logo in WordPress:

Adding a Custom Logo to a WordPress Theme

There are two ways to add a custom logo to the site’s active theme – via WordPress Customizer or Template Editor.

However, you can only utilize the Customizer feature on specific WordPress themes, such as Twenty Fifteen, Twenty Sixteen, and Twenty Seventeen. Meanwhile, the Template Editor is only available for block themes like Twenty Twenty-Two, Blockbase, and Tove.

Moreover, ensure that you have set your WordPress site to display a static homepage. To do that:

  1. Log in to the WordPress dashboard and navigate to SettingsReading.
  2. On Your homepage display, choose the static page option and select Homepage from the dropdown list.
  3. Click Save Changes to confirm.

Adding a Logo With WordPress Customizer

To add a new logo using WordPress Customizer, follow the instructions below:

  1. Install and activate a WordPress theme that supports Customizer via the WordPress dashboard. In this tutorial, we will use the Twenty Fifteen theme.
The Twenty Fifteen theme, with the Activate button highlighted
  1. Navigate to AppearanceCustomize.
The WordPress Appearance screen, showing the Twenty Fifteen theme window and the Customize button
  1. In the Customizer page, head to the left sidebar and click Site Identity.
  2. Next, click Select logo to open the media library.
The WordPress Customizer screen, with the button Select logo highlighted
  1. On the Upload files tab, click Select Files and choose the custom logo file you want to upload.
The WordPress Media Library, with Select Files highlighted
  1. Once uploaded, highlight the logo and click Select.
The WordPress Media Library screen after uploading the custom image
  1. You might need to adjust the WordPress site logo if it is too large. Once finished, click Crop image to insert the logo into the editor.
The Crop image screen on the WordPress Media Library, highlighting the Crop image button
  1. Next, click Publish to save the changes.
The WordPress Customizer screen, highlighting the Publish button

To strengthen your WordPress site identity, you can also use the logo as the site’s favicon, but note that WordPress recommends using at least 512 x 512 pixels.

Adding a Logo via WordPress Template Editor

To add a custom logo using the Template Editor, follow the steps below:

  1. Install and activate a theme that supports the feature. In this tutorial, we will use Twenty Twenty-Two.
The WordPress Twenty Twenty-Two theme description page, with the button Activate highlighted
  1. After activating the theme, go to PagesAll Pages. Then, select your front page.
The WordPress Pages screen, with the front page selected
  1. You will be redirected to the block editor. Navigate to the Settings sidebar → SummaryTemplate.
The WordPress block editor, highlighting the Template option on the Settings sidebar
  1. Next, click on the Page button and select Edit template to open the Template Editor.
The Template pop-up window, highlighting the Edit template button
  1. Select the Header template.
The Header template on WordPress Template Editor
  1. To add the logo, select the Site Logo block and upload the image. Click Select to insert it into the editor.
The Site Logo block on WordPress Template Editor
  1. Next, click the Update button. The editor will inform you that the changes will affect the whole site. Click Save to confirm.
The Save button on the Template Editor

Changing the Logo With Custom CSS Styles

To modify or customize WordPress logo styles further, you can use Additional CSS. This feature lets you add Cascading Style Sheets (CSS) classes to a specific block and style it to suit your needs.

A CSS class groups HTML elements together to simplify styling. Instead of writing the CSS rules within HTML content tags, you can add the code separately as an addition.

Since this feature is only available on WordPress Customizer, we will use Twenty Fifteen as an example. Follow the steps below to add custom CSS code and style your logo:

  1. Navigate to AppearanceCustomize to open the Customizer screen.
  2. On the editing area, right-click on the logo image and select Inspect to open the Inspect Element tool.
The WordPress Customizer screen, highlighting the Inspect button
  1. Hover over the highlighted HTML tag and locate the CSS class shown above the logo. In this case, the CSS class value is img.custom-logo.
The WordPress Customizer screen, highlighting the logo's CSS class
  1. Close the Inspect Element tool and return to the Customizer screen. Then, click Additional CSS on the left sidebar.
The Additional CSS button on WordPress Customizer
  1. In the Additional CSS editing area, type the CSS class – img.custom-logo in our case. Then, add your own CSS properties to customize WordPress logo styles. Here is an example:
img.custom-logo {
border: 5px solid black;
border-radius: 10px 20px;
height: 130px;
width: auto;
}
  1. The output should look like this:
The Additional CSS editing area, showing the custom CSS code and the modified logo
  1. Click Publish to save the changes.

Changing the Logo on the WordPress Login Page

It is also possible to replace the logo on the login page with your custom image. You only need to modify the active theme’s functions.php file using your web hosting control panel or the WordPress theme editor.

We will show you how to change WordPress logo images on the login page via the Hostinger control panel, hPanel:

  1. From the hPanel Dashboard, open the File Manager.
  2. Next, navigate to public_htmlwp-contentthemes. Then, open your active theme directory – we will use the Twenty Fifteen theme.
  3. Find the functions.php file, scroll down to the bottom, and add the following code snippet:
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url(insert_the_logo_url_here) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');
  1. Next, copy the URL of the logo file from the WordPress media library. Paste it within the URL value’s brackets, like this: url(https://yourwebsite.com/wp-content/uploads/2022/12/logo-example.png).
  2. Once finished, click on the Save button.

Pro Tip

Learn how to create a logo with Hostinger AI Logo Maker.

Conclusion

Adding a custom logo to your WordPress website is an important step in establishing an engaging and strong site identity.

In this article, you have learned multiple methods of adding and changing a custom logo in WordPress – using WordPress Customizer, Template Editor, and custom CSS code.

To make the site identity even more consistent, we have also provided instructions on changing the logo on the WordPress login page.

We hope this article has helped you understand how to configure a logo in a WordPress website. Good luck!

How to Change Logo in WordPress FAQ

Find answers to some common questions about changing the logo in WordPress below. If you still have questions about how to change the logo on your website, please leave a comment below.

What Are the Common Logo Sizes in WordPress?

When uploading a logo file via the WordPress media library, you will see suggested image dimensions of 248 x 248 pixels. Thus, we recommend using this logo size for the best result.

Can You Change the Size of the WordPress Logo?

Yes, you can change the logo size by editing the image before inserting it into the page. To do that, open the WordPress media library and select the logo image. On the Attachment details window, click Edit Image to customize WordPress logo sizes.

What File Format Should I Use for the Logo?

We recommend using the SVG format for your logo, as it is lightweight and can be rendered at any size without losing its quality. Moreover, search engines like Google can read the text in the SVG file.

Author
The author

Yoga K.

Information Technology and web development are Yoga's passions. He loves nothing more than sharing his experience with readers, and helping them to understand the world of IT. In his spare time, Yoga likes to make music and learn to code. He is always looking for new challenges, and enjoys pushing himself to learn new things.