Drupal 7: Responsive Favicons Module

David G - DrupalRecently I’ve been updating a site from Drupal 6 to Drupal 7. As a finishing touch to updating the site and creating a responsive theme I wanted to assure the site used responsive favicons for visitors using different multimedia devices to access the website. After doing some research I found the Responsive Favicons module which met my needs with its simplicity!

This module works in together with a 3rd party website and a custom image you want to use for the favicon images. The directions from the project page are straightforward:


Installation and configuration

  1. Generate the favicons and the HTML code onhttp://realfavicongenerator.net/
    • You will need a 260x260px PNG file with appropriate transparency already created. Smaller files can be uploaded but these will produce inferior results.
    • When asked for the “path” in realfavicongenerator.net select “I will place favicon files (favicon.ico, apple-touch-icon.png, etc.) at the root of my web site. Recommended.” – this is because Drupal will rewrite the URLs based on your configuration of the module for you.
  2. Install Responsive Favicons module as you install a contributed Drupal module. Seehttps://drupal.org/documentation/install/modules/themes/modules-7
  3. Go to /admin/config/user-interface/responsive_favicons to configure the module.
    • Here you will need to paste in the HTML provided by realfavicongenerator.net and upload the zip file they provided you with.

After installing the module there is a single administration page to configure the module:

Simple admin settings page for the Responsive Favicons module.

Simple admin settings page for the Responsive Favicons module.

For my purposes I then exported these configuration values for the module using the Configuration module and in a BASH script that takes steps to upgrade my website to Drupal 7 I performed the following tasks:

  • Download the module and enable it for the website.
  • Copy the favicons generated by RealFaviconGenerator.net in a folder to the Files directory of my drupal site.
  • Enable my Export Configuration to sync my saved settings on the newly created Drupal 7 site.

An example of the Bash code to achieve the above steps is:

# Add some responsive favicons goodness!
drush @complit.dest    dl responsive_favicons -y;
drush @complit.dest    en responsive_favicons -y;
echo "Moving favicons files under complit subsite files dir."
cp -Rv ${SELF}/docs/favicons  ${DESTROOT}/sites/comparative-literature/files/

echo "Copying config dir contents to live site."
cp -R ${SELF}/config/* $SUBSITE/files/config/
drush @complit.dest    config-sync -v --source=$SUBSITE/files/config

For this project $SELF is the project directory. $DESTROOT is the Drupal root directory for the Drupal7 website and $SUBSITE is the subsite folder of a multi-site Drupal installation for our Drupal website. The identifier @complit.dest is a Drush Site Alias to a particular Drupal project to invoke commands against.

The benefit to using this approach and this 3rd party service is that all these pieces: the generated images, exported Configuration code and my Bash file may all be placed into a Git repository and kept under version control. I never loose my work and future developers can better understand my workflow in migrating the site from Drupal 6 to Drupal 7 because the site is upgraded from a series of steps from a script.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , | Posted under Drupal, Drush | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *