Favicon on the fly ?

Targets Web
1

Hi,

I’m about to fill a feature request about this but before I do I would like to be sure it is needed.

I would like to know if someone knows a way to switch the favicon - automatically sent by Xojo - on the fly.

My understanding is that Xojo use the Application icon as the favicon.

But when you are using a standalone webserver in a multi-domain context, all the websites the application run then have the same favicon… which is annoying if not unprofessional if you want to manage several websites/webapps on the same IP address deserved by multiple domain names.

Is there a way to switch this favicon on the fly ?

Cheers,
Guy.

2

Execute the following javascript on your webpage:

var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'http://www.yourserver.com/favicon.ico';
document.getElementsByTagName('head')[0].appendChild(link);

Don’t forget to load your ico file on webfile, so to have an access to file path.

3

Thanks for the tip Antonis. I’m aware of the image/x-icon link though, I should have mentioned it, but I was asking for a built-in way, thinking perhaps there is a Xojo Property or a Method I’m not aware off that allow to do that without resorting to Javascript hack/HTML injection.

4

You can add additional information to the head tag using the Session.PrepareSession event.

5

Thanks for the tip Greg.
What should I do with the HTMLHeader string ? Just add an element ?

HTMLHeader = HTMLHeader +"<link href=""/special/images/myfavicon.ico"" rel=""shortcut icon"" type=""image/x-icon"" />"

Is this the correct way of updating the Header ?

That said, my original request concerned a more ‘native’ way of dealing with favicons. Having the ability of setting ‘Application’ Icons for a Web Applications is of little use. I was thinking about native WebPage Icons instead.

Is this something you have considered already ?

6

You could append if you want. Keep in mind that there might be header info in there already that you’ll want to remove as well.

You could file a feature request, but keep in mind that fav icons are immutable for all intents and purposes, and since the implementation of favicons varies between browsers, it may make more sense for you to do it yourself so you get exactly what you want.

Take iOS for example. Favicons are not displayed, but there’s a whole slew of commands for getting the right home screen and splash screen images for the different devices and screen densities.

We decided to expose the header because it gives you the most flexibility across the most platforms for more than just icons.

7

I see. Thanks Greg.

8

I too have needed multiple favicons for several projects actually.

One where its: http://YourCompanyName.OurCompanyName.com/

And one where depending on the server and sql database the app is connecting to, I change the theme and colors to match the company’s. It’s much easier to have one build of the app to deploy to everyone. (It’s too bad WebStyle’s are currently so limiting that you can’t dynamically create them or change their colors to have different themes for each company or let them customize their own theme. I know I can work around some of this with javascript.)

Maybe a feature request for a GetFavicon event that by default returns the app icon but we can implement it and return whatever we want instead?

9

For me it seems that HTMLHeader in the Session.PrepareSession event hasn’t the final content. How can I remove header info?

I tried : " HTMLHeader = HTMLHeader.Replace(“/framework/favicon.ico”,“/favicon.ico”)" but it doesn’t work because HTMLHeader had no content.

10

You’re just adding to the content. Not replacing. We just have some intelligence built in to take care of common replacements.

11

I’ve tried to add this to a session, yet the result has both “/framework/favicon.ico” and the link I added.
The browser seems to randomly choose one, most often (incorrectly) the App icon.

Is there a way that works?

12

Problem is, it seems the icon is set upon page load, and changing it afterward does not update it. On Chrome, Antonis code does not do either.

I tried to set its URL to “” before hoping it would update like it does in ImageView to no avail.

It does not seem possible on the fly.

I see no way to remove the original framework icon either.

The only possible manipulation I see that would reliably show a different icon, is to display the app within a frame of the same size as the browser window, which would have its own icon and title.

13

Favicons are loaded by the browser before the session starts and cached, so you don’t have a chance to change them. When compiling, we scale down the icon.

14

I have a Handle URL catch for ‘/favicon.ico’ which works fine for the static ‘login’ page, and I can watch the icon flip from custom to App during the page ‘Loading…’ phase.

I have multiple sites that each want their ‘own’ badge. The goal is one compile and push. A separate unique ‘version’ for each site is a hassle.