Favicon in Browser Tab

Classic Servoy
1

Is it possible to display an icon (favicon) in the Browser Tab when working in the NGClient?
We have set ‘Servoy.branding’ to true and we have put an icon in the ‘Servoy.branding.windowicon’ field, but the icon is not displayed in the Browser Tab.
It concerns a Tomcat server.

2

I guess you could file a feature request that the windowicon (which is used in the smart client) can be used as a favicon in the browser.

In the meantime you could try to place your icon as a file called “favicon” in application_server/server/webapps/ROOT. I think most browsers will pick that up.

3

ah, sorry. I missed the tomcat part. then the URL is different and I don’t think you currently have a way of including it in the war file other than copying it in there manually before you deploy.

4

When you are making a war the from the developer the contents of:

application_server\server\webapps\ROOT

is taken as the root of the WAR that is generated

there you have the favicons:

favicon.ico
favicon75x75.png
favicon200x200.png

replace all of them with the one you want in the different resolutions

Then if you make a WAR then those icons should be used in the browser as the favicons

5

Dear Johan

I was glad to find this thread. So I could place the favicons for our NG application in the correct folder.

I could not find anything about favicons in the wiki documentation. Could you please add this information?
Are the three names and formats mandatory? Or are they defined in a property (or CSS)? I did not expect these resolutions.

Thanks for clarification and kind regards

6

thats what ngclient current generates in its index page, but the names don’t make much sense (i copied it over from what wordpress generates in the index.html)

i will stream line it for 812 to be more inline with what it exactly does, this is generated in 812:

(in 811 it that 75x75 and 200x200 which according to the sizes that we give don’t make much sense)

i added a wiki page: https://wiki.servoy.com/display/DOCS/Favicon+support

7

Hi Johan

Thank you for your answer and for updating the wiki.

Do I understand this right, for 8.1.2, I’ll have to change the name and size of the icons?

Kind regards

8

yes (the size of the icons where already what now the name says, also the thing that we generated already said that 192x192 instead of 200x200) …

(so also now it should already by 192x192 not 200x200…

it was just confusing so thats why i renamed it.

9

Aha, so thank you for explaining it.

Kind regards

10

Hi,

Is there a way to use different favicon for different solutions running on the same war? Solution1 with faviconA and Solution2 with faviconB?

Regards,

11

i am not sure if this does work but you could try to use the “head-index-contributions.html”
(see media of your solution where you can generate such a file)

and in that file you have

and you place that icon in the root of your web app (described here: https://wiki.servoy.com/display/DOCS/Favicon+support)

12

Hi Juan,

another solution is to use plugins.ngclientutils.contributedTags in the onOpenSolution method of the solution.
Something like this:

var favicon = {
		tagName: "link",
		attrs: [
		{
			name: "rel",
			value: "icon"
		},
		{
			name: "href",
			value: "https://www.solutiative.nl/assets/images/solutiative.ico"
		},{
			name: "sizes",
			value: "32x32"
		}]
	};

plugins.ngclientutils.contributedTags.push(favicon);

As you can have a different onSolutionOpen method for each solution, this might be an easy way to change the favicon.

13

Great!

Thank you Marc and Johan

14

Hi Marc,

The solution you proposed (plugins.ngclientutils.contributedTags.push(favicon):wink: works fine under development, but on the production server continues to show the icon configured under Servoy Admin.

Regards,

15

Hi guys,

This is what I an using in the OnSolutionOpen and it seems to work fine:

	var img = solutionModel.getMedia("favicon32x32.png")
	var imgAsBase64 = new Packages.org.apache.commons.codec.binary.Base64().encodeAsString(img.bytes);
	var imgHref = "data:image/png;base64," + imgAsBase64;
	application.putClientProperty(APP_NG_PROPERTY.WINDOW_BRANDING_ICON_32, imgHref);
	application.putClientProperty(APP_NG_PROPERTY.WINDOW_BRANDING_ICON_192, imgHref);   

	//Title change
	application.putClientProperty(APP_NG_PROPERTY.WINDOW_BRANDING_TITLE, 'Sileram');

[attachment=0]Naamloos.jpg[/attachment]

Naamloos.jpg

16

For ngDesktop the application just uses the icons supplied by the installer, and for ngWeb I simply replaced the files “favicon.ico”, “favicon32x32.png” and “favicon192x192.png” in the folder “/application_server/server/webapps/ROOT” of my Dev-Environment, that way the files get deployed to the customers installation.

That way I don’t forget to copy the files to the root-directory of the installation of new self-hosting customers.

17

Thank you Patrick!

I changed to use the code you proposed and works fine under the Development environment, but also does not change the standard Servoy favicon on production.

Regards,

18

Hi Juan,

are you sure you use the correct path to the favicon?
Paths may be slightly different in production.

Pls inspect the page and click on the link to the favicon you supplied, this should then show it.
Also the network tab in inspector should show unreachable locations

Hope this helps

19

Hi Marc,

With Patrick´s solution, there is an image in the media folder and no path is included.

With your solution, I use a url from a separate server to get a png

Both solutions run in localhost under development but do not work on production environment.

Regards,