PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add Website Favicon - WordPress, Drupal, and Joomla Manual

How to Add Website Favicon – WordPress, Drupal, and Joomla Manual

A Favicon, an amalgamation of the words “favourite icon”, is the tiny square shaped image you see on the web next to the URL of your website in Internet Explorer or Firefox, or at the beginning of your website’s name on the tab in Google Chrome. It can also be viewed next to a bookmarked page’s name in the list of bookmarks on your browser.

It is ideal of the size 32×32 pixels or 16×16 pixels, and follows the color theme of your website. There are several methods available to create these graphics to be uniquely used for one’s website, and following is the guidance of how to add a favicon to WordPress, Drupal, and Joomla site.

Why Attach a Favicon?

In a professional scenario, especially in a business environment, it is essential to building a rapport with your client to get your brand established amongst your customers. In this era of e-tailing and e-commerce, a favicon is just like your logo. In other words, you give your brand, your website, an identity that is easy to remember and relate to. It makes you memorable. It is easier to remember a picture more than the words that come with it.

favicon sample

The Benefits of Adding Favicon to Website

This can make you look more professional in your approach, conveying that you are committed to your goals and deliver on your end of the deal.

It also makes your website stand out from others. When several tabs are opened on the browser along with yours, a favicon makes it easier to distinguish your website from others. It gives your website an individual identity.

How to Add a Favicon to a WordPress Site

Favicon helps you create a good identity for your brand and product and give customers a sense of reliability and stability. It reassures them that your website is a safe place to be. As more and more people use WordPress for website building, we have listed some steps to show you add a favicon to a WordPress site.

Create a Favicon

Create a PNG file containing your graphics, whose size must be either 32×32 pixels or 16×16 pixels. If your chosen image is too large, you have to resize it. This can be done in any image editing software like Photoshop. If you are a developer, you can also resize images using PHP.

Now, you must convert the image to “.ico” format. To do this, you can go to any Favicon generator website, upload your file there and click “Create Icon”. Once the file is created, click on “Download Favicon” to download the newly created “.ico” file.

create favicon

Adding a Favicon to the Site

You firstly can use the theme to add this favicon. Simply go to the Appearance editor area from your website dashboard. Next, go to the header.php file and add this code to the file.

favicon code

Don’t forget to write the name of your website and “.ico” file in the code.

Also, you can make use of related plugins to achieve this goal. There are two different plugins that you can use,

  1. To use Insert Headers and Footers, you need to download, install and then activate the plugin from your WordPress dashboard, Next, go to “Settings”, click on the button of “Insert Headers and Footers”, paste the above coding stuff in the right section and save your settings.
  2. To use All in One Favicon Plugin, you can click the “Upload” button next to “ICO Frontend” after the successful plugin installation and activation. Then, find your “.ico” file in the window that opens and click “Open”. After that, you can see your file’s address in the respective textbox. Click on “Upload” and save changes.

How to Add a Favicon to a Joomla Site

If you want to add a favicon to a Joomla site, you firstly need to create a PNG file just the same as the procedure for WordPress site. Then, you need to convert the image to “.ico” format. You can do this with the help of some Favicon generator websites or tools available on the web. Once the “.ico” file has been created, copy it to the directory “/joomla/templates/your template” and name it as “favicon.ico”. Now, you can open your website using the browser and check the Favicon.

How to Add a Favicon to a Drupal Site

In terms of adding a favicon to Drupal site, the preparatory steps also contain the creation of favicon image that is designed based on your preference, and the achievement of the special “.ico” format. After those, you need to go to the Administrator screen in Drupal and click on “Themes”, and then on the “Configure” tab to reach the “Global Settings” page.

Next, scroll down to find the Shortcut Icon Settings, click on “Browse” to select the file containing your Favicon and then click “Open”. Finally, click on “Save configuration” to save the settings. Now, you can open your website to see the Favicon.