I'm trying to add some custom branding stuff to our visualforce pages. Is it possible to change the logo icon in the address bar on a Visualforce page? If so, how?
-
standard page or visualforce?– Mohith ShrivastavaCommented Sep 24, 2013 at 18:48
-
they are visualforce pages– Z_wizard18Commented Sep 24, 2013 at 18:50
-
you mean the browser icon that is cloud ?– Mohith ShrivastavaCommented Sep 24, 2013 at 18:58
-
yes, we would like to change that to some image/logo that we choose– Z_wizard18Commented Sep 24, 2013 at 19:00
4 Answers
The terminology for that image in the address bar is a favicon.
It's not mentioned in the question but if your Visualforce pages are exposed through a Site
, you can upload your favicon into a Static Resource
and then in the site configuration you can specify this resource to be used as the Site Favorite Icon
and all pages which are displayed through the Site will use this as their favicon image.
Documentation:
-
4Just a sidenote: I believe some IE versions do not apply this. Commented Sep 24, 2013 at 19:05
-
This works for Firefox, but I can't get it to work for Chrome :< Commented Sep 25, 2013 at 16:32
Add this to the top of your Visualforce page, with the appropriate static resource link of course:
<link rel="icon" type="image/png" href="{!$Resource.Favicon}" />
-
2Also please note to clear the browser cache as due to cache this appears to same as the cloud icon.Once the browser cache is cleared you may verify this ! Commented Sep 24, 2013 at 19:24
-
I tried that +
<link rel="flavicon" type="image/x-icon" href="{!URLFOR($Resource.sampleFavicon)}" />
withcache="false"
and I can't get it to work :< (where the static resource is a.ico
image) Commented Sep 25, 2013 at 17:25
This fixed it for me in Chrome. Not my answer but cross-posing from https://developer.salesforce.com/forums/?id=906F0000000AhbMIAS
I also faced the same issue like favicon is getting displayed in Mozilla but not working in Chrome and IE.
when i made the following tags false it worked for me in Chrome too applyBodyTag="false" applyHtmlTag= "false"
<apex:page showHeader="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag= "false">
<link REL="icon" HREF="{!URLFOR($Resource.StaticResourceName)}" type="img/x-icon"/>
</apex:page>
The following JavaScript hack will set the favicon on a Visualforce page that is NOT on a site in Salesforce Classic default:
<apex:page>
<script>
window.onload = function() {
document.querySelector('link[rel="shortcut icon"]').href = "{!URLFOR($Resource.favicon)}";
}
</script>
</apex:page>