APEX 5.0: Custom Favicon for Applications using Universal Theme

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. Instead follow these steps:

  1. Go to Shared Components
  2. Click Application Definition Attributes (in Application Logic region)
  3. Go to Substitutions
  4. Create a new substitution called APP_FAVICONS which contains your new favicon definition. Here is an example which we are using for our P-Track Packaged Application:
    <link rel="shortcut icon" href="#IMAGE_PREFIX#apex_ui/img/favicons/app-p-track.ico">
    <link rel="icon" sizes="16x16" href="#IMAGE_PREFIX#apex_ui/img/favicons/app-p-track-16x16.png">
    <link rel="icon" sizes="32x32" href="#IMAGE_PREFIX#apex_ui/img/favicons/app-p-track-32x32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="#IMAGE_PREFIX#apex_ui/img/favicons/app-p-track.png">
    

    You can use #APP_IMAGES# to reference Static Application Files.

Favicon preview in browser tab

APP_FAVICONS

Note: In Oracle APEX 5.1 we plan to expose this feature as a declarative attribute for User Interfaces because for 5.0 it was too late in the game.

If you want to use our new and nicer default favicon in your existing application then you can do that by editing your Page Template and add the new template placeholder #FAVICONS# in-front of the #HEAD# placeholder. For example:

...
<head>
  ...
  <title>#TITLE#</title>
  ...
  #PAGE_CSS#  
  #FAVICONS#
  #HEAD#
  ...
</head>
...

4 thoughts on “APEX 5.0: Custom Favicon for Applications using Universal Theme

  1. Thanks for the tip, Patrick. But please don’t assume that everyone who finds their way here knows this product well. I call it Obfuscation Express in jest, but there is a good reason for doing so.
    1. Where does one upload their favicon file so that the substitutions will find it?
    2.Where does one edit the Page Template with the #FAVICONS# placeholder? If I go through Shared Components to Templates to the Page section, I find 28 items, none of which suggest they would contain the example given. Perhaps you meant something else also called a page template.

  2. Hi Mike,

    1. Where does one upload their favicon file so that the substitutions will find it?

    You could upload it into a directory on your web server or store it as Static Application File in Shared Components -> Files -> Static Application Files and reference it as #APP_IMAGES#your_file.ext in your application.

    2.Where does one edit the Page Template with the #FAVICONS# placeholder?

    You are on the right track. It’s in Shared Components -> User Interface -> Templates -> Pick Type ‘Page’. Start with the page template which shows a checkmark for Default. You will find the #HEAD# placeholder in the Header attribute of the region Definition. Do the same for all other page templates which are in use (column References shows a value > 0).

    Regards
    Patrick

Comments are closed.