WordPress.org
Get WordPress

Customizer: Site Icons And Logo

In this lesson, you will learn what is a site icon, where they are displayed and how to add one. You’ll also learn how to add custom icons to your site.

Objectives

After completing this lesson, you will be able to:

  • Identify what a site icon is and where it appears
  • Add a custom site icon to your site
  • Identify what a logo is and where it appears
  • Add a custom logo to your site

Prerequisite Skills

You will be better equipped to work through this lesson if you have experience in and familiarity with:

Assets

Screening Questions

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

Teacher Notes

  • Students should have a sandbox site (preferably a local site, but it could be a non-critical site on a server) that they can make changes to during the lesson.
  • Feel free to change the example color scheme and text that are included in the lesson.
  • It’s preferred participants reply “yes” to the screening questions #1-2.
  • You may print out the Hands-On Walkthrough part to use it as handouts or send it out as a .pdf file to keep it green and preserve the links used throughout the document.

Hands-on Walkthrough

What is the site icon and why you need it?

The site icon, also known as a Favicon, is a small graphic that appears in the browser menu bar, next to a link in the browser favorites menu, and as an icon when a site is saved to a smartphone.

How to add your site icon.

Obtain your site icon graphic or use the provided image. Images should be square an a minimum of 512 px by 512 px. If your image is not square, you will have the option to crop it inside of WordPress.

  1. In the WordPress Dashboard, go to Appearance and then Customize.
  2. Select Site Identity.
  3. At the bottom, in the Site Icon section, click the Select Image button.
  4. Browse your computer to find and upload your file.
  5. Add alternative text and hit the select button.
  6. If your image is not a square, you will be prompted to crop your image.
  7. After cropping, if needed, you will be returned to the Customizer and can see a preview of your site icon in the browser tab.
  8. If you like the way this looks, click the Save & Publish button at the top of the Customizer.

What is the site logo and why you need it?

The Site Logo allows you to replace the default text-based Site Title and Site Tagline with a graphical logo. This feature, introduced in WordPress 4.5 is not supported in every theme.

  1. In the WordPress Dashboard, go to Appearance and then Customize.
  2. Select Site Identity.
  3. At the top, in the Logo section, click the Select Logo button.
  4. Many themes will list the suggested image dimensions for that specific theme. For example, Twenty Sixteen suggests that your logo be 240 px by 240 px.
  5. Select your logo from the media library, or click the Upload Files tab to upload your logo
  6. Add alternative text and hit select
  7. If needed, you will be prompted to crop your image.
  8. After cropping, if needed, you will be returned to the Customizer and can see a preview of your site logo.
  9. If you like the way this looks, uncheck “Display Site Title and Tagline” then click the Save & Publish button at the top of the Customizer.

Exercises

Exercise: Add your site icon to your site

  • Follow the steps above to add a site icon to your site.

Exercise: Add your site logo to your site

  • Follow the steps above to add a site logo to you site.

Quiz

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

  1. Browser Menu Bar
  2. Smart Phone Home Screen Icon
  3. Website Footer

Answer: #1 and #2

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

  1. Website Footer
  2. Replaces Site Title in Website Header
  3. Smart Phone Home Screen

Answer: #2