Custom Browser Tab Icon - MangoES

[henryblu]

Hello,

I am using a MangoES, and would like to change the Browser Tab Icon. I have logged in to the MangoES via Webmin and accessed the File Manager within the 'Other' tab.

In accordance with the instructions (https://help.infiniteautomation.com/how-to-use-the-overrides-folder), I have copied /classes/env.properties (within the opt>mango), As shown below:

I have then pasted it into the folder opt>mango>overrides>properties:

Based on the forum post here (https://forum.infiniteautomation.com/topic/2523/change-browser-tab) I have created a folder called 'images' within overrides>web and uploaded a file named favicon.ico.

I have then cleared my browser cache on Google Chrome (ctrl-shift-del) (from the beginning of time) and restarted my browser.

When I log-in the browser tab icon remains the same. I have also tried running the Mango on Firefox and Chromium to see if this changes but no luck.

Has anyone been able to achieve this?

Cheers, Henry

[JoelHaggar]

I realized that what you did here overrode the favicon used in the old UI but not the new UI. The images and icon for the new UI are stored in: web/modules/mangoUI/web/img so you would create the same path under the overrides folder. I'm just not sure which of the files is used there so Jared will probably need to answer that tomorrow. Sorry about the confusion on this.

[Jared Wiltshire]

You will need to override each of the icons (which image is used depends on the screen density).

$MA_HOME/overrides/web/modules/mangoUI/web/img/icon16.png
$MA_HOME/overrides/web/modules/mangoUI/web/img/icon36.png
$MA_HOME/overrides/web/modules/mangoUI/web/img/icon48.png
$MA_HOME/overrides/web/modules/mangoUI/web/img/icon72.png
$MA_HOME/overrides/web/modules/mangoUI/web/img/icon96.png
$MA_HOME/overrides/web/modules/mangoUI/web/img/icon128.png
$MA_HOME/overrides/web/modules/mangoUI/web/img/icon144.png
$MA_HOME/overrides/web/modules/mangoUI/web/img/icon192.png

[jflores13]

Hi,

I was also able to change the logo without a problem and the icon from the old UI, but I tried generating and overriding all of those new icons with no luck.

Since the path posted by Joel is a bit different than the one posted by Jared, I created an overrides/web/modules folder and also an overrides/modules folder with the rest of the path and the icons listed, just in case the first one isn't the exact path.

I think some file locations may be different at the moment because the orange M is still showing in my tab. I don't know what else could be wrong, and I don't know how to inspect the tab icon element to find the path to the file using the web browser's element inspector.

I would be grateful if you could please confirm the path to the files I need to create, because I already cleared my chrome images, checked multiple times if the files were in those 2 paths using webmin, and power cycled the MangoES about 3 times.

Thanks in advance!

[MattFox]

/[mangodir]/overrides/web/modules/mangoUI/web/

For icons in the mangoUI mobile view you'll need:

/[mangodir]/overrides/web/modules/mangoUI/web/ui/manifest.json

For altering favicons:

/[mangodir]/overrides/web/modules/mangoUI/web/ui/index.html

[Jared Wiltshire]

The paths that I posted were URLs, I have edited the post to show the override paths. If you override all the paths listed above you will not have a problem, just be sure to clear your cache. Sometimes browsers will hang onto the icons even after you clear your cache.

You can also override the following files if desired to change the locations, sizes etc of the images. I would strongly not recommend overriding index.html though because if we make changes to this in the codebase you will not get the updates and it will also affect the caching of resources (Each resource linked to from the index.html file has a hash appended which changes when the file is modified).

$MA_HOME/overrides/web/modules/mangoUI/web/ui/manifest.json
$MA_HOME/overrides/web/modules/mangoUI/web/ui/index.html

[jflores13]

Alright, great help @mattfox & @Jared-Wiltshire. Thanks a lot!