--- title: "Responsive Favicons Drupal Module" description: "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..." url: https://www.inmotionhosting.com/support/edu/drupal/drupal-responsive-favicons/ date: 2021-11-23 modified: 2023-09-13 author: "InMotion Hosting Contributor" categories: ["Drupal"] type: post lang: en --- # Responsive Favicons Drupal Module ![Responsive Favicons Drupal Module - article image](https://www.inmotionhosting.com/support/wp-content/uploads/2023/09/Drupal-Site-Favicons-1024x538.png) ![Two Firefox Browser tabs - IMH and cPanel login](https://www.inmotionhosting.com/support/wp-content/uploads/2021/11/firefox-browser-tabs.png) 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](#config) - [Check Drupal Favicons](#check) - [Configure a Drupal Subdomain](#subdomain) - [Favicon URL Redirects in Apache](#redirect) ## Configure Drupal Responsive Favicons 1. Log into Drupal and install the favicon module using the tar download link at [drupal.org/project/responsive_favicons](https://www.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](https://www.inmotionhosting.com/support/edu/drupal/drupal-performance-optimization/) and try again. 6. Leave this page open and visit [RealFaviconGenerator.net](https://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](https://www.inmotionhosting.com/support/website/website-design/gimp-favicon/) to modify the image if needed. We’ll use a synthesizer vector image from openclipart.org.![RealFaviconGenerator Upload Button](https://www.inmotionhosting.com/support/wp-content/uploads/2021/11/realfavicongeneartor-button.png) 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](https://www.inmotionhosting.com/support/wp-content/uploads/2021/11/realfavicongenerator-favicons-generated-1024x773.png) 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](https://www.inmotionhosting.com/support/wp-content/uploads/2021/11/realfavicongenerator-options-1024x269.png) 10. Download the favicon zip package.![RealFaviconGenerator HTML code and steps](https://www.inmotionhosting.com/support/wp-content/uploads/2021/11/realfavicongenerator-html-code-1024x338.png) 11. Copy the HTML5 favicon code into the Drupal “Favicon tags” text area.![Drupal 9 Responsive favicons settings](https://www.inmotionhosting.com/support/wp-content/uploads/2021/11/drupal-responsive-favicons.png) 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](https://www.inmotionhosting.com/support/wp-content/uploads/2021/11/realfavicongenerator-favicon-checker-1024x688.png) 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](https://www.inmotionhosting.com/support/wp-content/uploads/2021/11/realfavicongenerator-favicon-tab.png) ## 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 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](https://www.inmotionhosting.com/support/website/where-is-my-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](https://www.inmotionhosting.com/drupal-hosting). Elevate speed, security, and reliability for a seamless website experience.