How to add and remove a logo and site icon in a WordPress block theme

Quickly learn how to add a site logo and site icon using the site editor in a block theme.

Learning outcomes

Learners will be able to…

1. Add a site logo and site icon to a WordPress block theme

Comprehension questions

1. True or false? Your site icon and site logo must be the same image.
2. True or false? In order to add a site icon, you must add a site logo block first.
3. True or false? All site logos make good site icons.
4. Why should you add an image alt tag to your site logo?

Transcript

Hi, and welcome to Learn WordPress. Today we will explore how to add site logos and site icons in WordPress block themes. Let’s get started.

By the end of this lesson, you will be able to add a site logo and site icon to a website that uses a block theme. To start, what is a logo and why do you need one? Well, a logo is a graphical representation of you, your brand, your company, or even simply your website, and all the ideas that it contains. A logo represents your brand and helps people recognize and trust you. Once you see the logo of a well known brands such as Reddit, LinkedIn, WordPress, or maybe other well known brands, you often immediately know who the company is. Or if you’re unfamiliar with that company, you might draw some assumptions about each one based on their logos and site icons. Now, logos most often appear in a website’s header or footer, whereas site icons are most often displayed in the browser tab and bookmark bars. For those of us who often have way, way too many tabs open at once, these site icons are how we figure out quickly which tab we need.

Before you can add an icon to a block theme, you need to add a logo, so we’ll start there. To set the site logo in a block theme, you’ll head to Appearance > Editor.

Note that the site editor is not the theme file editor, which is a button that sometimes shows in the Appearance section. It’s just something to note. Your block theme may already include a blank site logo block in its header template part, such as if you’re using the 2022 theme as you see here.

However, what should you do if you’re using the newest 2023 theme or another block theme, and a site logo block doesn’t already exist? You’ll notice if I expand my full header template part in the 2023 theme, there isn’t a site logo. So how can I add one? The first thing I’ll do is decide where I want this logo. I think I’d like to put it before the site title. So using my list view, I’m going to click Site Title. Select these three dots and click, “insert before.”

I will now use my inserter up here

to search for site logo.

Voila, that has been added.

To start, I will click “site logo” in my list view, then “add a site logo” button.

This will take you to your Media Library where you can select an existing image or upload a new file just like you do with standard images. Let’s upload something new.

When you select the photo you would like to use as your site logo, make sure to write some Alt Text in this box here. This Alt Text is excellent for both accessibility people who use screen readers to be able to understand what is on the screen, and for search engines to find and list your website in search results. A best practice for logos is to use the name of your website or business and the word, “logo”. So for example, I will write “Pirate Parrot Rescue Logo”.

If there were any other text in this, I would want to include this as well. Please know that if a logo is used to link to your homepage, it can’t be marked as purely decorative.

So make sure to include this. Once I’ve selected my logo and entered my alt text, I can click Select. I now have a logo on my block theme.

Now that we’ve uploaded your site logo, as long as you’re using a block theme, you will find that you have a lot of control over how this logo appears and where it goes. Do be aware that you may need to experiment a little bit, placing these in groups or in rows to get the effect that you’d like.

However, unlike in classic themes, you will not need to use code to make many immediate changes like this one. With the site logo blocks toolbar, you can do a lot; you can use a duotone filter on your logo to give it a new effect perhaps some new colors.

You can also clear it,

you can crop the image into different ratios

you can replace your logo by clicking the “Replace” button, selecting a new one from your Media Library.

Or you can reset it entirely starting it at its default place. You also have additional block settings under the settings toolbar over here.

This toolbar gives me many additional options such as making an image as large or as small as I want down to the pixel.

I can choose to make this logo a link that

opens in a new tab.

And it’s also where you will find the setting to set a site icon. Setting a site icon will also change the WordPress logo in the top left hand corner of your website. Before we move on, please note that some logo options in your settings such as changing your logo into a round icon may differ depending on what is available in your block theme.

Let’s see what happens if I use this as a site icon.

I refresh the page.

And you can see, my site icon has changed both here and that “W” and up here in my browser. Now what if you want a site icon without a site logo? Well, you’ll need to set a logo first, but you can always delete it later and your site icon will remain. But let’s say that I didn’t want my logo to match my site icon. Not all site logos make great site icons. What’s easy to read here cannot even be made out here. What is that, a frog? Let’s pick a different icon.

I’m going to click on this site icon Settings button which will take me to an abbreviated version of the customizer. If I scroll down, I have the option to remove this image. And I can also select a different site icon entirely. So, let’s pick something else. This is a little bit bigger. So I’m going to select this. It looks a little bit more like a parrot and a little bit less like a frog.

Now if I head back to my editor,

and refresh, my site icon is different than my site logo. Well done. You now have a site logo and a site icon.

For more tutorials, live online workshops and courses, please visit learn.wordpress.org We’ll see you next time