WordPress

How to Add a Favicon in WordPress

November 20, 2020

Adding a favicon or site icon is relatively easy, but that doesn’t mean that everyone knows how to do it.

If you own a WordPress website, you may have noticed how difficult it is to spot your website using only an URL when browsing through bookmarks or tabs.

The favicon can help solve this issue and bring many other benefits to your brand.

But why do so many people struggle using the right favicon in WordPress?

For many, it’s because there are more ways than one to do it. For others, it’s all about using the wrong type of image or not understanding the purpose of this type of icon.

Regardless of the reason, this article will guide you through the history and current significance of the favicon, as well as answer the questions about what is a favicon and how to add one to your WordPress site in order to become more recognizable?

Still copying content into WordPress?

You’re doing it wrong… say goodbye forever to:

  • ❌ Cleaning HTML, removing span tags, line breaks, etc.
  • ❌ Creating your Table of Contents anchor ID links for all headers by hand,
  • ❌ Resizing & compressing images one-by-one before uploading back into your content,
  • ❌ Optimizing images with descriptive file names & alt text attributes,
  • ❌ Manually pasting target=“_blank” and/or “nofollow” attributes to every single link
Get 5 free exports

What is a Favicon?

The favicon has been around since the age of Internet Explorer 5. The term is short for “favorite icon,” and it’s a very important descriptive feature associated with websites and apps. It’s essentially a website icon or URL icon that can contain one or more smaller images.

The favicon image is associated with a specific page or website and allows users to understand what page they’re looking at.

Think of it as a business card for your website or web app.

Why Use a Favicon in WordPress?

Using a favicon image is essential to establish your brand identity and improve the user experience.

A recognizable icon makes your website easier to find in a browser, and makes it independent of specific URLs. Its main goal is assisting in a quick visual search for webpages and managing multiple open browser tabs and bookmarks.

Without adding a favicon, your website gets stuck with a generic browser symbol. Furthermore, even search engines such as Google now list favicons in the results. This is yet another reason why it can raise brand awareness if you design a good favicon to represent your brand online,

How to Add a Favicon in WordPress

People without enough experience in WordPress may struggle to create and implement all the important elements of a website, and favicons are one of the most popular features that people struggle with.

Here’s what you need to know about the process…

Method #1

First, you have to reach the Admin Area or WordPress dashboard. Since the release of WordPress 4.3, this is the place where you can add a favicon for your site.

From the Admin Area, you’ll want to navigate to the Appearance section, and then choose the Customize option. In the next step, you should click on the Site Identity option to bring up the unique customizer.

appearance section

The site identity customizer allows you to perform various changes to specific website elements such as:

  • Title
  • Description
  • Header
  • Site Icon
  • Logo

To add a shortcut icon or site icon, simply click on the Select File or Upload File button under the Site Icon section. Choose your brand’s favicon and ensure it’s at a minimum 512px wide and 512px tall.

Use the crop feature that pops up after uploading the image, to make any additional changes if necessary.

site icon

Method #2

This method involves adding a favicon via a file manager or a file transfer protocol (FTP). Of course, for this to work you need to make your own favicon image since you won’t be able to access the WordPress Media Library.

Access your website files with either a manager or FTP client. Use your hosting cPanel to do this. Find the root directory for your website and upload your favicon package.

Copy the code you got for your favicon and add it with a Headers and Footers plugin to your header theme. This method is less desirable but can be used if you can’t access your dashboard the standard way but still want to change or add a site icon.

Method #3

Although WordPress has native support for adding a site icon there are also third-party plugins that can do the same thing.

add favicon plugin

(Image Source)

If you prefer, you can use a dedicated favicon WordPress plugin to add a site icon to your website. Each plugin has its own setup and configuration process. The advantage of using a plugin would be better compatibility with certain app icons and a wider range of devices.

Favicons for WordPress FAQs

What is a site icon on WordPress?

A site icon or most commonly known as a favicon is an icon that you can associate with your website. This icon will be shown in the URL bar, in bookmarks, and even on a browser tab or other locations where you have to visually recognize a website.

How do I remove a favicon from WordPress?

If you want to remove a favicon, the best way to do so is to use the WP Favicon Remover. This is a plugin that allows you to delete the default WordPress site icon from your website so that you can use something else.

Why is my favicon not showing up?

This sometimes happens if the browser caches a website without a favicon. Often, clearing the browser cache is enough to solve this issue. However, you may also want to try using a different browser to make sure that your favicon is working properly on your website.

How do I show a favicon in Google?

Google now automatically searches for and updates the favicon or site icon when it crawls a home page. That said, if you make changes you may need to inform the search engine of them and request a new indexing of your website’s home page. Note that this could take weeks in some cases.

How do I create a favicon?

You can create a favicon image using any editor such as Corel Paint, Photoshop, GIMP, and others. Create an image, save it as favicon.ico, and convert it to the .ico format with your editor or an online editor. Then upload the image to your website and add an HTML code if needed.

Conclusion

As you can see, adding a favicon is in fact very easy. It doesn’t matter which method you pick, although the built-in favicon WordPress support should be more than enough in most cases. You can use a brand-defining image as your site icon or use your logo to build greater brand awareness.

Remember that websites with unique favicons are much easier to spot, so don’t postpone creating an .ico file and uploading it to your site.

Kevin Kessler
Kevin J. Kessler is a published author of five fantasy novels, a professional wrestler, and a puppeteer (not all at the same time). Kevin is a content writer at Codeless.
Kevin Kessler
Kevin J. Kessler is a published author of five fantasy novels, a professional wrestler, and a puppeteer (not all at the same time). Kevin is a content writer at Codeless.