How To Add and Remove Logo And Site Icon in Site Editor


In this lesson, you will learn what is a logo and site icon. Where they are displayed, how to add and remove one without the Customizer.

Objectives

After completing this lesson, participants will be able to:

  • Identify a logo and where it appears
  • Add and remove a logo to your site without Customizer
  • Identify a site icon and where it appears
  • Add and remove a site icon to your site without Customizer

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

Readiness Questions

  • Can you install WordPress?
  • Can you install a WordPress theme?
  • Are you familiar with the Site Editor?

Materials Needed

Notes for the Presenter

  • It will be helpful to have a local site created before this lesson with the Twenty Twenty-Two theme installed. If you use a different block theme, you may need to tailor the Lesson Outline.
  • Participants may need to download and install WordPress 5.9 or later as well as the Twenty Twenty-Two theme before beginning
  • Feel free to change the graphics for the site

Lesson Outline

  • Explain what a logo is and why you need one.
  • Demonstrate how to add and remove a site logo without the Customizer.
  • Explain what a site icon is and why you need one.
  • Demonstrate how to add and remove a site icon without the Customizer.

Assessment

Why do you need a site logo? (select all the correct answers)

  1. To look cool
  2. To help people identify your brand
  3. To build trust with your audience
  4. To be accessible

Answer: #2 and #3

Where does the site logo usually appear? (select all the correct answers)

  1. In the website footer
  2. Smartphone home screen
  3. In your website header

Answer: #3

Where does the site icon appear (select all the correct answers)

  1. Browser menu bar
  2. Smartphone home screen
  3. Website footer

Answer: #1 and #2

You can only use your logo as your site icon.

  1. True
  2. False

Answer: #2

Additional Resources

Example Lesson

What is a logo and why do you need one?

A logo is a graphical representation of your company (or you if you don’t have one). It represents your brand and helps your visitors easily recognise you and build trust. For example, when you see a big red cross what do you think of? The Red Cross. Once you see the logo, you immediately know who the company is.

Check to see if your WordPress theme has any limits on the size of your logo. It is good to have a logo for light backgrounds and another one for dark backgrounds.

How to add and remove a site logo without a Customizer

Before full site editing (FSE), if you wanted to make changes to your theme you would do this using the Customizer. With FSE, making changes to your theme is now done in the Site Editor.

Adding a site logo

  1. Open your local test site
  2. Go to Appearance > Editor.
appearance-editor-menu
Appearance – Editor
  1. This defaults to the Site Editor screen where you can make changes to different pages and elements on their site. You also see how any changes you make will look on the front end (desktop, tablet, and mobile).
  2. Confirm they are on the right page. If using Twenty Twenty-Two they will see the header with the bird pattern.
Site Editor screen
  1. Show them they can either:
    1. Click on a block element
    2. Go to the List View, to see the elements on their page
A Home page header view in Site Editor
Home – Header view Site Editor
  1. When you hover over the site logo block, “Add Site Logo” should appear. Click on the site logo block to bring up the “Media Library”.
site logo block
Add a site logo
  1. Select the graphic you want to use. If the file does not already exist, click on “Upload” to browse your computer and add it to your library. When adding any media to your library, make sure to add the alternative text (alt-text). Alt-text is used by screen readers for site visitors with a loss of vision. Read all about alt-text and how to describe the purpose of an image.
  2. By default, your logo will be cropped if it is not square and link to your home page. You can change the style and settings by clicking on one of the available options in “Styles” or the “Settings” panel in the selected Block settings.
site logo block styles and settings options
Site Logo Block Settings – Styles and Settings
  1. To see what the icon looks like on different devices, click on the Preview link at the top of the screen and select the option you want to view.
preview button
Preview button
  1. If you like the way it looks, click the “Save” button at the top of the screen.

Removing the site logo

  1. Click on the site logo block and then click on the “Replace” button.
replace the site logo button
Replace the site logo button
  1. You might need to click on the three vertical dots at the top of the screen to make the “Replace” button appear in your options.
more tools and options icon (three vertical dots)
More tools and options
  1. You now have three options.
    1. Replace the site logo with an image from the “Media Library”.
    2. “Upload” a new one from your computer.
    3. “Reset” the site logo block. Resetting the site logo block removes the icon and the block now shows up as empty.
options to replace, upload or reset the site logo
Site Logo Block Replace Options

What is a site icon and why do you need one?

The site icon, also known as a Favicon, is a small graphic that is linked to your website. You see them on your browser (bookmarks, search bars, history results, toolbars) and on your devices as an app icon.

Having a site icon makes it easier for your site visitors to identify you. It also hides your site tagline when adding an icon to a mobile home screen or viewing multiple tabs on a browser, taking up much less space and making it easier to find.

Adding a site icon

  1. Select the Site logo block to access the “Settings” panel.
    1. If you want to use your logo the “Use as a site icon” toggle button is on by default.
    2. If you want to use a different icon, click on the “Site Icon Settings” link.
use as a site icon toggle and site icon settings link
Site Icon – Toggle and Settings
  1. Clicking on the “Site Icon Settings” link will take you to the Customizer > Site Identity.
  2. At the bottom, in the “Site Icon” section, click the “Select site icon” button.
    1. If the site already has an icon, you will see a “Select image” button instead.
Select site icon in Customizer
Customizer – Select site icon

Your WordPress theme may have recommendations for the shape and size of your site icon.

  1. You can select a graphic from your “Media Library” or “Upload” a file from your computer.
  2. Once you’ve selected the graphic you want to use, click the “Select” button at the bottom of the screen. Don’t forget to include the alt-text.
  3. If your image is not a square, you will be prompted to crop your image.
crop image for site icon
Site Icon – Crop Image
  1. After cropping, if needed, you will be returned to the Customizer and can see a preview of your site icon in the browser tab.
site icon preview in Customizer
Customizer – Site icon preview
  1. If you like the way this looks, click the “Publish” button at the top of the Customizer to save your changes.

Removing a site icon

  1. After clicking on the “Site Icon Settings” link in the site logo block settings panel, you will be taken to the Customizer > Site Identity.
  2. At the bottom, in the “Site Icon” section, click the “Remove” button. This will remove the site icon.
    1. Clicking on the “Change image” button will take you to the Media Library where you can use an existing graphic or upload a new one from your computer.
  3. Click the “Publish” button at the top of the Customizer to save your changes.
publish button on Customizer Site Identity
Customizer – Publish Site Identity

Exercises

Add a site logo to your site

Follow the steps above to add your site logo to the site

Remove your site logo

Follow the steps above to add your site logo to the site

Add a site icon to your site

Follow the steps above to add your site logo to the site

Remove your site icon

Follow the steps above to add your site logo to the site

Lesson Wrap Up

💡 Follow with the Exercises and Assessment outlined above.