5.13 Managing Application Icons

Add and update the icon that displays as the Favicon, the PWA icon, the Apple touch icon, and the App Builder icon in Oracle APEX applications.

• About Application Icons
  Learn about managing application icons in your APEX application.
• Managing Icons in User Interface Attributes
  Edit or upload application icons from the Icon region on the User Interface page.
• Using Edit App Icon on the Runtime Developer Toolbar
  Edit icons in runtime using the Use Edit App Icon option on on the Runtime Developer toolbar, Customize menu.

5.13.1 About Application Icons

Learn about managing application icons in your APEX application.

When you add an icon to an application it is propagated to the following places in your application:

• the Favicon (browser tab icon)

• the PWA icon

• Apple touch icon (when adding a PWA app to iOS)

• App Builder icon (which displays on the application home page)

• Sign In page

• Home page breadcrumb region

Application icons are stored in Shared Components, Static Application Files in five sizes:

• 32x32 - Mini square icon
• 144x144 - Small rounded icon
• 192x192 - Small square icon
• 256x256 - Large rounded icon
• 512x512 - Large square icon

When editing an individual icon, you take ownership of the icon. Be sure to upload an icon that matches the right size (that is 32x32, 144x144, 192x192, 256x256, or 512x512).

Tip:

The two rounded icons (144x144 and 256x256) are used in places like the macOS dock, where design guidelines encourage the use of rounded icons. The exact specifications for the rounded icons is to have 10% padding on each side and 20% border radius.

You can edit or upload app icons in the following ways:

• When Creating a New App - When creating a new application, click Set Icon on the Create an Application page in the Create Application Wizard. See Running the Full Create Application Wizard.

• By Editing User Interface Attributes - By editing the attributes under Icon on the User Interface page. See Managing Icons in User Interface Attributes.

• By Editing the Icon in Runtime - In runtime, click Customize, Edit App Icon on the Runtime Developer Toolbar. See Using Edit App Icon on the Runtime Developer Toolbar

• By Uploading Icons to Static Application Files - Application icons are stored in Shared Components, Static Application Files in five sizes: 32x32, 144x144, 192x192, 256x256, or 512x512.

  To control the upload for all icon sizes, upload your icons to the Shared Components, Static Application Files and use the following file paths:

  • #APP_FILES#icons/app-icon-32.png

  • #APP_FILES#icons/app-icon-144-rounded.png

  • #APP_FILES#icons/app-icon-192.png

  • #APP_FILES#icons/app-icon-256-rounded.png

  • #APP_FILES#icons/app-icon-512.png

See Also:

Managing Static Application Files

5.13.2 Managing Icons in User Interface Attributes

Edit or upload application icons from the Icon region on the User Interface page.

Tip:

If an application uses legacy icons, a note displays at top of the Icon region. Oracle recommends replacing legacy icons by clicking Change Icon button.

To manage application icons by editing User Interface attributes:

1. On the Workspace home page, click the App Builder icon.
2. Select an application.

   The Application home page appears.

3. From the Application home page, you can access the User Interface page in two ways:
   • Edit Application Definition button:

     1. Click Edit Application Definition to the right of the application name.

     2. Click the User Interface tab.

   • From Shared Components:

     1. Click Shared Components.

     2. Under User Interface, click User Interface Attributes.

   The User Interfaces page appears.

4. Find Icon.
   Existing icons display in a table.
5. To edit or update an icon, click Edit.
   1. In the Edit Application Icon dialog you can either:

      • Click Choose Fileto navigate to the new icon.

      • Drag and drop a new file to the region provided.

   2. Click Close.
6. To choose a new icon from the library, click Change Icon.
   1. In the Edit Application Icon dialog, you can either:

      • Upload an icon. Click the plus (+) sign and navigate to the icon, or drag and drop the icon to the Upload your own icon region.

        If you upload a custom icon, it is resized to a number of sizes and will be propagated to the appropriate places at runtime.

      • Select an icon from the library. Select the icon color and then the icon.

   2. Click Close.
7. Click Apply Changes to save your changes.

5.13.3 Using Edit App Icon on the Runtime Developer Toolbar

Edit icons in runtime using the Use Edit App Icon option on on the Runtime Developer toolbar, Customize menu.

To use Edit App Icon:

1. Preview the page by running it.

   The Runtime Developer toolbar displays at the bottom of any editable running page.

2. On the Runtime Developer toolbar. click Customize and then select Edit App Icon.

   The Edit Applicatioin Icon dialog appears.

3. In the Edit Application Icon dialog, you can either:
   • Drag and drop the file to the Upload a new icon region.
   • Click the Upload a new icon region and navigate to the file.
4. When the new icon appears, use the Zoom slider to reposition it within the frame.

   When focused on the icon cropper, the following keyboard shortcuts are also available:

   • Left Arrow - Move the image left

   • Up Arrow - Move the image up

   • Right Arrow - Move the image right

   • Down Arrow - Move the image down

   • I - Zoom in

   • O - Zoom out

   • L - Rotate left

   • R - Rotate right

   Press Shift to move faster.

5. To save your changes, click Save.
6. To exit the dialog without saving, click Cancel