How to Add a Favicon to WordPress site

A favicon is that tiny image browsers display left to a page’s title on a browsers tab. It is used by browsers to visually identify web pages easily implicating it’s very vital to add a favicon to your website for such a benefit. Want to add one today? no worries, this article shows exactly how to add favicon in WordPress but let me first take you back in time.

Favicons made a debut in 1999, got standardized by World Wide Web Consortium (W3C) shortly after and have since been used by web developers on websites. The old browsers mainly read .ico files but recent browsers support more image formats like PNG and GIF. Before we learn how to add a favicon to WordPress site, lets briefly look at some of the reasons why you should add a favicon on your website.

• Fast identification of Web Pages on a Browser
• Acts as an icon on Mobile devices
• Acts as a sign of trust for your brand
• Makes websites look more professional
• Saves users time
• Reduces 404 errors

To explain the points above, how would visitors identify your website’s tab if multiple tabs were open on a their browser? this is where a favicon comes in, if your website has one they can easily see your site icon and navigate to your tab immediately. Secondly, if visitors bookmark your website on their mobile devices screen, a favicon will automatically act as the bookmark’s icon. A favicon also acts as a sign of trust to your visitors. If you are trying to sell products online from a website that has no favicon then your potential buyers are likely to doubt you. It makes websites look professional and saves lots of users’ time especially when it comes to navigation. Lastly, it reduces 404 errors on your website. When a browser requests for a web page, it automatically requests for a favicon and if absent a 404 error is thrown in most cases. This is very common with old browsers since recent browsers have the ability to proceed with a normal request even in the absence of a favicon.

How do we Add a Favicon to WordPress site

Searching for how to add favicon to WordPress sites? In this article i mention two ways of adding a favicon to WordPress sites. The first is a WordPress default method but only applies to version 4.3 and above. Second applies to all versions and involves pasting a piece of code in your theme’s header file. I don’t recommend using any WordPress favicon plugin to do this because it’s something everyone can get done easily through simple procedures.

Method 1 – Add from WordPress Customization page

This is so far the easiest way to add or change favicon in WordPress. WordPress 4.3 made it possible to add a favicon to your website directly from the WordPress customization page on your dashboard. To access the customization page, navigate to Appearance, click on customize and a new page with customization options should load.

On this page, click on Site Identity and you should see an image upload button for the site icon below. Upload favicon to WordPress site by simply dragging your image and dropping it in the image upload box then it should be able to load and update. In case you don’t see ‘Site Identity’ then you should see a menu titled ‘Global’, click on it and follow the same procedures. After uploading the image save settings, refresh your site on a browser and you should be able to see your favicon updated. In case you don’t see it, try clearing your cache (plugin if any and browser) then refresh again. This method will only work if your WordPress version is 4.3 or higher.

Method 2 – Add Code to your header.php file

The second step applies to all versions of WordPress but i recommend you use the first method if your version is 4.3 or higher because of it’s flexibility and simplicity. Alternatively, you can update your WordPress version to enjoy this feature in case you are using an outdated version. Now, to proceed with this method you have to upload the favicon file in the root of your WordPress installation folder (Public Html). Make sure you upload two formats, a .ico file and a png file under the same name. Now copy and paste the code below in your theme’s header.php file.

<link rel="shortcut icon" href="https://tutorialfaq.com/favicon.png" type="image/x-icon" />
<link rel="icon" href="https://tutorialfaq.com/favicon.png" type="image/x-icon" />

Don’t forget to substitute the favicon link on the code to your own link. If the favicon images are uploaded on the root of your server then just change the domain in the code. You can first test the link of the file in the browser by entering it’s URL. If it loads your favicon image it means the link is working and you can go ahead and use it.

The methods above should help you add a favicon to your WordPress site. In case you encounter any problems, feel free to drop a comment below otherwise, sharing is sexy!