Responsive Favicons Drupal Module

Responsive Favicons Drupal Module - article image
Two Firefox Browser tabs - IMH and cPanel login

The small icon that shows in a browser tab beside the site title is called a favicon. Usually in the .ico file format, a favicon can look different across other devices and operating systems. The Drupal Responsive Favicons module allows you to use different Drupal favicon images for better branding.

If your site is installed on a subdomain, you may need a Drupal module patch or server redirects for working favicons. More on this below.

Configure Drupal Responsive Favicons

  1. Log into Drupal and install the favicon module using the tar download link at drupal.org/project/responsive_favicons.
  2. Select Enable newly added modules.
  3. Under User Interface, select Responsive Favicons and Install at the bottom.
  4. In the navigation menu, select Configuration
  5. Under User Interface, select Responsive Favicons. If you don’t see the module, clear your Drupal cache and try again.
  6. Leave this page open and visit RealFaviconGenerator.net in another browser tab. This website will create variations of your logo image to quickly add custom favicons in Drupal.
  7. Click Select your Favicon image and upload your logo or other unique image. It should be a square of at least 70×70 pixels. You can use an image editor like GIMP to modify the image if needed. We’ll use a synthesizer vector image from openclipart.org.

    RealFaviconGenerator Upload Button
  8. On the next page you’ll see previews of how your favicon would look in desktop browsers, search engine results, iOS, Android Chrome, Windows Metro, and macOS Safari with ways to customize each image. Make changes as desired to fit your branding.

    RealFaviconGenerator.net
  9. Ensure the radio button at the bottom is selected for “I will place favicon files (favicon.ico, apple-touch-icon.png, etc.) at the root of my web site.” Select Generate your Favicons and HTML code.

    RealFaviconGenerator path options
  10. Download the favicon zip package.

    RealFaviconGenerator HTML code and steps
  11. Copy the HTML5 favicon code into the Drupal “Favicon tags” text area.

    Drupal 9 Responsive favicons settings
  12. Upload the favicon_package zip file. We recommend selecting the checkbox at the bottom to remove the default Drupal 9 favicon.
  13. Select Save configuration. The page should update to state “Uploaded 10 favicon files successfully.” at the top.

Check Drupal Favicons

On realfavicongenerator.net select “Check your favicon” to check your work. 

RealFaviconGenerator.net Favicon Checker

You should also check each of your devices. You may need to clear your device or Drupal cache to see updates.

Responsive Favicons Drupal module working

Configure a Drupal Subdomain

The Drupal Responsive Favicons module has a known issue of not recognizing when the site is a subdomain, resulting in incorrect favicon URLs within the <head> section.

During our testing, patches within the “Drupal in sub directory not supported” Issues log did not fix favicon paths in module version 8.x-1.6. The easiest way to remedy this was to redirect the incorrect URLs in the web server.

Favicon URL Redirects in Apache

You can resolve the favicon errors by adding the following in the root domain .htaccess file, replacing “subdomain” with your sub-directory:

Redirect 302 /sites/default/files/favicons/apple-touch-icon.png /subdomain/sites/default/files/favicons/apple-touch-icon.png
Redirect 302 /sites/default/files/favicons/site.webmanifest /subdomain/sites/default/files/favicons/site.webmanifest
Redirect 302 /sites/default/files/favicons/android-chrome-192x192.png /subdomain/sites/default/files/favicons/android-chrome-192x192.png
Redirect 302 /sites/default/files/favicons/android-chrome-512x512.png /subdomain/sites/default/files/favicons/android-chrome-512x512.png
Redirect 302 /browserconfig.xml /subdomain/sites/default/files/favicons/browserconfig.xml
Redirect 302 /sites/default/files/favicons/safari-pinned-tab.svg /subdomain/sites/default/files/favicons/safari-pinned-tab.svg
Redirect 302 /sites/default/files/favicons/favicon-32x32.png /subdomain/sites/default/files/favicons/favicon-32x32.png
Redirect 302 /sites/default/files/favicons/mstile-150x150.png /subdomain/sites/default/files/favicons/mstile-150x150.png

Retest your favicon and the results should be all green excluding “There is no Touch icon in the root directory.”

Ignite your online presence with cutting-edge Drupal Website Hosting. Elevate speed, security, and reliability for a seamless website experience.

InMotion Hosting Contributor
InMotion Hosting Contributor Content Writer

InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!

More Articles by InMotion Hosting

Was this article helpful? Join the conversation!

Server Madness Sale
Score Big with Savings up to 99% Off

X