How to add favicon into Drupal based website?

Favorite icon (favicon) or shortcut icon is an icon file containing most commonly 16×16 small icons associated with a website. Usually, it is a .ico file. Web browsers display a favicon in the browser’s address bar or on the tab.

Drupal allows setting favicon through theme settings. This article explains the steps to set a favicon for Drupal-based websites.

This article applies to:

• Drupal 7.x

Step (1). Log in to your website’s control panel.

Step (2). Upload your website’s favicon into your website’s root folder or any other location.

Step (3). Log in to your website as an administrator.

Step (4). Click on the Appearance link which is top of the page. It will display the Appearance page. The appearance page will allow you to set and configure the default theme for your website.

Step (5). Now click on the Settings link under the default theme or click on the Settings tab. The default theme is the theme selected for your website. If you change any configuration settings for the default theme, will affect you immediately.

Step (6). Scroll down to the default theme’s settings page and look for the “SHORTCUT ICON SETTINGS” section.

Step (7). Un-check the check box “Use the default shortcut icon“. It will display “Path to custom icon” and “Upload icon image” fields to enable you to provide custom icon images for your website.

Step (8). The favicon is uploaded in Step (2). You can upload the favicon from here also by clicking on the Upload icon image button.

Step (9). Provide the favicon path in the Path to custom icon field and click on the Save configuration button to save your configuration settings.

Now refresh your website to see the favicon in the browser’s address bar or in the browser’s tab.