 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 brand 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 a 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 some hosts show 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 that there isn't a site logo. So how can I add one? 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 write 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 and 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, Pirate, 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 home page, it can't be marked as purely decorative. So make sure to include this. Once I've selected my logo, 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, 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 that my Site Icon has changed, both here in 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 parent 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.