Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

General HTML

2008101401 Email to Ronx
 

Multiple favicons in the same site

How to use more than one favicon in a web site


This website uses a Favicon located in the root folder. This favicon displays in the address bar for every page in the web site - except two. This page, and the simple example page, show a different favicon in the address bar.

To display the favicon in the root, the pages need nothing added - FireFox, Internet Explorer  and other browsers will look for this icon and display it. However to display a different icon two <meta> tags are required:

<link rel="icon" href="path/to/iconfile.ico" type="image/x-icon" />
<link rel="shortcut icon" href="path/to/iconfile.ico" type="image/x-icon" />

The path/to/  is the relative path from the page to the icon's location. For this page (and the simplified example) these tags are:

<link rel="icon" href="/fp/articles/images/rxs2.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/fp/articles/images/rxs2.ico" type="image/x-icon" />

If the site is hosted by an ISP (as opposed to a WPP or dedicated host) then it is possible the web site will be accessed using the ISP's URL with a username, for example:  http://www.btinternet.com/~username/. In this case a favicon for the web site cannot be placed in the root folder - the user will not have access to the root. Using the above meta tags to point to the favicon will enable the user's favicon to be displayed, instead of the ISP's.

The simple example page has most formatting and navigation removed, so that View Source in the browser is uncluttered.

For more information about favicons, and favicon generators, see: