How to add a favicon to Divi

a favicon (short for favorite icon) or Site Icon is a small icon image that is most commonly displayed with your website title in browser tabs.

To add a favicon to Divi you will need to use the Theme Customizer to upload your favicon image.

The primary use of a favicon is to help users locate your pages tab faster when they have multiple browser tabs open at once. It can also be used in the browser bookmarks bar, in the browser address bar, in desktop icons, and in Google search results.

This guide to the Divi favicon will outline;

• How to add a favicon to a Divi website
• Why use a Favicon
• Favicon size and file format
• Favicon design tips

How to add a Favicon to Divi

To upload your favicon to Divi you should use the WordPress Theme Customizer Site Icon setting which was introduced in WordPress version 4.3. When using the Site Icon feature in the Theme Customizer you do not need to create a favicon.ico file as WordPress will resize your 512px image to the other required sizes.

Follow the steps below to use Site Icon to set up a favicon for your site.

1. In the backend WordPress dashboard go to Divi > Theme Customizer > General Settings > Site identity > Site Icon or Appearance > Customize > General Settings > Site identity > Site Icon
2. Click on the Select Site Icon button and browse to your image. Your image should be at least 512 x 512 pixels in size and you can use .ico, .png, .jpg file formats.
3. Once uploaded you will see a preview of your favicon in the settings.
4. Click the blue Publish button at the top of the settings and your new favicon is uploaded to your website

Note – You can no longer use the Divi Theme Options to upload a favicon. Previously this was possible in Divi > Theme Options but after WordPress Version 4.3 this option was removed in favor of the Theme Customizer site Icon method.

Why you should add a favicon

• Help users find your site tab quickly – The original and most important function of your favicon is to help users quickly identify your site when a number of browser tabs are open.
• Google search results – Google search results on mobile (and sometimes on desktop) include the site favicon to the left of the search result title. This helps users identify your site branding and can also lead to better click-through rates for your links.
• Brand awareness – Each time a user sees your logo in a favicon it reinforces your branding.

Best size and file format for your favicon

A favicon will need to be a number of different sizes in order to display correctly in various locations. These different sizes are automatically generated when you add a site icon using the WordPress customizer.

• WordPress recommends you upload a Site Icon with a size of at least 512×512 pixels.
• A favicon image should be in either the png, jpeg, or gif file format.

The favicon size used in the browser tabs and Google search results is only 16 ×16 pixels, but you should not upload at this size as the icon will also be used in locations that require a larger size.

Google recommends that a favicon size should be a multiple of 48px square, but I make my favicon/site icon 512px by 512px in line with the WordPress recommendations.

Design tips for your favicon

Due to their small size, favicons work best as simple images or one-to-three characters of text. Favicons are not to be confused with logos but are sometimes the same. Due to its small size and resolution, the favicon may need to be an even smaller sizer or part of a company’s original logo.

You can see a few good examples of what a favicon should look like in the image at the top of the posts. Keep your designs simple, and bold, and maintain as much branding identity as possible with such a limited space.

• Keep it simple – When displayed at 16 x 16 pixels any details you may have in a favicon can easily be illegible, so keep the image as basic as possible without any fine details.
• Keep your branding – You may not be able to include your whole logo in a favicon but if you can use a single letter of your logo or part, or the whole, of any icons in your logo.
• Contrast with the browser – Your favicon will mostly be displayed on a light grey color of a browser so making the color contrast will help it stand out and get more clicks. Having a transparent background to your favicon can help with how the graphics merge with the browser color.

Final thoughts on favicons in WordPress websites

A favicon is easy to make and easy to add to your website via the Theme Customizer. A favicon provides a huge benefit to you and your site users, so there really is no reason not to include one.

If your site favicon is missing, get one now!