You just have purchased Divi theme and you're wondering how can Divi Favicon be added?
As a person searching on the web, visiting websites here and there, I am sure you noticed those tiny icons that appear in the browser tab right after the site finishes loading. You might also see them if you tried to bookmark a certain page for later.
Those small images or site icons are called favicons.
In this post, we're going to discuss some important points about favicons then dig deep into how to create them and how to add them to your website if you're using the Divi theme.
So, without further ado let's get started!
Things to Know about Favicons
Here we are.
in this section, we're going to talk about some crucial things about favicons that you must know as a developer creating WordPress websites for clients or as a site owner.
1 – What's Divi favicon?
The favicon of a site is simply a small pixel icon that acts as a branding element. it's usually a tiny version of the logo or sometimes the abbreviation of the brand's name (one to three characters of text).
For instance, this website you're reading now has a favicon that's is the short version of the logo (the first letter of the website's name designed into a beautiful icon) that you can see in the browser tab as shown below:
You'll also notice it in the websites of most of the major popular brands nowadays for example:
Amazon biggest shopping website has a favicon as seen below:
Facebook social media website has a one as seen below:
And Even the Google search engine has the letter “G” of the name colored as a unique favicon
If you're using the Divi theme or you think to use it to build your website. then once you install and activate the theme from the WordPress dashboard. You'll see the default icon of “Divi” as the favicon but stick around because we're going to explain how you can create your own favicon and replace the default one.
2 – Best Divi Favicon Size / Dimensions
Now that we have seen examples of the favicons, we're going to talk a little bit about the right sizes and the exact dimensions that will give us the best result.
The best dimensions for a favicon is 16×16 pixels which is the optimal size and the size that in which they're commonly displayed although, you can see them in larger sizes such as 32×32 pixels or even larger.
WordPress recommends that the site icon be at least 512×512 pixels initially then it's been resized to the correct dimensions in each device, that way it will preserve its quality.
3 – The Favicon file format for Divi Theme
In general, whether you're using the Divi theme or using the Divi builder along with another WordPress theme the file formats for a favicon are: .ico, .png, .jpg.
4 – Why Favicons are important?
Before we jump into creating a favicon. First, let us elaborate on why it's important? why would you want to add it to your WordPress website?
In terms of the importance of having a good favicon on your website we can list them in 4 main points as the following:
Branding: when it comes to building a successful brand online it's crucial not to overlook the small and tiny details as it contributes to your website visibility. Besides, it makes the design and the style of your website appear perfectly on web browsers and everywhere.
User Experience: The favicons don't only appear in the browser tab, they're also displayed in many other places like:
- when someone bookmarks a page from your website
- In the history of your visitor's browser
- In the search bar
- Search recommendations
As a result, it becomes very important to have a memorable icons to make it easier for your users to recognize your brand.
Professionalism: focusing on such as small details in your business adds legitimacy and makes your brand looks professional to a great extent and consequently, attract more potential customers.
Divi Theme Favicon Guide
Here we're in the actionable part of this article in which I am going to walk you through creating your favicon and adding it to your divi site.
let's continue …
1 – How to create a favicon for your Divi website?
Here are some of the ways to create a favicon for your divi website:
Use software: If you're a little bit of experience in Photoshop or illustrator then it would be a piece of cake to create a favicon, you'll just design a short version of the name or if you have used an icon in the logo it would be a perfect favicon.
Use an online generator: This is the easiest option that will let you create a favicon in a few clicks and there are a lot of free generators online. If you want to design it yourself then you can use an online designing tool like Canva and use Iconfinder to find some beautiful icons.
Hire a freelancer: For those who want to save time, you can hire a freelancer on platforms like Fiverr and get a professional site icon.
2 – How to add Favicon to Divi theme?
Now that you've done designing the favicon, let's see how we can add it to the website step by step.
The first step is to log in to your WordPress dashboard and head over to Appearance > customize
Or Hover the mouse over “Divi” then choose “Theme customizer”
In both ways you'll end up in the settings of your website, choose “general settings”
Then “Site identity”
Here we are, now click “Select site icon” button in the very bottom as shown below
Now select or drag and drop the favicon you have designed.
After choosing the Divi favicon make sure that the icon is 512×512 pixels Then click “Select” in the right bottom corner as you can see below.
Now the Divi favicon is replaced by your own one and you'll see it in the browser tab and also in the preview given by WordPress like the one you see below which shows you how the icon is appearing on your website.
Now go and save the changes by clicking the “publish” button in the top right corner
Congratulations for adding the site icon to your Divi website.
3 – Tips for a perfect Favicon
Here's some tips and important points to keep in mind while creating a Favicon for your WordPress website:
Simplicity: it's important to keep your favicon as simple as one letter or icon because making a lot of details will make it unclear due to its small size.
Brand match: In order to keep the style and design of your website consistent, you need to make sure the favicon and such as teeny-tiny things match your brand as well. You can do that by using the same color, font or the same icon if you used any in your logo.
Little to no text: If you're planning to include some typography in the favicon such as the brand name then make sure to limit yourself to one to three characters. Instead of using the whole name including only the initials or abbreviation can be a good choice.
Transparency: one of the best prices for favicons is to choose the .png file format which makes the shape or icon you used for your favicon appear with a transparent background. Unlike .jpg which makes the favicon appear as a square.
4 – FAQs
How to update divi favicon?
You can update the Divi favicon anytime you want via the theme customizer, you just need to remove the current one and select your own.
How do I add a favicon to all pages?
The favicon will be added to all your pages once you add it from the theme customizer. so you won't need to add it to every new page you create.
Why is Divi Favicon Setting missing?
In the new version of the Divi theme, the favicon setting option is removed from “theme options” so in order to change the favicon you need to go to Theme Customizer -> General Settings -> Site Identity -> Site Icon
Futher Reading:
- How to Hide or Remove Divi Sidebar?
- Divi Logo: Change size, Customization Guide & [Expert Tips]
- How to Edit Divi Theme Footer [Easy Guide]
- Divi Fonts Guide: Add Custom Fonts & Google Fonts
Roundup
A favicon is a small detail of your website that can be created and added to your website within few minutes and it has a lot of benefits for you as a site owner and for users visiting your website. so If your site favicon is missing then go ahead and add one.
Let me know your thoughts or if you have any question in mind then feel free to drop them in a comment below.
