logoredraws.com

Configure a Drupal theme favicon

How to set a favicon in a Drupal theme, how to prepare an SVG favicon from a vector logo, and when you need extra link tags for ICO, PNG or touch icons.

Published

Contents
  1. The short answer
  2. Which asset is under discussion
  3. Preparing an SVG favicon from a vector logo
  4. Setting the favicon in Drupal
  5. Adding an SVG icon with fallbacks
  6. Final inspection

The short answer

Drupal handles the favicon through theme settings. By default, a theme uses its own favicon file. You can replace it in the administrative interface under Appearance, in either the global settings or the settings of a specific theme. Clear the "Use the favicon supplied by the theme" option, then enter a path to your icon or upload a file. If a theme ships a favicon.ico in its root folder, Drupal uses that file while the default option is enabled. Otherwise Drupal falls back to its own core icon.

The built-in setting outputs one icon link in the page head. That is enough for a single ICO, PNG or SVG favicon. If you want an SVG icon with a raster fallback, plus touch icons, you need extra link tags. You can add them from the theme's code, from a template, or with a contributed module.

The supplied evidence includes no version-specific documentation. Behaviour that depends on your Drupal release is flagged below rather than stated as fact. In particular, check whether your release's upload field accepts SVG and what form its settings configuration takes.

Which asset is under discussion

A favicon is a small square icon that browsers show in tabs, bookmarks and history. A favicon based on a logo is normally a simplified mark taken from the full logo, such as a symbol, monogram or initial. It is rarely the complete lockup with its wordmark. Three formats are common:

  • ICO: a raster container that can hold several pixel sizes. Browsers support it widely and it remains the safest fallback.
  • PNG: a single raster image at a fixed pixel size. It is often used for touch and app icons.
  • SVG: a vector format that scales cleanly to any size. Browser support for SVG favicons is broad but not universal, so a raster fallback is still sensible.

You can only make a true vector favicon if the source logo really contains vector artwork. A file named .svg, .ai or .eps may still be no more than a wrapper around an embedded bitmap. Open the file in a vector editor and check that the mark is built from editable paths and not from a placed image.

  • 1. Confirm your rights. Being able to download a logo does not give you permission to modify it, use its fonts or use the trademark. Check that you have the right to adapt the mark into an icon.
  • 2. Choose the mark. Isolate the symbol or monogram. Fine detail, thin strokes and small text disappear at tab size.
  • 3. Set a square artboard. Use a square viewBox and centre the mark with deliberate padding, because non-square artwork is letterboxed.
  • 4. Convert text to outlines. A browser renders an SVG favicon as an image and will not load external or web fonts, so any live text may fall back to a different typeface.
  • 5. Remove embedded raster images. A bitmap embedded in an SVG stays a bitmap and does not scale cleanly.
  • 6. Simplify the paths. Merge overlapping shapes, remove hidden objects and expand strokes where needed so the result does not depend on stroke rendering.
  • 7. Handle colour deliberately. Use solid fills with enough contrast against both light and dark browser chrome. An SVG can include a prefers-color-scheme media query in an internal style block to switch fills for dark mode.
  • 8. Export clean SVG. Remove editor metadata, comments and unused definitions, and avoid scripts and external references.
  • 9. Create raster fallbacks from the same artwork. Export a multi-size ICO and a PNG touch icon. Hand-adjust the smallest sizes if the automatic downsampling turns muddy.

Setting the favicon in Drupal

  • 1. Place the icon files in your custom theme folder so that they are version-controlled with the theme.
  • 2. In the administrative interface, go to Appearance and open the settings for your theme. Use the global settings instead if the icon should apply to every theme.
  • 3. In the favicon section, clear "Use the favicon supplied by the theme".
  • 4. Enter the path to the icon relative to the site root, or upload the file.
  • 5. Save the configuration and rebuild the caches.

Some Drupal releases accept SVG in the favicon upload field and others do not. If yours rejects it, keep the file in the theme and enter its path, or add the link tag in code as shown below. The settings can also ship with the theme in its default configuration. The structure usually looks like the following, but compare it with an export of your own site's configuration before relying on it:

# config/install/mytheme.settings.yml
favicon:
  use_default: false
  path: 'themes/custom/mytheme/favicon.svg'
  mimetype: 'image/svg+xml'

Adding an SVG icon with fallbacks

To serve an SVG favicon alongside an ICO fallback and a touch icon, leave the core setting pointed at the ICO file. Then add the other links from the theme. Themes may implement the page attachments alter hook in their .theme file. The theme path service shown here exists in current Drupal releases, but check it against your version.

<?php

/**
 * Implements hook_page_attachments_alter().
 */
function mytheme_page_attachments_alter(array &$attachments) {
  $theme_path = '/' . \Drupal::service('extension.list.theme')->getPath('mytheme');

  $attachments['#attached']['html_head_link'][] = [[
    'rel' => 'icon',
    'href' => $theme_path . '/favicon.svg',
    'type' => 'image/svg+xml',
  ]];
  $attachments['#attached']['html_head_link'][] = [[
    'rel' => 'apple-touch-icon',
    'href' => $theme_path . '/apple-touch-icon.png',
  ]];
}

If you would rather not write code, contributed modules exist that generate and output a full set of favicon tags. Check that the module you choose is maintained for your Drupal version.

Final inspection

  • View the page source and confirm that each icon link appears once with the correct path and type.
  • Open each icon path directly to confirm that the server returns it, and that the SVG is served as image/svg+xml.
  • Rebuild Drupal's caches, and test in a private window or after clearing the browser cache, because browsers cache favicons aggressively.
  • Check the icon in light and dark browser themes and at tab size, where loss of detail is most visible.
  • Test in more than one browser to confirm that the raster fallback appears where the SVG is not used.