How to Add Favicon in WordPress: A Step-by-Step Guide

When it comes to creating a visually appealing website, even the smallest details matter. One such detail is the favicon, a tiny icon that appears in the browser tab when your website is open. Adding a favicon to your WordPress site not only enhances its visual appeal but also helps in branding and recognition. In this guide, we will walk you through two simple ways to add a favicon to your WordPress website.

Method 1: Uploading through the WordPress Customizer

The easiest and most recommended way to add a favicon to your WordPress site is through the WordPress Customizer. Here’s how you can do it:

1. Login to your WordPress dashboard.
2. Navigate to “Appearance” and click on “Customize”.
3. In the Customizer, look for the “Site Identity” section and click on it.
4. Scroll down until you find the “Site Icon” option.

6. Click on “Select Image” to upload your favicon.
7. Choose an image from your computer and click on “Select” to upload it.
8. Once the image is uploaded, you can crop it if necessary.
9. Click on “Save & Publish” to save your changes.

That’s it! Your favicon is now added to your WordPress site. It may take a few minutes for the changes to reflect.

Method 2: Adding a Function in the functions.php File

If, for some reason, the first method doesn’t work for you, don’t worry. There’s an alternative method you can try. However, before proceeding, make sure you have a child theme set up. This is important because if you make changes to the parent theme’s files, they will be overwritten during a theme update.

Here’s how you can add a favicon using this method:

1. Login to your WordPress dashboard.
2. Navigate to “Appearance” and click on “Editor”.
3. In the right-hand side panel, locate and click on “Theme Functions (functions.php)“.

OR

1. Access your WordPress files via FTP or through your hosting provider’s file manager.
2. Navigate to your theme’s folder, usually located in “wp-content/themes/your-theme-name”.
3. Look for the functions.php file and open it in a text editor.

THEN

4. Add the following code at the end of the file:

function wpnotch_add_favicon() {
  echo '<link rel="icon" href="' . get_stylesheet_directory_uri() . '/favicon.ico" type="image/x-icon">';
}
add_action('wp_head', 'wpnotch_add_favicon');

Make sure to replace “favicon.ico” with the name of your favicon file, and ensure that the file is located in the same directory as the functions.php file.

If you don’t have a .ico file, you can use a converter to convert your image to the .ico format.

Once you’ve added the code, click on “Update File” to save your changes.

That’s it! You have successfully added a favicon to your WordPress site using the alternative method. Remember, if you ever switch themes or update your current theme, you may need to repeat this process.

Conclusion

Adding a favicon to your WordPress site is a simple yet effective way to enhance its branding and visual appeal. Whether you choose the WordPress Customizer or the functions.php method, both options are easy to implement and require no technical expertise.

So go ahead and give your website that extra touch of professionalism by adding a favicon today!