How to personalize the icon in an OutSystems eSpace / application (favicon)

Back to Forums

AcacioPN

Staff

How to personalize the icon in an OutSystems eSpace / application (favicon)

Discussion

OS Certified

How-to

Overview

Most popular web sites, and most corporate ones have a special icon that will show up in the browser, next to the URL. This is very useful to accentuate branding and to make your application easily identifiable.
It is very simple to obtain this effect with the Agile Platform. There are two major methods that you can choose:

Use a single icon for all content in your OutSystems server;
Use a custom icon for an application / page.

Notice that 2. overlaps 1, i.e. you can use method 1 for all eSpaces and create exception(s) using method 2.

Pre-requisites

Make sure that you have an icon already prepared. It should be 16x16 pixels, in bitmap format.

1. Use a single icon for all content in your OutSystems server

To do this, simply name the icon favicon.ico and place it in the root level. E.g. if you server is https://outsystems_server/ , make sure that the icon is accessible under https://outsystems_server/favicon.ico.
No more customization is required.

2. Use a custom icon for an application / page.

For this, you need to place a call to action AddFaviconTag in the preparation of all web screens. This action comes from extension HTTPRequestHandler, which comes with the standard Enterprise Manager package.

Remarks

Check the following link for more information:

https://en.wikipedia.org/wiki/Favicon

Feel free to post your corrections and/or different use cases you might know from your experience.

18 Jan 2010

Pedro Gonçalves

Staff

Hi Acácio,

Thanks for this post.

I ran into some problems with IE and used the following msdn resource: How to Add a Shortcut Icon to a Web Page (at https://msdn.microsoft.com/en-us/library/ms537656(v=vs.85).aspx#Troubleshooting_Shortcut_Icons)

If you're not sure about the .ico file you were given, remake it using a specific .ico graphic editor like this one: QTam Bitmap to Icon (at https://www.littleurl.net/ef8031)

Good luck!

22 Mar 2011

Nuno Mendes

Hi there,

With the new version of OutSystems V.6 + we have available the Layout's (themes), etc...
So I'm trying to use the action AddFavIconTag in the preparation of the layout_normal, with the parameters:
- IconFileName: ./img/favicon.ico
- MimeType: image/x-icon

But the icon is not showned.

What I'm doing wrong?

Thanks.

Best Reggards,
NM

27 Jul 2012

Evert van der Zalm

MVP

Hello Nuno,

Have you tried adding the favicon as an resource instead of image? (no deploy action). Only then it will be generated as 'default' favicon.

Can you see, in the head html of your page, if the favicon tag is loaded?

Kind regards,
Evert

27 Jul 2012

Nuno Mendes

Hi Evert,

It works fine if in the login page. Why? The login page is in the same eSpace then the Layout_Login (a core eSpace, that has also the .ico image).
We have several eSpaces that consumes a Core eSpace that has the Layout_Normal. In the Layout_Normal I put the AddFavIconTag just like you say. But it does not seems to work...

I would like to avoid add that Tag to all Screen preparations... But If there is no other way...

The must strange behaviour is that the tag is in the Head... But no ico.

Thanks.

Best Reggards,
NM

27 Jul 2012

1 reply

30 Jul 2012

Show thread

Hide thread

Evert van der Zalm

MVP

Nuno Mendes wrote:

Hello Nuno,

Understand your problem, don't have it myself since the icon is included in the same eSpace. I think the problem is indeed that the favicon in your core eSpace. Meaning the favicon image can be found on <server>/<eSpace>/<favicon>. When the favicon is in your core eSpace the image source is <server><core eSpace>/<favicon>. Think thats the problem for your referenced eSpaces, since those doesn't have the favicon image. I would try 3 cases:

- Add the favicon as resource to your other eSpaces (the favicon call will still be in the core eSpace).

- In the core eSpace set the favicon url to be: <eSpace>/<favicon> then it will be linked to your core eSpace (keep in mind that you can see the name of your core eSpace in the header, but that would already be possible since the css is also there).

- If both options don't work, you could try a combination. In the 'normal' eSpace add the favicon as resource. In the core eSpace you build the favicon with the <tentantname>/<favicon> (the tentantname of your core eSpace contains the entry eSpace name, in you case the 'normal' eSpace name). The link to the favicon will be to your normal eSpace instead of the core eSpace.

Don't know if upper suggestions work, those are just things I would try :-). If those doens't work, add the favicon javascript to the header block in you eSpace, then you only need to do it once. If the header webblock is in your core eSpace, I will suggest to add the favicon call in a webblock, add that webblock to every page (in the top so it's loaded first) and add it to you default layout webblock.

Kind regards,
Evert

30 Jul 2012

Nuno Mendes

Hi Evert,

The second option works perfectly. And is in my opinion the best.

Just a quick fixe to it. We had to put something like /Core/favicon.ico. It's just needed an extra slash in the beginning according to your idea.

Thanks.

Best Regards,
NM

30 Jul 2012

Doug_inVA

Let's bump option 1 for the PaaS users. How do we add a favicon to the root of our environment?

01 Apr 2014

1 reply

23 Jan 2020

Show thread

Hide thread

Pawan Kumar Sharma

Doug_inVA wrote:

Let's bump option 1 for the PaaS users. How do we add a favicon to the root of our environment?

Hi Doug, Did you get the answer for "How to add a favicon to the root of our environment?" For us it's throwing exception while trying out in Chrome. Its trying to find out the favicon at root of environment & throwing 401 error. Though we are not using addfavicon method explicitly also.

Let me know if anyone has a correct solution for this issue.

23 Jan 2020

André Vieira

Staff

Hi Doug,

Can't you use option 2?

10 Apr 2014

Victor Salvalagio Pereira

Hi

I had some problems using faveicon in Google Chrome.
Chromes does not allow u to have a faveicon called "faveicon.ico". Rename it to anything else and it will work.

21 Oct 2014

Segonto Sebetwa

With Reactive here is a video to add a favicon Click here.

With traditional web (Platform 11)

1. Add your Icon to the resources

2 Deploy Action: Deploy to Target Directory

3 Go to the following Server actions and substitute the OutSystems icon with the one you uploades into the resouces

24 Jan 2020

1 reply

24 Jan 2020

Show thread

Hide thread

Pawan Kumar Sharma

Segonto Sebetwa wrote:

With Reactive here is a video to add a favicon Click here.

With traditional web (Platform 11)

1. Add your Icon to the resources

2 Deploy Action: Deploy to Target Directory

3 Go to the following Server actions and substitute the OutSystems icon with the one you uploades into the resouces

It still breaks. It tries to find the favicon at root of environment, but fails. :( . How to add a favicon.ico at root of environment in outsytems. Is there any way to do it through Factory Configuration?

24 Jan 2020

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines