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.

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

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

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:

See Also: Managing Static Application Files

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.

Using Edit App Icon on the Developer Toolbar

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

To use Edit App Icon:

  1. Preview the page by running it.

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

  2. On the 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