The other day I was working on a friend’s NSS (non-SharePoint site) and I came across the favicon.ico I’d previously included. So, of course, I thought immediately of SharePoint and adding favicon files to my SharePoint sites. Why? Because favicon files can help in terms of Web site accessibility, such as making it easier for people to associate with your site and also more easily locate your site in browser bookmark listings, for example, an Internet Explorer Favorites listing. Plus, in the years I’ve been working and developing with SharePoint I simply hadn’t thought about adding favicon files to SharePoint sites, whereas I’d tended to do this with earlier Web technologies; it was one of those things I’d overlooked.
This post is about adding favicon files to SharePoint Server 2007 sites, where the configuration includes multiple web applications, and bookmarking those sites using Internet Explorer Version 6 or Mozilla Firefox Version 2.
What is a Favicon File?
For those of you not familiar with favicon files, favicon files are graphic files (most commonly with the extension of .ico, as in favicon.ico) and are typically 16x16 pixels or 32x32 pixels in size. Browsers will know about a favicon.ico file by the file’s .ico extension and will look for the favicon.ico file in the root of your Web site. When a browser hits your web site and a user bookmarks that site then the favicon.ico graphic will be displayed in the brower’s URL/address line upon subsequent visits to that site. The favicon.ico graphic will also be included alongside the web site entry in the bookmark, or favorites, listing on the client machine so users will more easily recognize the site address; this is in place of the generic browser icon, such as the IE or Firefox icon, so imagine the benefit of scrolling down a long bookmark listing (in my case, several hundred) and being able to immediately identify with a Web site address by the presence of a company logo.
Let's do it!
Say you have several web applications on your SharePoint Server 2007 farm; you might have one specifically for Partners, another for Customers and another for internal users. You could choose to have the one favicon.ico file for each of those web applications, such as your company logo, or you could instead create separate favicon.ico files for each web application so that users accessing more than one of those web applications could then more easily differentiate between each one.
For a browser to find a favicon.ico file, that file must be located in the root of each web site. In terms of SharePoint, the favicon.ico file needs to be located within the root of each web application. Let’s assume you have three web applications – one for a Main (internet) site, one for the Intranet site and another for a Partners site. Also, you’ve chosen to bookmark the central administration web application with its own specific favicon.ico, denoted by a ‘C’ graphic. So, you’ll need 4 favicon.ico files.
Note: This assumes you already have favicon.ico files created. To create new favicon.ico files, you can use Photoshop. See this article for instructions:- http://www.photoshopsupport.com/tutorials/jennifer/favicon.html “Mysteries Of The Favicon.ico – How to Create A Favicon in Photoshop”.
To add the favicon.ico files to your Web applications, do the following:-
- In Windows Explorer, browse to the location of the WSS VirtualDirectories folder, [drive]:\Inetpub\wwwroot\wss\VirtualDirectories\ and expand the VirtualDirectories node.
- Each Web application, under the VirtualDirectories folder, has its own folder and is identified by its port number. Port 80 is the Main (internet) site, Port 33066 is the Intranet site, Port 35746 is the Partners site and Port 31856 is the Central Administration site. Each favicon.ico file needs to be added to the respective Web application folders.
The following favicon.ico files will be associated with each port/Web application.
|
Port |
Favicon.ico file |
|
80 – Internet
|
 |
|
33066 - Intranet
|
 |
|
35746 - Partners
|
 |
|
31856 – Central Administration
|
 |
Next, copy each favicon.ico file into the relevant Web application folder. Figure 1 shows the addition of the Internet favicon.ico file (Port 80). Note, the favicon.ico file is placed in the root of the Web application folder. Figure 2 shows the addition of the Intranet favicon.ico file (Port 33066).
Figure 1 - Favicon.ico added to Internet Web application - Port 80 folder
Figure 2 - Favicon.ico added to Intranet Web application - Port 33066 folder
Once you’ve added the favicon.ico files into the respective Web application folders, you’re set! Let’s find out how users can take advantage of each of the favicon.ico files in accessing and bookmarking related SharePoint sites.
Figure 3 shows a SharePoint site within an Internet Explorer browser. Note that each of the SharePoint sites added to the Favorites list includes the associated favicon.ico graphic. In this case, each one is color-coded, but in reality you could have more meaningful graphics to better represent the owner site, such as a specific logo. Note the favicon.ico graphic for the active site, that is, the Fabrikam site, is shown in both the Favorites list against the site listing and also in the browser’s address line.
Figure 3 - SharePoint Sites bookmarked in Internet Explorer showing related favicon.ico graphic files
Figure 4, below, shows a SharePoint site within a Mozilla Firefox browser. Note, the inclusion of the bookmarked sites represented as tabs beneath the browser address line.
Figure 4 - SharePoint Sites bookmarked in Mozilla Firefox showing related favicon.ico graphic files
I think it’s easy to forget about Web site design fundamentals when working with SharePoint, especially given SharePoint Server 2007 offers so many in-browser design tools, such as navigation. This post has given a little insight into one of those smaller, but useful, design concepts.
Some Thoughts
Several things to bear in mind:
- If you decide to change the favicon.ico graphic post initial deployment, then existing bookmarks will only be updated if users clear their browser caches or re-bookmark the site
- Using the method outlined in this post, you are using the one favicon.ico file for an entire web application. This means that any site collections associated with a web application will inherit that same favicon.ico file.
- The file must be named favicon.ico. If you wanted to name the .ico file by another name, for example, companyxyz.ico, then you would need to reference that within your Web pages.
- This post hasn’t considered other scenarios, such as consuming favicon.ico files over SSL, or other browsers, or other favicon.ico graphics formats, that is, other than the ico format.
Happy favicon’ing!