A site icon, also known as a favicon, is a unique icon representing your website. This icon shows in various places, and is what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. The recommend size for this is always square with at least 512 × 512 pixels width and height. In this tutorial, I will show you where you can add the browser tab site icon “favicon” when using the Divi Theme.
▶️ Please watch the video above to get all the exciting details! 👆
The Old Way: Add Site Icon From The WordPress Customizer
First, let’s talk about the old way to add the browser tab site icon in WordPress. Back in the days of the Customizer, most of your site configurations were actually set there, rather than in the backend settings. Thankfully, the Customizer is slowly being depreciated and being used less and less in plugins and themes.
The New Way: Add Site Icon From The WordPress General Settings
Recently, WordPress quietly added the setting for the Site Icon in a new location in the WordPress>General Settings. This seems like a great idea, and makes a lot of sense to me. The reason for this change is because of the move towards “block-based themes” and the WordPress Site Editor, but those are not relevant when using Divi. However, even though the current version of the Divi Theme still has the Customizer, I would not be surprised if eventually this becomes used less and less as settings appear in other locations.
Here is how it looks after an icon is already added. It is nice that they provide the preview.
You can of course change the site icon or remove the site icons as needed.
So in summary, even though you can still set the site icon Favicon from the Customizer in the current version of Divi, I would expect that to go away eventually, so this is why I wanted to make this post to keep everyone aware of the new location to set this.
0 Comments