Adding favicon for your application
- Create a PNG image – with dimensions 256×256 pixels. You can use Photoshop or any other editing software.
- 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.
- Download the .zip archive generated to your local machine.
- Upload the files from the archive into your
Application Static Filesfolder (inside afaviconsubfolder) - 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.
Adding custom application icon in APEX Builder
- Upload your original PNG image (256×256) into the root of your
Static Application Files. In my case –apex_favicon_256.png - Go to
Edit Application Properties. LocateApplication Icon>Icon File Nameand replace the default value withapex_favicon_256.png
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:
- Open your APEX application in
Safaribrowser of your iPhone - Tap on the
Downloadicon
- Scroll down and tap on
Add to Home Screenbutton
- Tap on ‘Add’ button
- Enjoy your new Home Screen shortcut
APEX App Lab - Blog 
2 thoughts on “Quick Tips: Add favicon and custom Application icon in APEX”