Friday, August 7, 2015

ADDING A FAVICON TO APEX

 A Favicon (Favorite Icon), also known as a Shortcut Icon, Web site Icon, Tab Icon or Bookmark Icon, is a file containing one or more   small  icons, associated with a particular website or web page. A web designer can create this icon and upload it to a website   (or web page) by several means, and graphical web browsers will then make use of it. Browsers that provide Favicon support typically  display a  page's Favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a  tabbed  document interface  typically show a page's Favicon next to the page's title on the tab.
For applications which are using Universal Theme you don’t have to modify the Page Template anymore if you want to replace the  default Favicon with a custom one.

Steps:

Step 1: Go to Shared Components > Images and upload your new favicon.ico file.

Step 2: Then go to your application and the 'Edit Application Definition' button, then the Definition
tab.

Step 3: Scroll down to Substitutions. Add a new subsitution string called CUSTOM_FAVICON.
Enter the substitution string as:
#WORKSPACE_IMAGES#favicon.ico











Click Apply Changes.

Step 4: Navigate to Shared Components > Templates. Filter by 'Page' type.

Step 5: Edit each of your page templates (tip: start with one that you can test).
In the 'Header' definition, find the line:

<link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
Change it to:
<link rel="icon" href="&CUSTOM_FAVICON." type="image/x-icon">
<link rel="shortcut icon" href="&CUSTOM_FAVICON." type="image/x-icon">

OUTPUT:


Before Adding Custom Favicon:


After Adding Custom Favicon:









  ADDING A FAVICON TO APEX 5 UNIVERSAL  THEME

Steps:

Step 1: Go to Shared Components > Static Application Files and upload your new favicon.ico file.

Step 2: Then go to your application and the 'Edit Application Definition' button, then the Definition
tab.
Step 3:Scroll down to Substitutions. Add a new subsitution string called APP_FAVICONS
Enter
the substitution string as:
<link rel="icon" sizes="16x16" href="#APP_IMAGES#favicon.ico">
Click Apply Changes.


OUTPUT:

After Adding Custom Favicon:

3 comments:

  1. If you have multiple apps in a workspace, wanting different versions of the favicon.ico file, then "WORKSPACE_IMAGES" should be changed to "APP_IMAGES"

    ReplyDelete
  2. I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here.Same as your blog i found another one Oracle Fusion SCM .Actually I was looking for the same information on internet for Oracle Fusion Supply Chain Management Cloud and came across your blog. I am impressed by the information that you have on this blog. Thanks once more for all the details.

    ReplyDelete