Responsive Favicons Drupal 9 Module

Drupal 9 Favicons - Customized per Device
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 9 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 9 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 9.
  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 9 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 9 cache to see updates.

Responsive Favicons Drupal module working

Configure a Drupal 9 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.”

Get the power and performance you need without additional configurations with our Drupal VPS Hosting.

J
Jacqueem Content Writer I

Technical writer focused on cybersecurity and musicianship.

More Articles by Jacqueem

Comments

It looks like this article doesn't have any comments yet - you can be the first. If you have any comments or questions, start the conversation!

Was this article helpful? Let us know!