Friday, 7 August 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. Regards
    Sridevi Koduru (Senior Oracle Apps Trainer Oracleappstechnical.com)
    LinkedIn profile - https://in.linkedin.com/in/sridevi-koduru-9b876a8b
    Please Contact for One to One Online Training on Oracle Apps Technical, Financials, SCM, SQL, PL/SQL, D2K at training@oracleappstechnical.com | +91 - 9581017828.

    ReplyDelete
  2. 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