The new Office 365 and SharePoint 2013 introduced a suite bar at the top of the screen and for most of the users it is just a useless empty space. By default it displays a SharePoint or Office 365 word in the left side and some links for the installed features in the right. In this post I will show you how to customize it with your company logo without using server code.

BindTuning master pages

Let’s start with the Bind Tuning masters, to accomplish this tutorial you will need the SharePoint Designer 2013.

1. Open your site with SharePoint designer
2. Copy your company logo to the Site Assets folder
3. Navigate to All Files -> _catalogs -> master page -> YourThemeName
4. Right click on the masterpage that you are using, check it out and edit it in advanced mode



5. Search for </body>
6. Right above it paste the following script
   • If you are using Office 365
     
     Deprecated!

     <script type="text/javascript">
          var companyLogo=document.getElementById("suiteBrandingBox");
          companyLogo.innerHTML = "<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='30px'></a>";
     </script>
     

     
     

     <script type="text/javascript">    
     	if (typeof jQuery == 'undefined') 
     	{
     		document.write('<script type="text/javascript" src="//code.jquery.com/jquery.min.js"><' + '/script>');
     	}
     	
     	var interval = setInterval(function(){
     		if($('#O365_MainLink_Logo').length)
     		{        
     			$('#O365_MainLink_Logo')("<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='25px'></a>");
     			$('#O365_MainLink_Logo').attr("style","padding-top: 3px");
     			clearInterval(interval);          		
     		}
     	}, 1000);    
     </script>
     

   • If you are using SharePoint 2013

     <script type="text/javascript">
          var suitebar = $("#suiteBar");
          var branding = suitebar.find(".ms-core-brandingText");
          branding("<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='30px'></a>");
     </script>
     

7. Adjust the href in the script if you want to include any particular URL, and the image url to match with your logo.
8. Save the modified master page, check it in and publish the major version
9. Refresh your site to see the final result

SharePoint master pages

You can also use this code to customize the default Seattle master.

1. Open your site with SharePoint designer
2. Copy your company logo to the site assets folder
3. Navigate to All Files -> _catalogs -> master page
4. Edit the Seattle.master in advanced mode and copy all the code
5. By default it’s not possible edit the original master, to create a new one click on File -> Blank Master Page



6. Check out the new master, edit it in advanced mode, delete all the existent code and paste the one form original Seattle



7. Search for </body>
8. Right above it paste the following script
• If you are using Office 365
  
  Deprecated!

  <script type="text/javascript">
       var companyLogo=document.getElementById("suiteBrandingBox");
       companyLogo.innerHTML = "<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='30px'></a>";
  </script>
  

  
  

  <script type="text/javascript">>    
  	if (typeof jQuery == 'undefined') 
  	{
  		document.write('<script type="text/javascript" src="//code.jquery.com/jquery.min.js"><' + '/script>');
  	}
  	
  	var interval = setInterval(function(){
  		if($('#O365_MainLink_Logo').length)
  		{        
  			$('#O365_MainLink_Logo')("<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='25px'></a>");
  			$('#O365_MainLink_Logo').attr("style","padding-top: 3px");
  			clearInterval(interval);          		
  		}
  	}, 1000);    
  </script>
  

• If you are using SharePoint 2013

  <script type='text/javascript' src='//code.jquery.com/jquery.min.js'></script>
  <script type="text/javascript">
       var suitebar = $("#suiteBar");
       var branding = suitebar.find(".ms-core-brandingText");
       branding("<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='30px'></a>");
  </script>
  

9. Adjust the href in the script if you want to include any particular URL, and the image url to match with your logo
10. Save the modified master page, check it in and publish the major version
11. Open your Sharepoint Site, go to Settings -> Site Settings -> MasterPage under Look and Feel and select the new master page for the Site master and System master options



12. Refresh your site to see the final result



(Note: If you don’t have the Master Page option, you have to activate first the Publishing features.)