How to Add a Favicon to a Site Collection

The Goal

Add a favicon to a site collection (note this only works on one site collection at a time).

How To Do It

Prerequisites

  • You need to start with a favicon file. This must be an ICO file, not a PNG, or GIF, or other graphics format file. These other types tend to work on Firefox and Chrome, but Internet Explorer will refuse to interpret anything but an ICO file as a favicon. You can go to various online favicon creation sites to convert a file if necessary (I suggest this site http://www.prodraw.net/favicon/index.php).
  • You will need to have SharePoint Designer (a version appropriate to your installation) downloaded and installed on the workstation you’re using.
  • You will need to log into the site as a user with enough privileges to perform the steps as detailed below.

Steps to Complete

  • Log into your site.
  • Go into your site collection root, and select Site Actions -> View All Site Content.
 How to Add a Favicon to a Site Collection
  • In the site content page, select a location for the ICO file (such as a picture library).
  • In there, upload the file to that location.
  • Next, launch SharePoint Designer and connect to (open) the site you added the favicon to.
  • In the navigation pane of SharePoint Designer, choose Master Pages and select the master page you desire to change (you may need to check out the file, depending on whether you have the publishing features enabled) – the default for SharePoint 2010 is v4.master, yours may differ.
  • By default, SharePoint Designer will default to Design mode, select Split mode. This can be found in the lower left of the screen (to the right of the navigation page)
 How to Add a Favicon to a Site Collection
  • In the Code portion at the top of the screen, start at the top of the file, and look for a node that looks like <html lang=, under that will be a node that looks like …, in there, you’ll find a portion of code that will be similar to the image you see below. What you’ll need to do is add the code line (as seen circled below) into this cluster of code. The order of these lines for the most part doesn’t matter, so I’d suggest you place it immediately under one of the other lines beginning with <SharePoint:BLAH … /> .

    (Your file does not need to be named favicon.ico, but it does need to be an ico file)

 How to Add a Favicon to a Site Collection
  • The hard part is all done, all you have to do is stitch the patient back up and take him off anaesthesia, er, I mean, save the file (and check it in & get it approved if publishing is turned on). Assuming you got the path to the file correct, you’re all done.
  • Finally, go back your site and refresh the page in the browser. You may have to clear your browser’s cache in order for the change to take effect, but it should not be necessary. Your icon should now appear next to the URL.
 How to Add a Favicon to a Site Collection

Tada! Thanks Colin.

One response to “How to Add a Favicon to a Site Collection

Comments are closed.