Responsive Favicons
responsive_favicons
Adds responsive favicons generated by realfavicongenerator.net to Drupal sites, supporting multiple devices including iPhone, Android, iPad, tablets, and desktops.
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.
Install
composer require 'drupal/responsive_favicons:^4.0'
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
Dependencies
Related Projects
The module detects if the favicon module is installed and displays a warning in the status report, as both modules provide similar functionality. When favicon module is active, the /favicon.ico route is not registered by responsive_favicons to avoid conflicts.
The module detects if the PWA module is active and checks for conflicting web manifest declarations. If a manifest link is declared in the favicon tags while PWA is enabled, a warning is displayed because PWA module manages its own manifest file.
When the redirect module is active, the dynamic favicon routes are configured with '_disable_route_normalizer' to prevent the redirect module from normalizing (redirecting) the favicon paths.
The module supports multisite setups with the Domain module by using path-based cache identifiers, ensuring each domain can have its own set of cached favicon tags.
Admin Pages
| Title | Path | Description |
|---|---|---|
| Responsive favicons | /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
| Permission | Description |
|---|---|
|
Allows users to access the responsive favicons configuration page and modify favicon settings, upload new favicon files, and change display options. |
Hooks
| Hook | Description |
|---|---|
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
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
- 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