Previous Lesson

Uploading Your Logo and Favicon

Your logo is one of the first things people notice about your business. It can usually be found in your website header, social media profiles, business cards, etc. In this lesson, we’re going to upload your logo and your favicon (which is the little icon you see in browser tabs, bookmark bars, and within the WordPress mobile app, remember?)

For my mindfulness example project, I went with a simple design, which is the one you’ll see me uploading in the video below. 

Uploading Your Logo

In order to upload your logo, we’ll have to revisit the Global Header section of your website, just like we did when we customized the active link color in the menu: 

  1. Go to Divi > Theme Builder > Global Header and click the little pencil icon on its left.
  2. Let the menu and the logo load. Select the module and press the wheel icon to access the Menu Settings.
  3. Click the Logo dropdown and the Logo image to change it.
  4. Go to the Upload Files tab, click on the Select Files button and pick the file you want to upload.
  5. Select your uploaded logo and click on the Upload an Image in the bottom right corner.
  6. If needed, adjust the size of the logo by heading over to Design > Sizing and changing the Logo Max Width value.
  7. Click on the green button with a checkmark to confirm the changes.
  8. Click the purple “…” button to open the Visual Builder menu.
  9. Click the Save button on the right to save changes.
  10. Click the X button to leave the Theme Builder.

The following video will show you how to follow the instructions above and easily upload your very own logo:

Uploading Your Favicon 

 First, just make sure your favicon is optimized: favicons work best as small and squared PNG files. Mine is a 50px x 50px image.

Okay, now we’re ready to upload your favicon file! Just follow these steps: 

  1. Access the Theme Customizer (Appearance > Customize from your WordPress Dashboard).
  2. Go to General Settings > Site Identity.
  3. Click on Select Site Icon and upload your Favicon file (skip cropping if prompted).
  4. Publish changes.

And voilà! Your website is now showing your very own logo and favicon.