Customizing Application Icons  in APEX 22.1

With version 22.1 of APEX, along with the many more top features, comes the ability to upload and modify your Application icon. If you have read my blog post Quick Tips: Add favicon and custom Application icon in APEX, I described the way I do it prior to having this new option available. Well, you can still follow my steps, but if you work with version 22.1 just save your time and use the built-in option. It not just allows you to upload and resize your own image as an Application icon while creating the app, but also allows you to modify it later using some new regions, added into the APEX Builder.

What does this new feature give you?

• Ability to upload and resize your own image as an Application icon. By doing this you not only get a new APEX Builder Application icon, but also:
  • favicon visible in your browser next to the URL
  • PWA icon (in case your application is created as PWA)
  • Application Login screen icon
  • Icon for the homepage Breadcrumb region

• New edit region in Shared components, where you can check the existing icon and modify it. Could be found under Shared Components – User Interface Attributes – Icon. This new Icon section replaces the now deprecated Favicon HTML section. If you had however your own custom icons added there, they will be migrated with the option to select a new icon using the new interface (check screenshots below).

• New Developer Toolbar option, which could be found under Customize – Edit Application Icon.

Adding an Application Icon the new way

Adding a new Application icon is pretty straightforward. It is explained very well in the video attached at the end of this blog post.

I want to point out just some additional benefits regarding accessibility – you can do most of the actions, using just your keyboard. And if in most cases you wouldn’t even notice it, it is a big help for people who can’t use their mouse because of a medical condition or for people who want to make zooming, rotating and cutting pictures pixel perfect. In general APEX is moving in that direction of making it more accessible, which will ultimately make the product attractive to new groups of people. To read more about Accessibility and the need to pay attention to it, you can check the following link – https://www.w3.org/WAI/fundamentals/accessibility-intro/.

So, when editing an image, and when focused on the icon cropper, the following keyboard shortcuts are available:

• Left Arrow: Move image left*
• Up Arrow: Move image up*
• Right Arrow: Move image right*
• Down Arrow: Move image down*
• I: Zoom in
• O: Zoom out
• L: Rotate left
• R: Rotate right

*Hold Shift to move faster

Under the hood

What happens in the background when you upload and save your new Application icon?

• Three different image files are generated:
  #APP_FILES#icons/app-icon-512.png
  #APP_FILES#icons/app-icon-192.png
  #APP_FILES#icons/app-icon-32.png
  
• If you uploaded a PNG image (or other format, supporting transparency), APEX will keep the transparency while creating the icons above.
  
• However, in some places, you would see your icon on a solid colour background, such as on the Login screen, Breadcrumb bar (Hero template), etc.

To fix that, you can change your CSS styles (and the following variables in particular):

/* Change this class for the Login screen Logo */
.t-Login-logo {
   background-color: var(--ut-app-icon-background-color,var(--ut-component-icon-background-color));
}

/* Change this class for the Breadcrumb Hero region */
.t-HeroRegion-icon {
   background-color: var(--ut-hero-region-icon-background-color,var(--ut-component-icon-background-color));
}

There are two ways to change the background colour – by either using the Theme Roller and changing the Primary Accent (note that you can only change it to another solid colour from here) or by changing the –ut-component-icon-background-color CSS variable. Note that changing the Primary Accent will affect not only the icon, but many other components in your app. So my recommendation is to target only the specific classes for the mentioned regions like shown below.

:root {  
    --ut-component-icon-background-color: hsl(0 0% 100% / 0%);
}

If you like only these two regions’ icons to have transparent background, use the style below. Learn more about hsl property here: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

.t-Login-logo, .t-HeroRegion-icon {
   background-color: hsl(0 0% 100% / 0%);
}

Learn more

My way of doing it, prior to 22.1 – Quick Tips: Add favicon and custom Application icon in APEX

The official Oracle APEX YouTube video showcasing the new feature in 22.1 – see it below: