Favicon in Browser Tab

Forum to discuss the new web client version of Servoy.

Favicon in Browser Tab

Postby mj.vanzelst » Fri Jun 03, 2016 12:21 pm

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.
mj.vanzelst
 
Posts: 13
Joined: Mon Feb 02, 2015 5:47 pm

Re: Favicon in Browser Tab

Postby patrick » Fri Jun 03, 2016 12:29 pm

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.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Favicon in Browser Tab

Postby patrick » Fri Jun 03, 2016 12:33 pm

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.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Favicon in Browser Tab

Postby jcompagner » Wed Sep 14, 2016 9:46 am

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
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8829
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: Favicon in Browser Tab

Postby rieder » Thu Jan 05, 2017 12:26 pm

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
Birgit Rieder
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
rieder
 
Posts: 177
Joined: Thu Jan 26, 2012 5:18 pm

Re: Favicon in Browser Tab

Postby jcompagner » Thu Jan 05, 2017 3:11 pm

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:

<link rel="icon" href="favicon32x32.png" sizes="32x32" />
<link rel="icon" href="favicon192x192.png" sizes="192x192" />

(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
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8829
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: Favicon in Browser Tab

Postby rieder » Sat Jan 14, 2017 11:34 am

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
Birgit Rieder
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
rieder
 
Posts: 177
Joined: Thu Jan 26, 2012 5:18 pm

Re: Favicon in Browser Tab

Postby jcompagner » Mon Jan 16, 2017 4:50 pm

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.
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8829
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: Favicon in Browser Tab

Postby rieder » Mon Jan 16, 2017 6:07 pm

Aha, so thank you for explaining it.

Kind regards
Birgit Rieder
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
rieder
 
Posts: 177
Joined: Thu Jan 26, 2012 5:18 pm

Re: Favicon in Browser Tab

Postby ProRM » Mon Sep 26, 2022 8:44 pm

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,
User avatar
ProRM
 
Posts: 107
Joined: Thu Sep 18, 2008 10:24 pm
Location: Uruguay

Re: Favicon in Browser Tab

Postby jcompagner » Wed Nov 09, 2022 4:54 pm

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

<link rel="icon" href="SolutionAfavicon32x32.png" sizes="32x32" />
<link rel="icon" href="SolutionAfavicon192x192.png" sizes="192x192" />

and you place that icon in the root of your web app (described here: https://wiki.servoy.com/display/DOCS/Favicon+support)
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8829
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: Favicon in Browser Tab

Postby mboegem » Thu Nov 10, 2022 12:16 am

Hi Juan,

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

Code: Select all
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.
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Favicon in Browser Tab

Postby ProRM » Thu Nov 10, 2022 3:37 pm

Great!

Thank you Marc and Johan
User avatar
ProRM
 
Posts: 107
Joined: Thu Sep 18, 2008 10:24 pm
Location: Uruguay

Re: Favicon in Browser Tab

Postby ProRM » Tue Nov 15, 2022 7:44 pm

Hi Marc,

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

Regards,
User avatar
ProRM
 
Posts: 107
Joined: Thu Sep 18, 2008 10:24 pm
Location: Uruguay

Re: Favicon in Browser Tab

Postby patrick1645350822 » Tue Nov 15, 2022 9:04 pm

Hi guys,

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


Code: Select all
   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');


Naamloos.jpg
You do not have the required permissions to view the files attached to this post.
Greetings,

Patrick Marelis
Sileram BV
https://sileram.nl
patrick1645350822
 
Posts: 37
Joined: Sun Feb 20, 2022 11:53 am

Next

Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 5 guests