Last updated February 1, 2015. Created on January 21, 2009.
Edited by julou, Tor Arne Thune, ooystein, bekasu. Log in to edit this page.

In web development, you can provide a small logo for your site that appears near the address bar and in the bookmarks folder in a visitor's browser. This logo is called the favicon. Drupal provides a default one, which is the recognizable water drop logo. Using the Drupal logo as the favicon is fine but if you really want to make your site stand out, you should provide your own. Favicon files are in the .ico format and are extremely small in dimensions. The default Drupal favicon is 32 pixels high by 32 pixels wide, many browsers use a 16 x 16 pixel version that can be included in the same file. This is because the favicon is only an icon that shows up in the address bar and favorites (bookmarks) list and typically there is not a lot of room there. Any favicon that you create should be just as small.

Changing the favicon

  1. Create a favicon.ico file using a graphics application. If your own favicon file is not named favicon.ico, rename it to that now. Make sure your favicon is also in the ICO format.
  2. Navigate to the admin/build/themes/settings/THEME or for Drupal 7 admin/appearance/settings/THEME page in the admin area of the site (replace THEME with the name of your default theme).
  3. Choose the favicon.ico file in the 'Shortcut icon settings' section of the theme configuration page and upload the file. (It's possible to specify a path to store the favicon in the theme folder).

The changes may not appear immediately in your browser, so completely clear your browser's cache and reload the page. Also, if you've bookmarked your site, you may need to delete the bookmark and then create it again so that the new favicon is used instead.

Tips for creating a favicon

  • When creating a favicon from scratch, make the file square in dimensions and make it large. Using dimensions that are a multiple of 16 is a good idea, e.g. 64 x 64 or 128 x 128. This makes it far easier to create a favicon (unless you are excellent at pixel art).
  • You may find sharpening or scaling the favicon using 'bicubic sampling' produces best results when converting the file to an ICO.
  • Favicons should follow the color palette of the site.
  • Include a notable symbol in your favicon (i.e., the Drupal drop, the Wikipedia "W", the Google "G").
  • There are plugins for many graphics applications to allow easy exporting of the ICO file.
  • Simple is best at the tiny scale of the favicon.

Further reading

For more information about favicons, see the Wikipedia article for favicons and also the W3C page on favicons. There are several sites you can visit that help you create favicons, for instance www.favicon.cc. For a fully fledged solution, look at RealFaviconGenerator which lets you create all icons required by different devices (desktop, iOS, android) at once; icons can further be integrated in your website with the responsive_favicons module.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

Stomper’s picture

I used this guide to create the favicon for my D6 site (http://www.dailyblogtips.com/how-to-create-a-favicon/), and I used the MS Paint option. Not difficult. After creation I needed to convert it from a JPEG to ICO, I used a free online convertor. Just Google it.

To apply to my site, I navigated to the specific theme I wanted to apply it to under sites/all/themes and then I renamed the default/original Drupal favicon to favicondp.ico, I then just FTP'ed in my new favicon file name favicon.ico.

Since Drupal will use anything called favicon.icon, which file in the theme folder has that name will be used, thus the changes were automatic.

If I want to revert back, I'd either delete the one I created or rename it something other than favicon.ico and then changed the original from favicondp.ico back to favicon.ico

Hope this helps

leopinzon’s picture

Hi there, many thanks for the tutorial. Just a comment regarding the "Clearing the browser's cache" step. What if it is already a productive site? You can't ask the entire world to clear cache can you? Shouldn't there be a way to make a version control querystring over the favicon so the browser reloads it automatically?

Thank you!

bjlewis2’s picture

You can just clear the Drupal cache. In D7, go to "admin/config/development/performance" and click the "Clear Cache" button.

Then when you (or anyone else) refresh the page, the favicon should be loaded.

Hope that helps.

julou’s picture

for readers looking for a simple solution supporting all recent devices (iOS, android, etc), you can check this module: https://www.drupal.org/project/responsive_favicons
based on http://realfavicongenerator.net