Quick Tips: Add favicon and custom Application icon in APEX

Adding favicon for your application

  1. Create a PNG image – with dimensions 256×256 pixels. You can use Photoshop or any other editing software.
  1. Go to https://realfavicongenerator.net/ and generate an .ico file. Alternatively, use a tool of your preference and generate .ico files both 32×32 and 16×16 pixels.
  1. Download the .zip archive generated to your local machine.
  1. Upload the files from the archive into your Application Static Files folder (inside a favicon subfolder)
  2. Add the following to your Shared Components > User Inteface section, User Interface Attributes > Favicon > Favicon HTML
<link rel="shortcut icon" href="#APP_IMAGES#favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="#APP_IMAGES#favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="#APP_IMAGES#favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="#APP_IMAGES#favicon/favicon-16x16.png">
<link rel="mask-icon" href="#APP_IMAGES#favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

*Note that the filenames should match the ones you have uploaded into Application Static Files earlier.

The favicon of your application will now look like this in your browser.

Adding custom application icon in APEX Builder

  1. Upload your original PNG image (256×256) into the root of your Static Application Files. In my case – apex_favicon_256.png
  2. Go to Edit Application Properties. Locate Application Icon > Icon File Name and replace the default value with apex_favicon_256.png
The new icon will look like this in your APEX Application Builder

Bonus icon

If you followed the steps, you will already have a bonus icon for your device – being Android or iPhone. To get it on your Home screen, do the following:

  1. Open your APEX application in Safari browser of your iPhone
  2. Tap on the Download icon
  1. Scroll down and tap on Add to Home Screen button
  1. Tap on ‘Add’ button
  1. Enjoy your new Home Screen shortcut
Here is how it looks on my iPhone

One thought on “Quick Tips: Add favicon and custom Application icon in APEX

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s