Summary

By customizing the favicon for the User and Manager composite portals, you can display your own company or application graphic next to your application's URL address in the browser.

When users have multiple browser tabs or windows open, users can rapidly identify your application by its favicon.

Suggested Approach

A favicon is a square icon that is typically displayed next to a Web page URL when the URL appears in the browser's address bar, in lists of favorites or bookmarks, and on browser tabs. For example, the PDN Web site has this favicon (outlined in green):

To customize the favicon for the User and Manager composite portals, you create a binary file rule to hold your favicon.ico file and you override the standard pyPortalIcon HTML Fragment rule to point to your binary file rule.

Step 1: Obtain the favicon file that you want to use

To ensure that most browsers can display your favicon, it is good practice to have the favicon image be 16x16 pixels square, and saved into the ICO file format; for example favicon.ico. Popular image software tools, such as Adobe Photoshop or GIMP, can create images and save them as an ICO file type.

In this article, the following image is used for the examples:

Step 2: Create a binary file rule for the favicon

1. In the Rules Explorer, right-click on the Technical category and select New > Binary File from the context menu. The Binary File: New form is displayed.
2. In the form, specify the following information:

   For App Name, normally use webwb, a subdirectory of the application server.

   For File Name, provide the name that you want to use to refer to the favicon file. While it does not have to be named "favicon", a good practice is to give it an easily recognizable name.

   For the File Type, enter ico.

   For the RuleSet, select the appropriate RuleSet for the intended users of your User and Manager composite portals.

3. Click Create. In the Binary File rule form, enter a meaningful short description, then click Upload File.

4. In the Upload File window, browse to the location of your favicon file, select it, and then click Upload fileto upload the image to the binary file rule.

   Note: The ICO image type does not display in the rule form as other image file types do.

   If the upload is successful, this message displays:

   

5. Save the rule.

Step 3: Override the standard pyPortalIcon HTML Fragment rule to point to your binary file rule

1. Locate the standard pyPortalIcon HTML Fragment rule (for example, by doing a search for the rule named pyPortalIcon).
2. Open the rule form and then click the Save As icon to save your own copy of the rule.

   Typically, you save this copy of the pyPortalIcon rule to the same RuleSet where you saved your binary file rule in Step 2.

3. In the SaveAs form, keep the Stream Name as pyPortalIcon. Select the RuleSet and Version, and click Save As.

4. In the new pyPortalIcon rule form, update the HREF in the LINK line in the HTML Source to use the name of the image in the binary file rule that you created in Step 2. Here, the image file name is ourfavicon.ico.

5. Save your pyPortalIcon rule.

Step 4: Verify the favicon in the User and Manager composite portals

1. Log out of the Designer Studio.
2. Log in as an operator that uses the User or Manager composite portal, and verify that the favicon appears next to the URL when the portal is loaded.

Here is an example of the User composite portal with the example favicon from Step 1:

Troubleshooting: Clear the browser cache

By default, Process Commander uses HTTP caching mechanisms to provide a more efficient user experience. Therefore, when you update or override an existing image, you may need to clear your browser cache to have the browser obtain the new image file. Otherwise, the browser continues to display the old image.

To clear the browser cache in Internet Explorer:

1. In Internet Explorer 7, select Tools > Internet Options.
2. In the Browsing history section, click Delete.
3. In the Temporary Internet Files section, click Delete files..., and then click Yes in the confirmation message. This clears the browser cache, and at the next visit to the URL, the browser requests the new image file.