Wednesday, November 16, 2011

ADF: favicon and browser bookmark icons

The favicon is the little icon that displays in the Browser URL address field when a requested page loads. In Oracle JDeveloper 11.1.1.x releases, the favicon needed to be added to the page source. In JDeveloper 11.1.2 a new attribute, smallIconSource has been added to the af:document tag to serve the favicon easily.
smallIconSource
Specifies a small icon that the browser may insert into the address bar (commonly known as a "favicon"). If this attribute is not specified, the browser may default to using a file named "favicon.ico" located at the root of your server. (This default behavior is not something provided by this framework and may vary between browsers.) This attribute supports a space-delimited list of files (each file may be wrapped in quotes or apostrophes if the file path contains a space). If the file path specifies a single leading slash, this means that the file is located inside of the web application's root folder (so "/small-icon.png" would resolve to something like "http://www.oracle.com/adf-faces/small-icon.png"). If the file path specifies 2 leading slashes, this means that the file is located inside of the server's root folder (so "//small-icon.png" would resolve to something like "http://www.oracle.com/small-icon.png"). Browsers typically expect these files to be 16 pixels by 16 pixels. Typically, the first listed file will be the one used. Otherwise, if a browser only supports certain kinds of files, the first file in the list that uses a supported file extension will be the one that is used for that browser.
Another new attribute is the largeIconSource that applies an image to bookmark entries in borwsers.
largeIconSource
Specifies a large icon that the browser may use when bookmarking this page to your device's home screen. If this attribute is not specified, the browser may default to using a file named "apple-touch-icon.png" located at the root of your server. (This default behavior is not something provided by this framework and may vary between browsers.) This attribute supports a space-delimited list of files (each file may be wrapped in quotes or apostrophes if the file path contains a space). If the file path specifies a single leading slash, this means that the file is located inside of the web application's root folder (so "/large-icon.png" would resolve to something like "http://www.oracle.com/adf-faces/large-icon.png"). If the file path specifies 2 leading slashes, this means that the file is located inside of the server's root folder (so "//large-icon.png" would resolve to something like "http://www.oracle.com/large-icon.png"). Browsers typically expect these files to be 57 pixels by 57 pixels but could be larger, e.g. 72 pixels by 72 pixels or 129 pixels by 129 pixels. Typically, the first listed file will be the one used. Otherwise, if a browser only supports certain kinds of files, the first file in the list that uses a supported file extension will be the one that is used for that browser.
<af:document title="My Page"
  smallIconSource="/favicon.png /favicon.ico"
  largeIconSource="/touchicon.png">
  <af:form> ... </af:form>
</af:document>

No comments :

Post a Comment