I’ve got a couple of posts lined up where I’m going to outline the steps to brand your SharePoint 2013 application, including where to store images/css and how to access those paths within your app.master, but really quickly, I just want to document this one area I struggled in:
So you might start off with something like this in the head tag of your app.master (as you’ll find in the SharePoint 2013 Starter Master Pages):
<SharePoint:SPShortcutIcon runat="server" IconUrl="/_catalogs/masterpage/favicon.ico" />
However, the link above will not be relative to your app, this will only work outside of an app, when you’re doing standard SharePoint branding for an Intranet as an example.
We need to be able to specify the ~site token which the url of our current app web. You can read about these tokens more here: http://msdn.microsoft.com/en-us/library/jj163816.aspx.
So naturally, you’ll want to try:
<SharePoint:SPShortcutIcon runat="server" IconUrl="<% $SPUrl:~site/_catalogs/masterpage/favicon.ico %>" />
However, the above throws a big fat error: System.InvalidCastException: Unable to cast object of type ‘System.String’ to type ‘System.Uri’.
Wow that sucks. So I’ve resorted to doing this instead, unless someone has a better approach:
<link id="favicon" rel="icon" type="image/png" href="<% $SPUrl:~site/_catalogs/masterpage/favicon.ico %>" runat="server">
The same thing can be applied for any image tags you need within your app.master page:
1 2 3 4 5
<SharePoint:AjaxDelta id="DeltaSiteLogo" BlockElement="true" runat="server"> <SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" id="onetidProjectPropertyTitleGraphic"> <img src="<% $SPUrl:~site/_catalogs/masterpage/logo_alt.png %>" runat="server" /> </SharePoint:SPSimpleSiteLink> </SharePoint:AjaxDelta>
Any questions or comments, please let me know! More to come soon.