I know I can load a favicon though the user interface, but is there a way of setting the default favicon for your theme, so that when someone enables the theme, the default icon is immediately used?
6 Answers
You can place the favicon.ico
in your theme folder (at the same level as your_theme.info) and it will be used automatically.
Works for Drupal 6, 7 & 8.
Note: The favicon is heavily cached by some browsers, you may need to go to extra lengths to see the new one.
-
The favicon needs to be in the root of your theme to get picked up. It can't be in an images folder for example Feb 28, 2012 at 17:28
-
Also, this does not work with png favicons, only favicon.ico is found. So convert to ico before you use this. May 20, 2015 at 18:31
-
It should also be noted that this will only work for the respective theme. E.g. your admin pages won't get the new favicon, if you use an administration theme. May 20, 2015 at 18:39
-
what about drupal9, 10 ? is there something to configure there ?/admin/appearance/settings/my theme. In my case, putting favicon.ico in my theme folder is not enough– MatoeilOct 24 at 14:19
In Drupal 8, you can use the settings.yml
file, located at themes/YOURTHEME/config/install/YOURTHEME.settings.yml
Here is an example for theme logo/favicon customization:
logo:
use_default: false
path: 'themes/YOURTHEME/logo.png'
favicon:
use_default: false
path: 'themes/YOURTHEME/favicon.png'
However, if you change these settings whereas your theme is already installed in Drupal administration, you will need to uninstall your theme and then reinstall it. Else, even if you clear all caches, Drupal will not take in consideration your changes.
<?php
function hook_page_alter(&$pages) {
$favicon = "http://example.com/sites/default/files/favicon.ico";
$type = theme_get_setting('favicon_mimetype');
drupal_add_html_head_link(array('rel' => 'shortcut icon', 'href' => drupal_strip_dangerous_protocols($favicon), 'type' => $type));
}
?>
-
3This adds a new tag for the favicon, but does not replace the old one. Jun 27, 2013 at 20:15
Method 1 - via template.php
/**
* Implements hook_html_head_alter().
*/
function MYTHEME_html_head_alter(&$head_elements) {
// Remove existing favicon location
global $base_url;
$default_favicon_element = 'drupal_add_html_head_link:shortcut icon:' . $base_url . '/misc/favicon.ico';
unset($head_elements[$default_favicon_element]);
// Specify new favicon location
$element = array(
'rel' => 'shortcut icon',
'href' => '/path-to-favicon/favicon.ico',
);
drupal_add_html_head_link($element);
}
Method 2 - via custom module
/**
* Implements hook_html_head_alter().
*/
// Remove existing favicon location
function MODULENAME_html_head_alter(&$head_elements) {
global $base_url;
$default_favicon_element = 'drupal_add_html_head_link:shortcut icon:' . $base_url . '/misc/favicon.ico';
unset($head_elements[$default_favicon_element]);
// Specify new favicon location
$element = array(
'rel' => 'shortcut icon',
'href' => '/path-to-favicon/favicon.ico',
);
drupal_add_html_head_link($element);
}
See hook_html_head_alter for more info.
Note: It's not required to list the new favicon location in hook_html_head_alter()
. I usually specify it in THEMENAME_preprocess_html()
or MODULENAME_init()
.
The following code (in a custom module) replaces the favicon, instead of adding an additional one.
/**
* Implements hook_html_head_alter().
*
* Replaces the favicon.
*
* @param array $head_elements
*/
function MYMODULE_html_head_alter(&$head_elements) {
foreach ($head_elements as $key => $element) {
if (1
// The array key can vary, depending on the original favicon setting.
&& 0 === strpos($key, 'drupal_add_html_head_link:shortcut icon:')
&& !empty($element['#attributes']['href'])
&& 'shortcut icon' === $element['#attributes']['rel']
) {
// Make sure to use a file that actually exists!
$favicon_path = drupal_get_path('module', 'MYMODULE') . '/img/favicon_32.png';
$favicon_url = file_create_url($favicon_path);
// If the favicon path came from a user-provided setting, we would also need drupal_strip_dangerous_protocols().
$element['#attributes']['href'] = $favicon_url;
$element['#attributes']['type'] = 'image/png';
$head_elements[$key] = $element;
}
}
}
For the favicon file location I would suggest either the module folder of MYMODULE, or sites/default/favicon.ico. The goal is to have the file in version control, and NOT in the public files folder. We don't want it to be web-writable.
I assume most people will use *.ico instead of *.png, in this case the 'type' can keep its original value.
In Drupal 8 you must set favicon to true in YOUR_THEME.settings.yml (located at themes/YOUR_THEME/config/install) and put your favicon file at your theme root directory with the name "favicon.ico"
features:
favicon:true