Responsive Favicons
Añade favicons responsivos generados por realfavicongenerator.net a sitios Drupal, con soporte para múltiples dispositivos incluyendo iPhone, Android, iPad, tablets y escritorios.
responsive_favicons
Install
composer require 'drupal/responsive_favicons:^4.0'
Overview
El módulo Responsive Favicons se integra con realfavicongenerator.net para añadir favicons específicos para cada dispositivo a tu sitio Drupal. El módulo gestiona el ecosistema completo de favicons, incluyendo iconos Apple touch, iconos Android Chrome, tiles de Windows y favicons estándar.
Este módulo es particularmente valioso en configuraciones multisite de Drupal donde necesitas mantener favicons separados para cada sitio sin contaminar el docroot con archivos de iconos. Cada sitio puede almacenar sus propias variaciones de favicon en su respectivo directorio de archivos públicos.
El módulo reescribe automáticamente las rutas de favicons en tu HTML, JSON (manifest) y archivos XML (browserconfig) para apuntar a las ubicaciones correctas. También proporciona rutas dinámicas para rutas comunes de favicon como /favicon.ico y /apple-touch-icon.png, asegurando la entrega correcta de favicons sin requerir que los archivos se coloquen en el docroot.
Features
- Subir archivos zip de favicon directamente desde realfavicongenerator.net y extraerlos automáticamente al directorio de archivos públicos
- Reescritura automática de rutas para referencias de favicon en etiquetas HTML, archivos JSON manifest y archivos XML browserconfig
- Manejo dinámico de rutas para rutas comunes de favicon (/favicon.ico, /apple-touch-icon.png, /site.webmanifest, etc.)
- Soporte tanto para favicons subidos como para rutas del sistema de archivos local (por ejemplo, directorios de temas)
- Eliminación opcional del favicon predeterminado de Drupal para prevenir conflictos
- Opción de sufijo para refrescar caché para invalidación de caché del navegador al actualizar favicons
- Detección de compatibilidad con los módulos favicon y PWA para prevenir conflictos
- Integración con el informe de estado mostrando la salud de la configuración de favicons y archivos faltantes
- Arquitectura compatible con multisite permitiendo gestión de favicons por sitio
Use Cases
Gestión de Favicon en Multisite
En una configuración multisite de Drupal, cada sitio necesita su propio conjunto de favicons. En lugar de colocar archivos de favicon en el docroot compartido, usa este módulo para almacenar los favicons de cada sitio en sus respectivos directorios de archivos públicos (por ejemplo, sites/site1/files/favicons, sites/site2/files/favicons). Esto mantiene el docroot limpio y permite gestión independiente de favicons por sitio.
Favicons Basados en Tema
Para sitios donde los favicons son parte del tema, usa la opción 'Usar ruta interna' para apuntar a favicons almacenados dentro del directorio de tu tema (por ejemplo, /themes/custom/mytheme/favicons). Esto mantiene los assets de favicon bajo control de versiones con el tema y simplifica el despliegue.
Favicons Alojados en CDN
Usa el hook hook_responsive_favicons_icon_path_alter para modificar las rutas de favicon para que apunten a un CDN. Esto puede mejorar el rendimiento de carga de favicons para sitios con audiencias globales al servir iconos desde servidores distribuidos geográficamente.
Gestión de Caché del Navegador
Al actualizar favicons, habilita la opción 'Añadir un sufijo de refresco de caché' para añadir automáticamente una cadena de consulta a las URLs de iconos. Esto fuerza a los navegadores a obtener los nuevos iconos en lugar de servir versiones en caché obsoletas, sin requerir que los usuarios limpien la caché de su navegador.
Configuración de Progressive Web App
Al configurar una PWA con el módulo PWA, elimina el link del manifest de las etiquetas de responsive favicons para evitar conflictos. Mantén solo las etiquetas relacionadas con iconos (apple-touch-icon, favicon, etc.) en responsive favicons mientras dejas que el módulo PWA maneje el web manifest.
Tips
- Siempre usa la opción 'root of my web site' de realfavicongenerator.net al generar favicons - el módulo manejará la reescritura de rutas automáticamente
- Verifica el informe de estado después de la configuración para confirmar que todos los archivos de favicon se detectan correctamente
- Para mejores resultados, comienza con un logo SVG de alta calidad al generar favicons
- Considera habilitar 'Eliminar favicon predeterminado de Drupal' para asegurar que solo se muestren tus favicons personalizados
- Usa la página del informe de estado regularmente para verificar archivos de favicon faltantes o mal configurados
- Al usar un CDN, implementa hook_responsive_favicons_icon_path_alter para reescribir rutas
- Para entornos de desarrollo, la opción 'Mostrar etiquetas incluso si faltan archivos' puede ayudar a depurar problemas de configuración
Technical Details
Admin Pages 1
/admin/config/user-interface/responsive_favicons
Configura favicons responsivos para tu sitio. Sube archivos de favicon desde realfavicongenerator.net o especifica una ruta local que contenga los archivos de favicon. Pega el código HTML proporcionado por el generador de favicon para añadir las etiquetas link y meta apropiadas al head HTML de tu sitio.
Permissions 1
Hooks 2
hook_responsive_favicons_tags_alter
Permite a otros módulos modificar las etiquetas de favicon cargadas antes de que se almacenen en caché y se rendericen en el head HTML.
hook_responsive_favicons_icon_path_alter
Permite a otros módulos modificar la ruta de icono normalizada antes de que se use. Útil para integración con CDN o manejo personalizado de rutas.
Troubleshooting 7
Verifica la página del informe de estado en /admin/reports/status para errores de responsive favicon. Asegúrate de que todos los archivos referenciados existen y son legibles. Verifica que las etiquetas HTML estén correctamente pegadas desde realfavicongenerator.net.
Comenta la línea 'RewriteCond %{REQUEST_URI} !=/favicon.ico' en tu archivo .htaccess de Drupal. Esta línea hace que Apache omita Drupal para las solicitudes de favicon.ico, impidiendo que el módulo las maneje.
Desinstala el módulo favicon. El módulo responsive_favicons proporciona soporte de favicon más completo y los dos módulos tienen funcionalidad superpuesta que puede causar conflictos.
Elimina el link del manifest (<link rel="manifest"...>) del campo de etiquetas de favicon si estás usando el módulo PWA. El módulo PWA gestiona su propio archivo manifest.
Habilita la opción 'Añadir un sufijo de refresco de caché' en la configuración del módulo. Limpia la caché de Drupal. Si los problemas persisten, los usuarios pueden necesitar limpiar la caché de su navegador.
El módulo reescribe automáticamente las rutas en archivos JSON y XML durante la subida. Si las rutas siguen siendo incorrectas, vuelve a subir el archivo zip. El módulo busca patrones específicos como /android-chrome, /mstile y /web-app-manifest para reescribir.
Elimina cualquier parámetro de consulta de cache-busting (como ?v=123) de las etiquetas HTML pegadas desde realfavicongenerator.net. El módulo proporciona su propio mecanismo de refresco de caché vía la opción 'Añadir un sufijo de refresco de caché'.
Security Notes 4
- El módulo valida los archivos subidos para asegurar que solo se acepten archivos zip
- Los archivos subidos se extraen a un directorio configurable dentro del sistema de archivos públicos
- Las URLs de iconos externos se validan intentando leer el recurso remoto antes de mostrar las etiquetas
- La página de configuración de administración está protegida por el permiso 'administer responsive favicons'