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 displays favicon in the browser’s address bar or on the tab.

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

This article applies to:

  • Drupal 7.x

Step (1). Log-in into 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 into your website as an administrator.

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

Drupal - Appearance page

Drupal – Appearance page

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

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

Drupal - Shortcut icon settings

Drupal – Shortcut icon settings

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 image for your website.

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

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

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

by Code Steps


Leave a Reply