Wednesday, 29 January 2014

How to set Favicon for SharePoint 2010 site?

How to set Favicon for SharePoint 2010 site?


What is Favicon?
Sometimes we come across some websites which shows their logo instead of explorer logo in Address bar. A typical example is Google, login to google with IE and watch address bar. You can see google logo then the URL. This icon is stored in the PC when we add the sites as bookmarks. When you open bookmarks menu the site name will show with the icon.
Favicon Preview

How to create Favicon?
It's very easy to create favicon. All you need is the company logo or image(in JPG/PNG/GIF format) which you want to create based on and internet connection. Open browser and enterhttp://tools.dynamicdrive.com/favicon/ . Then click Choose File Button and select your image. Click Create Icon Button. Now the site will create favicon based on image given and it's ready to download. Download and save it in your PC.

How to set Favicon to the SharePoint 2010 site?
SharePoint 2010 comes with a orange Favicon and it's present in SharePoint Root Folder\Template\Images [eg. C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\IMAGES\]. Open this folder and search for favicon.ico and rename the file to FaviconBackup.ico. Now copy your favicon to this folder and make sure it's named as "favicon.ico". Now restart IIS(open Command Prompt -> IISReset), clear browser cache/temproary internet files. Close the browser and reopen then browse the SharePoint site.

If mulitple sites are hosted in same farm and need to set different favicons for different sites then we have to update Master Page Code. Open the site with SharePoint Designer 2010 and select Master pages -> v4.master. The default.master is still present in SharePoint 2010 for backward compatibility and visual upgrade. But SharePoint 2010 uses v4.master only. Now click "Edit File" link to add the favicon code. If it asks for check out, click yes and continue.

Find <SharePoint:SPShortcutIcon ID="SPShortcutIcon1" runat="server" IconUrl="/_layouts/images/favicon.ico"/> and change the path of favicon. Save and close (If you have checked out then you need to check in and site collection administrator has to approve it via Site Settings -> Galleries -> Master pages and page layouts -> Check in and Approve). Now reset IIS/clear browser cache and check.
To get this working for multiple browsers:
<SharePoint:SPShortcutIcon ID="SPShortcutIcon1" runat="server" IconUrl="/_layouts/images/favicon.ico"/>
...
..
Then, just above </head>, add the following:
<link rel="shortcut icon" type="image/x-icon" href="/_layouts/images/favicon.ico" />
<link rel="icon" type="image/ico" href="/_layouts/images/favicon.ico" />
<link rel="icon" type="image/png" href="/_layouts/images/favicon.png" > 

No comments:

Post a Comment