Set a favicon in Drupal 7

In Drupal 7 the favicon is called the shortcut icon, and it is managed through the theme settings. You can rely on a favicon.ico file shipped in the active theme's folder, or you can override it from the administration interface by entering a path to an icon or uploading one. This article covers both methods, how to add an SVG favicon, and how to prepare the icon from a vector logo.

The direct answer

Go to Appearance, open Settings, and choose either the global settings or the tab for a specific theme. In the shortcut icon section, clear the option to use the theme's default icon. Then either enter the path to your icon file or upload a new one, and save the configuration. Theme-specific settings override global ones, so if the favicon does not change, check the tab for the theme that is actually active.

• Path to custom icon: a path relative to the Drupal installation, or a stream wrapper path such as one starting with public://.
• Upload icon image: Drupal stores the uploaded file and fills in the path for you.
• Default theme icon: when the default option stays checked, Drupal uses a favicon.ico file in the theme's directory, if the theme provides one.

Replacing the file in the theme instead

If you maintain a custom theme, you can put favicon.ico in the theme's root folder and keep the default option checked. Avoid editing a contributed or core theme this way, because an update would overwrite the file. Use a subtheme or the settings form instead.

Adding an SVG favicon alongside a fallback

The settings form outputs one shortcut icon link. Browsers differ in their support for SVG favicons, so a common approach is to keep an ICO or PNG file as the main favicon and add an SVG icon link from the theme. In Drupal 7 you can do that in the theme's template.php with a preprocess function. Replace mytheme with your theme's machine name and adjust the file name.

function mytheme_preprocess_html(&$variables) {
  drupal_add_html_head_link(array(
    'rel' => 'icon',
    'type' => 'image/svg+xml',
    'href' => base_path() . drupal_get_path('theme', 'mytheme') . '/favicon.svg',
  ));
}

After changing template.php or theme settings, clear Drupal's caches. Browsers also cache favicons aggressively, so test in a private window or after clearing the browser cache before you decide a change failed.

Preparing the icon from a vector logo

A favicon is shown at very small sizes, so a full logo with a wordmark rarely reads well. A simplified mark or monogram with solid shapes and few fine details usually works better. Start from the editable vector master, not from an exported preview, so the reduced version stays sharp.

Do not assume a file contains true vector paths because it has an .svg extension. An SVG can wrap an embedded raster image, and that image will blur when scaled. Open the file in a vector editor and confirm that the artwork consists of paths and shapes. ICO and PNG favicons are raster formats, so export them from the vector source at the sizes you need, rather than upscaling a small bitmap.

Being able to download a logo file does not mean you have permission to alter it. Cropping, simplifying or recoloring a mark for a favicon is a modification, and the artwork, any fonts in it, and the trademark may carry separate terms. Confirm that you have rights to adapt the logo before publishing it as a site icon.

Platform status and evidence gaps

Drupal 7 reached its official end of life in January 2025, so core no longer receives community security updates. The favicon steps above still work on existing sites, but a site still running Drupal 7 should plan a migration or use extended support. The brief included no site-specific evidence such as theme names, file sizes, or browser test results, so this guide does not cover how a particular theme or browser version behaves. Check those details on your own installation.