Favicon in SharePoint


What is the favicon?

As the name suggests, it’s simply a picture file (icon with .ico extension) joined to a site’s URL. Most professional sites use the favicon in order to enforce site’s branding, and make all shortcuts to their websites distinguishable.

You can find the favicon in the corner of the address bar of your browser (just before the URL of the site you are exploring). It’s an .ico file, 16×16 pixels. Below you can see the “WordPress” favicon picture:

Creating the favicon

Great online resource helping to generate favicon .ico (16×16 pixels): http://www.favicon.cc

You can create the favicon from scratch or starting by an existing image.

Embedding favicon in SharePoint

The best way to integrate Favicon in SharePoint (and make it available globally on your site) is to embed this resource in your custom Master Page.

By using SharePoint V3 technologies (SharePoint Services V3 or MOSS 2007)

<head runat=”server”>
 
 <!– favicon –>
 <link rel=”shortcut icon” href=”<% $SPUrl:~sitecollection/Style%20Library/Custom/LayoutResources/Images/favicon/favicon.ico %> />
 

NOTE: By using “$SPUrl:~sitecollection” is useful since it always refers to the site collection place (root web) regardless the hierarchy position of the sitecollection itself, and allowing to create a very “generic” and reusable master page. The downside is that it’s only permitted with MOSS (not with SharePoint Services)

 

 

If you are using SharePoint V4 technologies (SharePoint Foundation V4 or Server 2010), other than the above solution (still possible), yuo can take the advantage of SPShortcutIcon class (Server Control).

 
 <!– favicon –>
<SharePoint:SPShortcutIcon runat=”server” IconUrl=”<% $SPUrl:~sitecollection/Style%20Library/Custom/LayoutResources/Images/favicon/favicon.ico %>“/>
 
 
Unfortunately (trust me), using this server control referring to “$SPUrl” doesn’t work; it just emits a compile error (cannot cast “System.String” to “System.Uri”), exactly as described in the Joel’s blog: http://joelblogs.co.uk/2010/11/09/sharepoint-2010-favorites-icons-favicons-and-spurl-spurlexpressionbuilder/
  
 
Workarounds:  
  1. Use V3 approach
  2. Apply the Joel’s suggestion (creating an ASP:Literal to dynamically build a correct path)
  3. Place the icon resource on the filesystem (possible, but not recommended by Microsoft), instead of placing it in an assets Document Library (such as “Style Library”) and referring to it by a fixed directory (such as /_layouts)
Hope this help to design a more professional website.
Advertisements

About rkapoztech

Try to contribute to wonderful SharePoint world
This entry was posted in Branding. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s