Drupal Favicon Setup Guide: Stop Serving the Blue Drop

If you've ever launched a custom Drupal 10 or 11 site, you know the drill. You spend weeks perfecting the Twig templates, configuring complex Views, and mapping out taxonomy structures. Then, you open Safari to admire your work, and that stubborn blue Drupal water drop is still staring back at you from the tab bar.

Getting rid of that default core icon requires more than just dropping an image into your public directory. Drupal's aggressive caching and theme inheritance make this seemingly simple task surprisingly frustrating. In this drupal favicon setup guide, we will walk through the exact steps to replace the core icon permanently, ensuring your brand looks crisp across all devices in 2026.

Look at how large enterprise teams (like Red Hat or major universities) handle their Drupal platforms. They rarely rely on the admin UI for critical branding assets. Instead, they hardcode a modern SVG directly into their theme layer. We are going to take that exact professional approach.

Why the Default UI Method Fails

Drupal does offer a built-in way to change the favicon. If you navigate to Appearance > Settings > Your Theme, you will find a toggle to uncheck the default shortcut icon and upload a custom one.

I strongly recommend against using this method for production sites.

Why? First, it relies on the managed file system, meaning your icon URL will look something like /sites/default/files/favicon.ico. If you ever migrate databases or lose your files directory, your icon breaks. Second, the UI only accepts a single legacy ICO file, completely ignoring the modern 2026 stack of SVGs and Apple Touch Icons.

The Professional Drupal Favicon Setup Guide

To do this right, we need to bypass the UI and inject our icons directly into the theme. Before we touch any code, generate your modern icon set using Mzu favicondl. You want a crisp SVG and a fallback ICO.

Step 1: Place Files in Your Theme

Instead of the public files directory, store your icons inside your custom theme. Create a dedicated folder for them to keep things organized and version-controlled.

• Navigate to /web/themes/custom/your_theme/
• Create a directory named icons
• Drop your favicon.svg and favicon.ico into this folder.

Step 2: Override html.html.twig

Drupal core controls the <head> output via the html.html.twig template. If your theme doesn't already have this file, copy it from the core system module (/core/modules/system/templates/html.html.twig) into your theme's /templates/layout/ directory.

Open the file. You will see a <head-placeholder token=...> tag. Just below that, hardcode your modern SVG favicon links using Twig's active theme path variable.

<link rel='icon' href='{{ active_theme_path() }}/icons/favicon.svg' type='image/svg+xml'>
<link rel='alternate icon' href='{{ active_theme_path() }}/icons/favicon.ico'>
<link rel='apple-touch-icon' href='{{ active_theme_path() }}/icons/apple-touch-icon.png'>

This guarantees your icons are deployed with your codebase and never rely on the database state.

Step 3: Remove the Core Attachment

Even with your hardcoded Twig tags, Drupal might still inject its default icon tag via page attachments, causing duplicate tags in your DOM. To strip it out, we use a preprocess hook in your your_theme.theme file.

/**
 * Implements hook_page_attachments_alter().
 */
function your_theme_page_attachments_alter(array &$attachments) {
  foreach ($attachments['#attached']['html_head_link'] as $key => $value) {
    if (isset($value[0]['rel']) && $value[0]['rel'] === 'icon') {
      unset($attachments['#attached']['html_head_link'][$key]);
    }
  }
}

This snippet intercepts the page build process and aggressively strips out any icon links Drupal tries to inject natively, leaving only your clean Twig implementation.

Busting the Drupal Cache

You can make all the code changes in the world, but Drupal won't show them until you clear the cache. The render cache is notoriously stubborn.

1. Open your terminal and navigate to your project root.
2. Run drush cr (Cache Rebuild).
3. If you are using a reverse proxy like Varnish or a CDN like Cloudflare, purge those caches as well.

If you still see the old blue drop, your browser is likely holding onto it. Read our guide on forcing a favicon cache clear to resolve local browser stubbornness.

Common Pitfalls in Drupal 10/11

If your setup is still failing, check these common culprits:

• File Permissions: Ensure your /icons/ directory is readable by the web server (usually 755 for directories, 644 for files).
• Base Path Issues: If you are running Drupal in a subdirectory, active_theme_path() might need to be prefixed with the base URL.
• Theme Inheritance: If you are building a sub-theme (e.g., based on Radix or Olivero), make sure your parent theme isn't injecting its own icons via a higher-priority hook.

Stop fighting the Drupal UI. By moving your icon logic into your theme's codebase, you ensure a stable, version-controlled, and professional brand presence across every browser tab.