Favicon is an icon in browser tab and address bar. Below diagram shows it.
There are two ways to show favicon in browser
1. Set context-root as "/" and then put favicon.ico file in web-root directory: Actually browser tries to fetch http://<server>:<port>/favicon.ico from server and if its available then it will try to show that as a favicon. While deploying application on server we need to specify its context-root. Application pages can be accessed as http://<server>:<port>/<context-root>/<page-url>. To access any file from application we need to have context-root in url otherwise server will not know which application to use as there might by many application deployed on a server. Using this context-root only server knows about application and get files from that application only. If you have only one application on a server you can decide to have "/" as a context root and then you can access your pages as http://<server>:<port>/<page-url>. Now if we put favicon.ico file directly under web-root directory (public_html) then we can access it using http://<server>:<port>/favicon.ico.
To set context-root "/" for an ADF application we can do following:
a. Setting context root while running application (or page directly) with integrated weblogic server: If you are running your page directly in JDEV it will use integrated weblogic server and context root will be picked from 'Java EE application' setting. To set it follow Web-Project-Properties > Java EE application
BUT BUT this does not work. The moment I try to save this setting I get error as
OK. Now lets try to play with jdeveloper and try to change this using a text editor directly. We can open UI project's jpr file and then search for property j2eeContextRoot. Now change its value to "/" as shown in below diagram.
If we open UI project's property we will see context-root is changed to "/". Use cancel to close project properties and run the page.
Put favicon.ico file directly under public_html directory of your UI project.
Run your page. You should see favicon icon appearing on browser tab.
NOTE: You may see error as "Context path '' is already in use by the module: / application: FMW Welcome Page Application"
It means there is already an application "FMW Welcome Page Application" running which has context path as "/". We need to stop this application. Go to console and stop this application and then re-run the page.
IE started showing favicon icon. Firefox and Chrom are still not showing. Looks like Firefox and Chrom needs explicit <link ...> tag in its head section.
b. Settting context root while deploying application (war/ear) on a stand-alone server:
When we are deploying application on a stand-alone server we can set context-root using war deployment profile of UI project. Navigate to UI project's properties > Deployment and select appropriate war deployment profile. Edit it and change context root as shown below.
Now deploy application using this war profile on a stand alone server.
IE started showing favicon icon. Firefox and Chrom are still not showing. Looks like Firefox and Chrom needs explicit <link ...> tag in its head section.
2. Add explicit <link ....> entry in your page head: To show a favicon icon we can also add following entry on head section of html as
<html>
<head>
<link rel="shortcut icon" href="location-of-favicon.ico file">
</head>
<body>
</body>
</html>
The key-word "shortcut icon" allows browser to show icon file as a favicon. If favicon.ico is under web-root directory we can directly write href="favicon.ico". If its under some other directory like images etc we can refer it as <link rel="shortcut icon" href="/context-name/images/favicon.ico">
In terms of ADF question is how to write <link ...> line in head section of html.
We can use metaContainer facet of <af:document> tag
Add following line under <af:document> and change favicon.ico location accordingly.
<f:facet name="metaContainer">
<af:outputText escape="false"
value="<link href="#{facesContext.externalContext.requestContextPath}/images/favicon.ico" rel="shortcut icon">" id="o1"/>
</f:facet>
To add this line we can also try to write a javascript which runs on page load but I found that javascript solution is not working in IE.
========================
11.1.2 solution: From 11.1.2 we have smallIconSource and largeIconSource attributes to show favicon icon.
Bottom line is
1. If you are on 11.1.1.x use metaContainer facet approach to make favicon working in all browser.
2. If you are on 11.1.2.x use smallIconSource and largIconSource attributes of <af:document> tag.
In both approaches you need to do it in individual jspx page. I believe we don't have any common solution (like adding it in template) which will allow us to avoid code duplication in all pages.
Disclaimer: Any views or opinions presented in this blog are solely those of the author and do not necessarily represent those of the company.
There are two ways to show favicon in browser
1. Set context-root as "/" and then put favicon.ico file in web-root directory: Actually browser tries to fetch http://<server>:<port>/favicon.ico from server and if its available then it will try to show that as a favicon. While deploying application on server we need to specify its context-root. Application pages can be accessed as http://<server>:<port>/<context-root>/<page-url>. To access any file from application we need to have context-root in url otherwise server will not know which application to use as there might by many application deployed on a server. Using this context-root only server knows about application and get files from that application only. If you have only one application on a server you can decide to have "/" as a context root and then you can access your pages as http://<server>:<port>/<page-url>. Now if we put favicon.ico file directly under web-root directory (public_html) then we can access it using http://<server>:<port>/favicon.ico.
To set context-root "/" for an ADF application we can do following:
a. Setting context root while running application (or page directly) with integrated weblogic server: If you are running your page directly in JDEV it will use integrated weblogic server and context root will be picked from 'Java EE application' setting. To set it follow Web-Project-Properties > Java EE application
BUT BUT this does not work. The moment I try to save this setting I get error as
OK. Now lets try to play with jdeveloper and try to change this using a text editor directly. We can open UI project's jpr file and then search for property j2eeContextRoot. Now change its value to "/" as shown in below diagram.
If we open UI project's property we will see context-root is changed to "/". Use cancel to close project properties and run the page.
Put favicon.ico file directly under public_html directory of your UI project.
Run your page. You should see favicon icon appearing on browser tab.
NOTE: You may see error as "Context path '' is already in use by the module: / application: FMW Welcome Page Application"
It means there is already an application "FMW Welcome Page Application" running which has context path as "/". We need to stop this application. Go to console and stop this application and then re-run the page.
IE started showing favicon icon. Firefox and Chrom are still not showing. Looks like Firefox and Chrom needs explicit <link ...> tag in its head section.
b. Settting context root while deploying application (war/ear) on a stand-alone server:
When we are deploying application on a stand-alone server we can set context-root using war deployment profile of UI project. Navigate to UI project's properties > Deployment and select appropriate war deployment profile. Edit it and change context root as shown below.
Now deploy application using this war profile on a stand alone server.
IE started showing favicon icon. Firefox and Chrom are still not showing. Looks like Firefox and Chrom needs explicit <link ...> tag in its head section.
2. Add explicit <link ....> entry in your page head: To show a favicon icon we can also add following entry on head section of html as
<html>
<head>
<link rel="shortcut icon" href="location-of-favicon.ico file">
</head>
<body>
</body>
</html>
The key-word "shortcut icon" allows browser to show icon file as a favicon. If favicon.ico is under web-root directory we can directly write href="favicon.ico". If its under some other directory like images etc we can refer it as <link rel="shortcut icon" href="/context-name/images/favicon.ico">
In terms of ADF question is how to write <link ...> line in head section of html.
We can use metaContainer facet of <af:document> tag
Add following line under <af:document> and change favicon.ico location accordingly.
<f:facet name="metaContainer">
<af:outputText escape="false"
value="<link href="#{facesContext.externalContext.requestContextPath}/images/favicon.ico" rel="shortcut icon">" id="o1"/>
</f:facet>
To add this line we can also try to write a javascript which runs on page load but I found that javascript solution is not working in IE.
========================
11.1.2 solution: From 11.1.2 we have smallIconSource and largeIconSource attributes to show favicon icon.
Bottom line is
1. If you are on 11.1.1.x use metaContainer facet approach to make favicon working in all browser.
2. If you are on 11.1.2.x use smallIconSource and largIconSource attributes of <af:document> tag.
In both approaches you need to do it in individual jspx page. I believe we don't have any common solution (like adding it in template) which will allow us to avoid code duplication in all pages.
Disclaimer: Any views or opinions presented in this blog are solely those of the author and do not necessarily represent those of the company.
1 comment:
Nice Article, thanks for this information
Also check this out
Laptops, Mobiles, Games, Tv, Smartwatches etc Daily Tech News Updates.
Post a Comment