Si alguna vez has lanzado un sitio Drupal 10 u 11 personalizado, conoces la rutina. Pasas semanas perfeccionando las plantillas Twig, configurando Views complejas y mapeando estructuras de taxonomía. Luego, abres Safari para admirar tu trabajo, y esa obstinada gota de agua azul de Drupal sigue mirándote desde la barra de pestañas.

Deshacerse de ese icono central por defecto requiere más que simplemente soltar una imagen en tu directorio público. El almacenamiento en caché agresivo de Drupal y la herencia de temas hacen que esta tarea, aparentemente simple, sea sorprendentemente frustrante. En esta drupal favicon setup guide, recorreremos los pasos exactos para reemplazar el icono del núcleo permanentemente, asegurando que tu marca se vea nítida en todos los dispositivos en 2026.

Mira cómo los grandes equipos empresariales (como Red Hat o las principales universidades) manejan sus plataformas Drupal. Rara vez confían en la interfaz de administración para los activos críticos de la marca. En su lugar, codifican un SVG moderno directamente en su capa de temas. Vamos a adoptar exactamente ese enfoque profesional.

Por qué falla el método de la UI por defecto

Drupal ofrece una forma integrada de cambiar el favicon. Si navegas a Appearance > Settings > Your Theme, encontrarás un interruptor para desmarcar el icono de acceso directo por defecto y subir uno personalizado.

Recomiendo encarecidamente no usar este método para sitios en producción.

¿Por qué? Primero, depende del sistema de archivos administrado, lo que significa que la URL de tu icono se verá como /sites/default/files/favicon.ico. Si alguna vez migras bases de datos o pierdes tu directorio de archivos, tu icono se rompe. Segundo, la UI solo acepta un único archivo ICO heredado, ignorando por completo la pila moderna de 2026 de SVGs y Apple Touch Icons.

La Guía Profesional de Configuración de Favicon en Drupal

Para hacer esto bien, necesitamos evitar la UI e inyectar nuestros iconos directamente en el tema. Antes de tocar ningún código, genera tu conjunto de iconos modernos usando Mzu favicondl. Necesitas un SVG nítido y un ICO de respaldo.

Paso 1: Coloca los archivos en tu tema

En lugar del directorio de archivos públicos, almacena tus iconos dentro de tu tema personalizado. Crea una carpeta dedicada para ellos para mantener las cosas organizadas y bajo control de versiones.

Paso 2: Sobrescribe html.html.twig

El núcleo de Drupal controla la salida del <head> a través de la plantilla html.html.twig. Si tu tema aún no tiene este archivo, cópialo desde el módulo del sistema central (/core/modules/system/templates/html.html.twig) al directorio /templates/layout/ de tu tema.

Abre el archivo. Verás una etiqueta <head-placeholder token=...>. Justo debajo de eso, codifica tus enlaces de favicon SVG moderno usando la variable de ruta del tema activo de Twig.

<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'>

Esto garantiza que tus iconos estén controlados por versiones con tu código base y nunca dependan del estado de la base de datos.

Paso 3: Elimina el archivo adjunto del núcleo

Incluso con tus etiquetas Twig codificadas, Drupal aún podría inyectar su etiqueta de icono por defecto a través de los archivos adjuntos de la página, causando etiquetas duplicadas en tu DOM. Para eliminarlo, usamos un hook de preprocesamiento en tu archivo your_theme.theme.

/**
 * 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]);
    }
  }
}

Este fragmento intercepta el proceso de construcción de la página y elimina agresivamente cualquier enlace de icono que Drupal intente inyectar de forma nativa, dejando solo tu implementación limpia de Twig.

Borrando la caché de Drupal

Puedes hacer todos los cambios de código del mundo, pero Drupal no los mostrará hasta que borres la caché. La caché de renderizado es notoriamente obstinada.

  1. Abre tu terminal y navega a la raíz de tu proyecto.
  2. Ejecuta drush cr (Cache Rebuild).
  3. Si estás usando un proxy inverso como Varnish o un CDN como Cloudflare, purga esas cachés también.

Si aún ves la vieja gota azul, es probable que tu navegador la esté reteniendo. Lee nuestra guía sobre cómo forzar el borrado de la caché del favicon para resolver la obstinación del navegador local.

Errores comunes en Drupal 10/11

Si tu configuración sigue fallando, revisa estos culpables comunes:

Deja de pelear con la UI de Drupal. Al mover la lógica de tu icono a la base de código de tu tema, garantizas una presencia de marca estable, controlada por versiones y profesional en cada pestaña del navegador.