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

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

  
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:
  1. Use a single icon for all content in your OutSystems server;
  2. 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 http://outsystems_server/ , make sure that the icon is accessible under http://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: Feel free to post your corrections and/or different use cases you might know from your experience.
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 http://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 http://www.littleurl.net/ef8031)

Good luck!
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

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
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
Nuno Mendes wrote:
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
 
 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
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
Let's bump option 1 for the PaaS users.  How do we add a favicon to the root of our environment?
Hi Doug,

Can't you use option 2?
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.