How to Add a Favicon in WordPress (3 Ways)

Your WordPress website is a reflection of your brand and identity. Every detail matters, including the small but often overlooked favicon. It is a tiny icon that appears in your browser’s tab when someone visits your site.

In this guide, we’ll show you how to add favicon in WordPress using different methods.

What Is a Favicon?

A favicon, also known as a “favorite icon,” is a small image or icon associated with a website. It serves as a visual representation of your site and is displayed in the browser’s tab when users visit your page. Favicons make your site easily recognizable and add a level of professionalism to your brand.

Why Should You Add a Favicon to Your WordPress Site?

As previously said, it builds the identity of your website. However, it also increases the usability and user experience of your website.

In most cases, users have many tabs open in their browser window. As the number of tabs increases, this hides the title of your website. The favicon helps users quickly identify your website and navigate to the tab they want.

Your site icon, or favicon, is also used when users add your site to their mobile device’s home screen.

How to Create a Favicon

Your favicon is usually your company’s logo. For the image, WordPress suggests using a square image with a size of 512px x 512px.

You can also use a larger image, but WordPress will probably ask you to crop it to fit.

You may use any image editing tools, such as Adobe Photoshop or Gimp, or RealFaviconGenerator, to create an image exactly 512 pixels x 512 pixels in size.

Once the image is ready, you may use one of three methods to add the favicon in WordPress.

Add Favicon to WordPress (3 Methods)

Once you have created your favicon, you’re ready to add that favicon in WordPress.

In the sections below, I’ll show you three different methods to add your favicon to WordPress. However, each method is a little different.

Method 1: Adding the Favicon Using the WordPress Customizer

The simple way to add a favicon to a WordPress website is by using the WordPress customizer.

Go to Appearance » Customize and click on the Site Identity tab from your WordPress dashboard.

Next, click on the Select Site icon button and upload the image you want to use as a site icon.

The WordPress Media Library should now be open. You can use an existing image or upload a new custom favicon from your PC.

For example, we will use the Pickup WP logo as the WordPress site icon.

If the image you’re uploading is larger than the recommended size, WordPress will let you crop it. If it perfectly matches the recommended size, you may save your changes.

That’s all! You may now visit your WordPress website to see if your favicon is live.

Method 2: Adding a Favicon Using a WordPress Plugin

Several plugins are available for Favicon in WordPress, and one of the most popular free plugins is Favicon by RealFaviconGenerator.

This plugin provides more options for editing than the WordPress Customizer so that you can improve the compatibility of your favicon with various devices and app icons.

The first thing you need to do is Install and Activate the Favicon by RealFaviconGenerator plugin. For more details, see our guide on how to install a plugin in WordPress.

Upon Activation, go to Appearance » Favicon to create your favicon. Now, you need to select or upload an image by clicking the Select from the Media Library button.

After you’ve selected your image, click on the Generate favicon button. Once clicked, the plugin will send you outside of your WordPress site to the RealFaviconGenerator website.

From here, you can customize various settings, like the background color and how it looks on Google search results pages (SERPs), iOS, Android, macOS Safari, Chrome, and Windows Metro.

Check the box in the ‘Favicon Generator Options’ section if your website previously used a favicon. If so, just provide a number in the second column to indicate the favicon version you’re using.

This way, users who have previously visited your site will see the new favicon rather than the old one.

Once you’re done making those tweaks, scroll down and click the Generate your Favicons and HTML code button.

After that, the plugin will set up your favicon, and you are ready to go. You can view previews of how it will look on different devices in the plugin’s interface.

Method 3: Adding a Favicon Manually in WordPress

You can use code snippets if you don’t want to use a plugin or already have too many plugins installed.

You can also use the same RealFaviconGenerator tool to do everything manually.

The result is the same; you’ll need to manually upload the images via FTP and add some code to your site’s head section.

To get started, go to the RealFaviconGenerator website and select your favicon image by clicking Select your Favicon Image.

Here, you will see the same screen which you see using the plugin method. Scroll down to the bottom and click the Generate your Favicons and HTML code button when you’re finished.

On the next screen, click the button to download your Favicon package.

Next, you’ll need to extract this package and upload it to the root folder of your site using FTP.

Make sure you put all the files in the root folder – this won’t work otherwise.

To finish things out, you’ll need to add the code snippet from RealFaviconGenerator to the head section of your WordPress theme.

There are several ways to do that, using a WordPress plugin Insert Header and Footer or adding the following code snippet to the active theme functions.php file.

/* Adds the favicon code snippet from RealFaviconGenerator */ add_action('wp_head', 'add_favicon'); function add_favicon(){ ?> REPLACE THIS LINE OF TEXT WITH GENERATED FAVICON CODE <?php };

Once you do that, you’re all finished, and your favicon should start working.

Conclusion

Adding a favicon to your WordPress site is a simple but essential step toward improving your website’s design and recognition. It’s a simple process that can make a big difference in how visitors see your site.

So, take a few minutes to create and upload your favicon, and watch your website gain that extra touch of professionalism and branding.

For more, check out these other helpful resources:

• How to Disable RSS in WordPress
• How to Disable Image Compression in WordPress
• WordPress Dashicons: How to Use Them in WordPress Site

Lastly, follow us on Facebook and Twitter to stay updated on the latest WordPress and blogging-related articles.