SharePoint 2010, Favorites Icons (FavIcons) and SPUrl (SPUrlExpressionBuilder)

Time to burst another popular misconception.

SharePoint 2010 comes with a new server tag to help you set a Favourite Icon (FavIcon) for pages in your site. This is the <SharePoint:SPShortCutIcon> tag. The SPShortCutIcon tag lets you specify an IconUrl property. If we don’t mind hard coding our IconUrls, we can set it to something like:

<SharePoint:SPShortCutIcon IconUrl=”/Site Assets/favicon.ico” runat=”server” />

However, if you have many sites in a hierarchy, or many site collections, you might not want to have this hard coded.

SharePoint helps us out here with a handy thing called the SPUrlExpressionBuilder class. We can use the special server-side tag $SPUrl to format up Url strings that are relative to the current site or site collection.

If I wanted to use this technique with a related part of the page, the Site Logo Image <SharePoint:SiteLogoImage>, I could embed the following code into my master page:

<SharePoint:SiteLogoImage LogoImageUrl=”<% $SPUrl:~sitecollection/SiteAssets/icon.png%>” runat=”server”/>

It would be nice to use the same technique with FavIcons. Indeed, there are are a lot of blog sites that suggest this is possible. I’ve tried this out, and I have no idea how it could work.

The reason the above code works is that SPSiteLogoImage.LogoImageUrl is a System.String type. $SPUrl statements return a System.String. No problem there.

However, SPShortCutIcon.IconUrl seems to have broken this pattern, and is actually a System.Uri. Any attempt to use $SPUrl to format a relative Url results in a casting error from System.String to System.Uri.

Unable to cast object of type 'System.String' to type 'System.Uri'

Good news is, there is a workaround. It’s not pretty, but we can use $SPUrl to set the System.String value of the Text property on an asp:Literal control.

We then need to sandwich that in between two more asp:Literals to render a complete client-side <link rel=”shortcut icon” …/> tag.

<asp:literal runat=”server” Text=”&lt;link rel=’shortcut icon’ href=’” /><asp:literal runat=”server” Text=”<% $SPUrl:~sitecollection/Site%20Assets/favicon.ico %>” /><asp:literal runat=”server” Text=”‘ type=’image/vnd.microsoft.icon’ /&gt;” />

I told you it wasn’t pretty, but at least we didn’t have to write any custom controls of our own. Here’s the HTML it outputs:

<link rel=’shortcut icon’ href=’/Site%20Assets/favicon.ico’ type=’image/vnd.microsoft.icon’ />

If anyone has a more elegant (read: less kludgy) solution to the problem, please post a comment!

Post Script:

Here’s a nicer solution from one of our readers: (Many thanks, Adam!)

<link rel=’shortcut icon’ href=’<% $SPUrl:~SiteCollection/Style Library/Images/favicon.ico %>’ />

 

Comments

  1. DF says

    What if I don’t have access to using SPD2010?

    I can install it, but my company’s policy doesn’t allow me to touch the master page.

    Is there still a way to display a favicon in SP2010 using nothing more than HTML?

  2. says

    You don’t even need to use the asp:literal tag. Just use a real Html link tag:

    < link rel=”shortcut icon” href=’<% $SPUrl:~SiteCollection/Style Library/Images/favicon.ico %>’ />

  3. says

    Thanks for that Adam, it would be nice to use the SharePoint control, but since it doesn’t provide anything useful, and is in this case more cumbersome than the normal control, I don’t see why we would.

  4. Matt S says

    To get this working for multiple browsers…

    Update this line in your master page with your ico file:

    Then, just above , add the following:

Trackbacks

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>