Uploading a new favicon
This recipe details the steps involved in changing the favicon displayed with the theme. A favicon, dubbed as a shortcut icon in the Drupal interface, is an image which is particular to a site and is displayed in the address bar of the browser next to the site URL as well as the browser tab. It also makes its presence felt if the site is bookmarked in the browser as in the following screenshot:
Getting ready
We are going to need the icon file to be added which is recommended to be of size 32x32 pixels or higher. An example icon file named favicon.ico can be seen in the misc folder in the Drupal installation.
How to do it...
Adding a custom favicon to the theme can be done by performing the following steps:
Navigate to
admin/build/themes(Home | Administer | Site building | Themes).Click on the Configure link next to the theme in question.
Look for the Shortcut icon settings fieldset.
Within, uncheck the Use default shortcut icon checkbox as we want to use a custom icon.
Using the Upload icon image field, browse and select the icon file in the filesystem.
Finally, click on the Save configuration button below to upload and save the changes.
How it works...
The uploaded file is saved in the Drupal filesystem and the path to the icon is registered as a theme setting in the database. When a page is being rendered, the Drupal theme system designates this .ico file as the favicon for the site.
In the following screenshot, we can see the logo image added in the previous recipe also being used as the basis for a favicon:
There's more...
Besides manually uploading the icon file via the theme's configuration page, other options exist to perform the same task.
Alternative methods
Alternatively, instead of uploading the icon file via Drupal, use the Path to custom icon textbox to point to the icon file on the server. A third option is to place the icon file in the theme's folder and rename it favicon.ico. Provided that the Use the default shortcut icon field is checked, the theme will automatically look for this file in its folder and use it as its favicon. Not specifying a favicon will result in the site using Drupal's default icon, Druplicon, instead.
Tip
Other formats besides the ICO format are also supported by some, but not all browsers. More information is available at http://en.wikipedia.org/wiki/Favicon#Browser_support.
