I was wondering how to change the logo in a force.com site. After doing some research found that there is a visualforce component named site header that can be customized. Here is the link : http://developer.force.com/cookbook/recipe/customizing-the-look-and-feel-of-your-force-com-site

But somehow even after changing the url, force.com site is still showing the old salesforce logo.

enter image description here

Changed Code Now contains :

 <apex:image url="{!$Resource.MyLogo}" style="align: left;" alt="Salesforce" width="233" height="55" title="Salesforce"/>

Any Guess what I am missing?

  • 1
    Does the Static Resource for the logo image have Cache Control set to public? Commented Mar 3, 2013 at 19:28
  • yes the static resource's cache control is set to public
    – Avidev9
    Commented Mar 4, 2013 at 8:32

2 Answers 2


From the partial screen shot that you have in your question, it looks like you are using a page that doesn't specify showHeader="false". That means that you will get the standard Salesforce header which includes the Salesforce logo.
The tutorial code is not to replace that logo, but rather it is to replace a logo that comes with the example site pages that are generated.

When I create a site, I get the following generated for a SiteTemplate and SiteHeader component. Note that it has showHeader="false", which would prevent the logo in your question from being displayed, but instead would display the force_logo.gif (pictured directly below).

default force.com site logo

SiteTemplate page

<apex:page showHeader="false" id="SiteTemplate">
  <apex:stylesheet value="{!URLFOR($Resource.SiteSamples, 'SiteStyles.css')}"/>
  <apex:insert name="header">
    <c:SiteHeader />
  <apex:insert name="body"/>
  <apex:insert name="footer">
    <c:SiteFooter />
    <site:googleAnalyticsTracking />

SiteHeader component I changed the <apex:imageUrl> to match the after of the tutorial, i.e., {!Resource.Logo}.

<apex:component id="headerComponent">
  <apex:panelGrid cellpadding="0" cellspacing="0" width="98%" border="0" columns="2" style="text-align: left;" id="theHeader">
    <apex:image url="{!Resource.Logo}" style="align: left;" alt="Salesforce" width="233" height="55" title="Salesforce"/>
    <apex:panelGrid cellpadding="0" cellspacing="0" width="100%" border="0" columns="1" style="text-align: right;" id="Links">
      <apex:panelGroup rendered="{!AND(ISPICKVAL($User.UserType,'Guest'), $Site.LoginEnabled)}">
        <apex:outputLink value="/site/SiteLogin.apexp">{!$Label.site.login_button}</apex:outputLink>
        <apex:outputText value=" | "/>
        <apex:outputLink value="/site/ForgotPassword.apexp">{!$Label.site.forgot_your_password_q}</apex:outputLink>
        <apex:outputText value=" | " rendered="{!$Site.RegistrationEnabled}"/>
        <apex:outputLink value="/site/SiteRegister.apexp" rendered="{!$Site.RegistrationEnabled}">{!$Label.site.new_user_q}</apex:outputLink>
      <apex:outputLink value="{!$Site.Prefix}/secur/logout.jsp" rendered="{!NOT(ISPICKVAL($User.UserType,'Guest'))}">{!$Label.site.logout}</apex:outputLink>

If you want to create a page that uses that SiteTemplate then you need to create a page that uses it in an <apex:composition> tag, such as below. You can see an example in the SiteLogin page.

<apex:page id="loginPage" showHeader="false" title="{!$Label.site.site_login}">
  <apex:composition template="{!$Site.Template}">
    <apex:define name="body">  
       SiteLogin page has lots of code here for getting login info...

That page will use the SiteTemplate which uses the SiteHeader which has the <apex:image> tag.

After doing that your SiteLogin page would look something like the following, where I used our good friend Saasy as a logo.

Site with Custom Logo.

There is more on templates in the Visualforce Developer's Guide.


Based on @Avidev9's comment, the desired logo change is not the one in the tutorial. The desired logo is actually the logo of the standard Platform App.

In your Site Details click on the Public Access Settings to get to the Site's Guest User profile. Then click Edit and you'll see the Platform Custom App is marked Visible and the Default. So, the way that you'd customize that App's logo would be to go into the the normal App setup and edit the logo, except there's a catch...you cannot edit the Platform App's logo.

From the documentation on Editing App Properties:

Note that you cannot change the label, description, or logo for a standard app.

Platform App

However, if you really want to you can create a different, custom app, with your own logo, and change the Site's Guest User profile to use that.

  • Actually wanted to change the standard logo. Similar thing can be achieved in a app.
    – Avidev9
    Commented Mar 4, 2013 at 17:59
  • Ahh...OK. The tutorial that you found that has the SiteHeader has nothing to do with changing the logo in your screenshot, but is instead the logo that I referenced. I'm not aware of where you can change the SF logo in your screenshot. Commented Mar 4, 2013 at 18:16
  • @Avidev9 - Updated my answer. Commented Mar 5, 2013 at 1:35

You can the log instead using the existing salesforce native logo by this easy step.

Setup -->> App Setup -->> Create -->> Apps-->Edit or New (insert the image (that you have already loaded to the Document Library and made externally available).

Best Regards Ashlekh Gera

  • 3
    There is no such app for force.com site
    – Avidev9
    Commented Mar 4, 2013 at 8:32

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .