How do I add a favicon to my Divi theme?

Updating your WordPress favicon so your website or blog looks better and more professional is a good idea when setting up a new site.

A favicon is the little thumbnail image that you find in search tab of your web browser before your website title.

Favicon example freerangeentrepreneur

WordPress favicons help to improve your branding and site authority by looking more professional and is good practice to add one to your site.

What is the best size for your favicon?

The size of a WordPress favicon can vary. The favicon size in your browser is 16 x 16 pixels however you can use larger square sizes of 32 x 32 or 64 x 64 or bigger. WordPress actually recommends a large size of 512×512 pixels.

The reason for this is that the favicon is not only used for web browser tabs but also for bookmarks and those require a bigger image size.

How to create a WordPress favicon?

There are many ways to create a favicon, you can use Photoshop or most other graphic editors. If you don’t have a premium graphics software even a basic app like MS Paint will do the job.

You can also use a free online favicon generator or find a favicon source image online.

Free favicon generators

If you search Google for free favicon generator then you will find lots of them. For example favicon.io.

Use a free icon

You can also go to Iconfinder and search for a free icon. Bear in mind to use something that is not too detailed because it will be hard to see this in the icon tab which is only 16 x 16 pixels.

How to Install a Favicon?

Upload to root directory

  1. Create or source an image to use as a favicon.
  2. Rename the .png or .ico image to favicon.
  3. In your hosting account, go to the File Manager, select the directory for your site (typically the main domain public_html location) and Click Go.
  4. Upload the favicon.png or .ico file into your public_html folder (replacing the existing one if one is already present).
  5. Reload your website, and you’ll see the favicon. You may need to hard refresh to clear your browser cache by pressing Ctrl + F5 (Windows) or cmd + R (mac) in order to see any changes.

Divi Theme – Update through WordPress favicon settings

If you are using a Theme such as Divi by ElegantThemes you can upload a favicon via the WordPress dashboard.

The location to upload you favicon is as follows

Divi > Theme Customizer > General Settings > Site identity > Site Icon.

In WordPress, favicons are called site icons.

You can use the file formats .ico, .png, .jpg.

If you upload a favicon of 512×512 pixels, WordPress will automatically generate the appropriate size for each use case needed.