Responsive Favicons
Adds responsive favicons generated by realfavicongenerator.net to Drupal sites, supporting multiple devices including iPhone, Android, iPad, tablets, and desktops.
responsive_favicons
Install
composer require 'drupal/responsive_favicons:^4.0'
Overview
Responsive Favicons module integrates with realfavicongenerator.net to add device-specific favicons to your Drupal site. The module handles the complete favicon ecosystem, including Apple touch icons, Android Chrome icons, Windows tiles, and standard favicons.
This module is particularly valuable in Drupal multisite setups where you need to maintain separate favicons for each site without polluting the docroot with icon files. Each site can store its own favicon variations in its respective public files directory.
The module automatically rewrites favicon paths in your HTML, JSON (manifest), and XML (browserconfig) files to point to the correct locations. It also provides dynamic routes for common favicon paths like /favicon.ico and /apple-touch-icon.png, ensuring proper favicon delivery without requiring files to be placed in the docroot.
Features
- Upload favicon zip files directly from realfavicongenerator.net and automatically extract them to the public files directory
- Automatic path rewriting for favicon references in HTML tags, JSON manifest files, and XML browserconfig files
- Dynamic route handling for common favicon paths (/favicon.ico, /apple-touch-icon.png, /site.webmanifest, etc.)
- Support for both uploaded favicons and local file system paths (e.g., theme directories)
- Optional removal of Drupal's default favicon to prevent conflicts
- Cache refresh suffix option for browser cache invalidation when updating favicons
- Compatibility detection with favicon and PWA modules to prevent conflicts
- Status report integration showing favicon configuration health and missing files
- Multisite-friendly architecture allowing per-site favicon management
Use Cases
Multisite Favicon Management
In a Drupal multisite setup, each site needs its own set of favicons. Instead of placing favicon files in the shared docroot, use this module to store each site's favicons in their respective public files directories (e.g., sites/site1/files/favicons, sites/site2/files/favicons). This keeps the docroot clean and allows independent favicon management per site.
Theme-Based Favicons
For sites where favicons are part of the theme, use the 'Use internal path' option to point to favicons stored within your theme directory (e.g., /themes/custom/mytheme/favicons). This keeps favicon assets version-controlled with the theme and simplifies deployment.
CDN-Hosted Favicons
Use the hook_responsive_favicons_icon_path_alter hook to modify favicon paths to point to a CDN. This can improve favicon loading performance for sites with global audiences by serving icons from geographically distributed servers.
Browser Cache Management
When updating favicons, enable the 'Add a cache refresh suffix' option to automatically append a query string to icon URLs. This forces browsers to fetch the new icons instead of serving stale cached versions, without requiring users to clear their browser cache.
Progressive Web App Setup
When setting up a PWA with the PWA module, remove the manifest link from the responsive favicons tags to avoid conflicts. Keep only the icon-related tags (apple-touch-icon, favicon, etc.) in responsive favicons while letting the PWA module handle the web manifest.
Tips
- Always use realfavicongenerator.net's 'root of my web site' option when generating favicons - the module will handle path rewriting automatically
- Check the status report after configuration to verify all favicon files are properly detected
- For best results, start with a high-quality SVG logo when generating favicons
- Consider enabling 'Remove default favicon from Drupal' to ensure only your custom favicons are displayed
- Use the status report page regularly to check for missing or misconfigured favicon files
- When using a CDN, implement hook_responsive_favicons_icon_path_alter to rewrite paths
- For development environments, the 'Show tags even if files are missing' option can help debug configuration issues
Technical Details
Admin Pages 1
/admin/config/user-interface/responsive_favicons
Configure responsive favicons for your site. Upload favicon files from realfavicongenerator.net or specify a local path containing the favicon files. Paste the HTML code provided by the favicon generator to add the appropriate link and meta tags to your site's HTML head.
Permissions 1
Hooks 2
hook_responsive_favicons_tags_alter
Allows other modules to alter the loaded favicon tags before they are cached and rendered in the HTML head.
hook_responsive_favicons_icon_path_alter
Allows other modules to alter the normalized icon path before it is used. Useful for CDN integration or custom path handling.
Troubleshooting 7
Check the status report page at /admin/reports/status for responsive favicon errors. Ensure all referenced files exist and are readable. Verify that the HTML tags are correctly pasted from realfavicongenerator.net.
Comment out the line 'RewriteCond %{REQUEST_URI} !=/favicon.ico' in your Drupal .htaccess file. This line causes Apache to bypass Drupal for favicon.ico requests, preventing the module from handling them.
Uninstall the favicon module. The responsive_favicons module provides more comprehensive favicon support and the two modules have overlapping functionality that can cause conflicts.
Remove the manifest link (<link rel="manifest"...>) from the favicon tags field if you're using the PWA module. The PWA module manages its own manifest file.
Enable the 'Add a cache refresh suffix' option in the module settings. Clear the Drupal cache. If issues persist, users may need to clear their browser cache.
The module automatically rewrites paths in JSON and XML files during upload. If paths are still incorrect, re-upload the zip file. The module looks for specific patterns like /android-chrome, /mstile, and /web-app-manifest to rewrite.
Remove any cache-busting query parameters (like ?v=123) from the HTML tags pasted from realfavicongenerator.net. The module provides its own cache refresh mechanism via the 'Add a cache refresh suffix' option.
Security Notes 4
- The module validates uploaded files to ensure only zip archives are accepted
- Uploaded files are extracted to a configurable directory within the public files system
- External icon URLs are validated by attempting to read the remote resource before displaying tags
- The admin configuration page is protected by the 'administer responsive favicons' permission