SharePoint 2010 Branding Options: Master Pages vs. Themes: Part 2.1

How to edit the master page to add a custom logo and a favicon with SharePoint Designer 2010…

Favicon and Custom Logo

Favicon and Custom Logo

Follow the first few steps (1-5) in the previous post, Part 2, to open your master page and show the Code view in SharePoint Designer 2010.

Here is the code to edit the existing Favicon code in the tags (screenshot):

<SharePoint:SPShortcutIcon runat="server" IconUrl=" http://yourServer.com/images/favicon.ico"/>

There are at least 3 options to add a custom logo (Drisgill et al., pg 227):

  1. Use an HTML image tag: <img src=”customLogo.gif” alt=”Happy face”/>
  2. Use a CSS background-image property:
    .s4-title  {
    background-image:url('customLogo.gif');
    }
  3. Use the SharePoint control. I chose this option since it allows you to “set a default image for the master page that can be overridden by the SharePoint web interface from the Title, description, and icon Site Settings page (Drisgill et al., pg 227).” Here is the code I used in the Body to set the default custom logo and the link URL, and a screenshot of where I put it in the master page:

<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/"                                     id="onetidProjectPropertyTitleGraphic">
<SharePoint:SiteLogoImage                                                     LogoImageUrl="http://yourServer/images/customLogo.gif" runat="server"/>
</SharePoint:SPLinkButton>

Note: I have found it easiest to keep my custom site logos, favicon, and custom CSS externally (external from the SharePoint farm) on one of our web servers. That way I can just paste in an absolute URL for the custom logo, favicon and CSS where needed, and I can go to one place to update these files. For example, after a quick update to the CSS file I just have to save it there in one place, rather than re-deploying to the various Style Libraries. I don’t like to access the SharePoint server if I don’t absolutely need to, I am superstitious that way. We are in a relatively small work environment with under 500 users and I am the main SharePoint person. We don’t do any custom coding, we have a codeless environment with no Visual Studio action for custom features or solutions to deploy this stuff for me, so this has been the best solution for me so far. What do you think, is there a better way? Here is busy blog post about putting CSS files in _layouts folder or a document library such as the Style Library: http://sharepoint.stackexchange.com/questions/2219/css-files-in-layouts-or-document-library/16253#16253


Featured Series of Posts on Branding Options in SharePoint 2010:

0. SP 2010 Branding Options: Master Pages vs. Themes: Overview
Why I prefer custom master pages over custom themes in SP 2010

1. SP 2010 Branding Options: Master Pages vs. Themes: Part 1
Attaching an alternate style sheet to the master page using the browser’s UI

2. SP 2010 Branding Options: Master Pages vs. Themes: Part 2
Attaching an alternate style sheet to the master page using SPD 2010

2.1 SP 2010 Branding Options: Master Pages vs. Themes: Part 2.1
How to edit the master page to add a custom logo and a favicon with SharePoint Designer 2010

3. SP 2010 Branding Options: Master Pages vs. Themes: Part 3
Adding a footer to your custom master page using SharePoint Designer 2010

4. History of SharePoint Branding: 2007 to 2010
A tribute to Heather Solomon’s legendary blog posts on MOSS 2007 themes and master pages

5. SharePoint 2010 CSS: List of Useful Styles

One comment

  1. Chris says:

    Cool guide!

    Another way for creating cool looking custom SharePoint styles is using the SharePoint Online Designer for generating css files.

    Have a look:
    http://www.nextflow.at/pages/plugnplay.aspx

    Cheers Chris

Leave a Reply