How to add favicon in WordPress?

How to add favicon in WordPress?

A favicon, also known as a website icon, is a small image that appears in the browser tab when someone visits your website.

It plays an essential role in your website’s branding.

Now the question arises: can I add a favicon to my WordPress website?

Yes, this can be done easily with a few clicks.

Before we proceed to the topic of how to add a favicon in WordPress, let’s first look at the benefits of having a website icon.

Why is it necessary to add a favicon to our website?

A favicon is a unique brand identity that helps make your website prominent to visitors with multiple tabs open in their browsers.

Popular search engines like Google also encourage using favicons to ensure your website stands out visually in search results and makes a memorable first impression.

Choosing the Right Favicon Image

Before adding a favicon to your WordPress website, ensure you have an image with the correct format and dimensions.

Image format:

You can use .png or .ico image format for favicon. While the .ico format was used in older versions of WordPress, it’s now recommended to use the .png format for optimal compatibility and display across different browsers and devices.

Image dimensions:

In terms of dimensions, a square image works best for both .png and .ico format favicons.

The ideal size for a .ico favicon is 16×16 pixels or 32×32 pixels. However, you can also use larger sizes like 48×48 pixels or 64×64 pixels if needed.

While if we use a .png image for the favicon, the latest WordPress version recommends a size of 512×512 pixels.

Now that we have the perfect favicon icon let’s move on to the exciting part: adding it to our website.

How to add favicon in WordPress website? (3 Ways)

1. Using WordPress default customizer

The easiest and most common way to add a favicon in WordPress is by using the default customizer. Here are the steps that you have to follow:

Step 1. Log in to your WordPress dashboard.
Step 2. In the left side menu, navigate to Appearance -> Customize.

Theme customize options


Step 3. At the top, click on the Site Identity section.

Site Identity


Step 4. Scroll down the left sidebar and click the “Select Site Icon” button.

Select site icon image


Step 5. Choose your favicon image from the media library or upload it from your PC. The recommended image size is 512×512 pixels, and the format should be .png.

Upload image from media library


Step 6. Select the image and carefully crop it to ensure a perfect fit.
Step 7. Once your favicon is ready, click the Publish button at the top of the Customizer to save changes.

Publish favicon

And that’s it! Your website icon will now be displayed in browser tabs.

2. Add favicon by using a plugin

Navigate to the plugins section of your WordPress dashboard.

Click Add New and search for the “Favicon by RealFaviconGenerator” plugin.
Install and activate the plugin.

Install favicon generator plugin

Click on Appearance and then the Favicon option in the left sidebar to access the plugin’s settings.

Click the “Select from the Media Library” button to choose your desired favicon image.
For the best result, choose a square image with a size of 260×260 pixels or larger.

After uploading the image, click on the “Generate favicon” button.

Uploading image for favicon in plugin options page

This plugin will redirect you to a new page where you can edit your favicon by utilizing various customization options. Also, you can see how your favicon image looks in different browsers and screen sizes.

Customize favicon

When you finalize your favicon, scroll down the page and click the “Generate your Favicons and HTML Code” button.

Generate favicons and html code

This plugin takes a few seconds to generate the favicon. Afterward, it will redirect you back to your WordPress dashboard, and the favicon will be integrated automatically with your website.

3. Add favicon in WordPress manually

If you don’t want to use any plugin to add a favicon or your theme doesn’t have a “Site Identity” option, you can upload a favicon manually.

Here’s a step-by-step guide to do this:

Before getting started, you’ll need a favicon image in the “.ico” format, and the size should be either 16×16 pixels or 32×32 pixels.

Don’t worry! You can easily generate a favicon online using the Real Favicon Generator website.

Visit https://realfavicongenerator.net/ and click the “Select Your Favicon Image” button. Now upload your image (.PNG format) file that you want to convert into a favicon.

Select image to convert into favicon

After uploading the image, you can edit it using options like background color, border radius, image size, etc.

When you’re satisfied with your image, click the “Generate your Favicons and HTML Code” button, and it will redirect you to a new page.

Now click the “Favicon Package” button to download a package (.zip format) containing all the images, and copy the text code as well.

Download favicon package

Log in to your hosting Cpanel account and go to your website’s root directory.

Extract all the images from the .zip file we downloaded earlier and upload them to the root directory of your website.

Upload images to WordPress root directory

Locate the header.php file in the following directory: wp-content > themes > theme name (your default theme) > header.php.

Open the header.php file and paste the HTML code provided by the favicon generator in the section.

Paste html code in header.php file

Click the Save option to save changes in the file.

Congratulations! You have successfully added a favicon to your WordPress site manually.

FAQs

How to change favicon in WordPress Astra theme?

There is no specific favicon setting within the Astra theme itself. However, you can easily add or change your favicon using the default WordPress customizer, as mentioned above.

Why favicon of my website is not showing?

Follow these steps to resolve the issue:

  • Sometimes, your browser shows old data of your website. Clear your browser cache or open your website in a different browser to get actual results.
  • Double-check that your favicon is uploaded to the correct location and that the path of images in your code is accurate.
  • Ensure your uploaded favicon is in the correct (.ico, .png) format.
  • Some themes have built-in settings for adding a favicon. If you’re having trouble, check your theme’s options, as they might be causing the issue.

How to change favicon in WordPress Elementor?

  • Edit any page in Elementor and go to Elementor’s option panel at the sidebar.
  • At the top left corner, click the ☰ icon.
  • Now click the “Site Settings” and scroll down the option panel.
  • Under the “Settings” section, click the “Site Identity” option.
  • Here, you will see the “Site Favicon” option.
  • Click the “plus +” icon and add an image for favicon.
  • To save changes, click the “Update” button at the bottom right corner.

Conclusion

A favicon is a small but essential part of our website that can help to improve our website’s branding and user experience.

In the above blog, we have learned about how to add favicon in WordPress. You can do it through a plugin, by adding code in your theme’s header.php file, or by using a WordPress customizer.

Back To Top