Adding a site icon to your WordPress theme is essential for improving the visual representation of your website in browser tabs, bookmarks, search results, and app shortcuts. Here’s a straightforward guide on how to accomplish this:
Method 1 – Using the Site Editor:
- Open the Site Editor.
- Locate and open the header you’re currently using on your website. For this example, we’ll assume you’re using the default stacked header.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-1024x768.png)
- Find your site logo within the header.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-1-1024x768.png)
- In the block settings for the Site Logo block, click on the Site Icon Settings hyperlink.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-2-1024x768.png)
- This action will launch the older customizer.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-3-1024x768.png)
- Look for the Site Icon section and click on “Change Image.”
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-4.png)
- Select the icon you want to use.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-5.png)
- Finally, publish the changes you made.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-6-1024x768.png)
Method 2 – Enabling the Legacy Customizer:
By default, the Legacy customizer is disabled in block themes because it is rarely needed. However, you can enable it if necessary:
- Open Popcorn Options.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-7-1024x768.png)
- Enable the Legacy customizer and save the changes.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-8.png)
- Now, go to Appearance > Customize.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-9-1024x768.png)
- This will launch the older customizer.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-3-1024x768.png)
- Look for the Site Icon section and click on “Change Image.”
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-4.png)
- Select the icon you want to use.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-5.png)
- Don’t forget to publish the changes.
![](https://docs.popcorntheme.com/wp-content/uploads/2023/05/image-6-1024x768.png)
By following these steps, you’ll be able to easily add a custom site icon to your WordPress theme, enhancing the visual appeal and recognition of your website across various platforms.
Leave a Reply