TopSeoTutWordpressHow to Add a Favicon to Your WordPress Site

How to Add a Favicon to Your WordPress Site

How to Add a Favicon to Your WordPress Site
How to Add a Favicon to Your WordPress Site

By definition, the favicon represents a small icon that is present next to your web page title in the browser tab. Favicon is found in the address bar next to the website’s URL. Likewise, when you bookmark a webpage, you will find the favicon icon next to the page’s name. Apart from conventional websites, even web browsers make use of favicons.

Why Favicon Is Important to Your Website?

Unlike many other web elements, favicons can strengthen your overall image and improve the user experience. Conversely, the favicon plays an important role in the site’s look and feel. It is an element used to identify your website from a huge collection of tabs.

Why Favicon is Important

Thus, favicon is a part of effective branding strategies. In fact, your web page will be incomplete without a striking favicon. However, a lot of novice designers don’t know how and why they should add favicons to their web pages. As a result, their website looks generic and indistinguishable.

What Is The Best Size for Favicons?

When you choose a favicon for your website, make sure it is sized ideally. The recommended size for favicons would be 16×16 pixels. You can custom design favicons or resize existing picture files to the required dimensions. Nevertheless, make sure the resized image doesn’t look fuzzy or of poor quality. In order to avoid such issues, you must custom design a favicon for your website.

How to Create a Favicon?

In this modern era, most web traffic comes from smartphones and mobile platforms. That is why you should handpick the right kind of favicon for your site. When compared to conventional websites, the mobile platform is fragmented. Also, take a good look at the icon before going live.

  • Design it from scratch – This way is difficult and it needs good skills in photoshop.
  • Use your logo – You can reuse apart from your website logo to convert it into a favicon.
  • Download a ready favicon – You can download a png image from free sources to reuse it.

There are a lot of royalty-free image sources for png images as well as favicons to use for your website, but before downloading it you have to add an attribution to the website or the owner to avoid any copyright issues.

What Is The Best Royalty-free Favicon Website?

Freepik is one of the best royalty-free images on the internet, all you have to do is type your image category and you will find plenty of thousands of great design images coming in multiple formats such as photoshop and adobe illustrator. To find the available images or favicons to download, you should click on the “Free” button on the left menu because “premium” images need a subscription before you download.

What is The Best Royalty-free Favicon Website

How to Install a Favicon in Your WordPress Site?

The most widely used method relies on the “link” tag. This is where the link to the favicon is mentioned. To overcome compatibility issues and the “404” error, you can include fallback links in the “link” tag. Here are the three easy ways to install the favicon on your site:

  1. Insert a code in your site – You can add the favicon link directly to your WordPress “head” section.
  2. Upload the favicon using your theme – You can use the theme template setting to upload your favicon to your blog.
  3. Add the favicon using WordPress – There is an option in the “Appearance” section in WordPress to add the favicon.

Adding a Favicon Link to Your Site

There are several ways to add a favicon to your WordPress Blog. The simplest way to add would be with the help of the rel icon tag and it should be just before the closing of the head tag. The syntax is similar in both HTML and XHTML.

<link rel="icon" type="image/png" href="link-to-the-favicon.png">

Hint: if the favicon extension is .icon use this code instead

<link rel="icon" type="image/x-icon" href="link-to-the-favicon.ico">

First, you need to find the “header.php” file that is responsible for all codes/data/links in the head section for your site using one of the following easy ways:

  • Open your theme editor in WordPress – (Appearance -> Theme File Editor -> header.php)
  • Access your site files using the FTP client – Use Filezilla to access your site’s files easily.
  • Access your site files using cPanel – cPanel is the faster choice to access WordPress files.

Adding a Favicon Link to Your site

Change Your Favicon in WordPress Theme

WordPress default customizer setting and your custom theme setting have an option to upload your favicon to your website. Just go to “Appearance -> Customize“.

Change Your Favicon in WordPress Theme


Always remember that favicons can appear in many places like on browser tabs, favorites, bookmarks, and history. As mentioned previously, the icon acts as a part of business branding. That is because potential visitors may use the favicon to differentiate your business from the rest.

A good favicon will have your company’s logo or first letter. Regardless of the colors or shape, the favicon should communicate with your customer. Make sure they can relate the icon with your brand! Also, the favicon must be in the right format. Usually, “.ico” is the best file format for the favicon.

So if you have a thought or question, let me know in the comments box below.



Most Popular

Recent Comments