Setting the favicon in the address bar or tab

[nzinopoulos]

@Wil : I am stuck with IE 9 on my computer for the moment. I will test again when I upgrade. Sorry I cannot help more

@Kellie : Interesting challenge you put here with question 1 ! And I found the answer inside your question
Indeed when the "Exclude content not linked directly or indirectly from the target" option is checked, the favicon file in your project goes out the window and my method fails...
So... I say "let's link indirectly to the favicon", through the css file you mentioned in your post !
Here is how:

1. Open one of the stylesheets that are used by your project and add a "dummy" class to any of the elements listed.
   This "dummy" class, of course, should not be used anywhere in your help pages or UI.
2. With the "dummy" class selected go and see the "cursor" css property (it is listed in the "Extensions" property group).
   The cursor property group allows referencing a custom cursor image that displays when you hover over a chosen element.
3. As the value of the "cursor" css property, type:

   Code: Select all

   url("relative/path/to/your_favicon/favicon.ico")

4. Save, build and publish...
   Your favicon.ico file should find again the way to your output.

Regarding question 2 : For the main statement (append the link to the head element) to work, we must ensure the head element is available when the script runs. This is the case once the page has loaded in the browser. Hence the need to wrap the (head).append statement inside the (document).ready function, the latter being triggered exactly when the page has finished loading. So in short, yes, you need the two statements, not just the (head).append one.

[ruthhoward]

another option for IE 11 is to tell the help to pretend to be an earlier version of IE:

Code: Select all

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Flare 9.1.1 output on FILE:// access on IE11 doesn't work (at all) and I put this in as a workaround while I waited for MadCap to fix the issue with Flare 9.1.2.

[DocuWil]

another option for IE 11 is to tell the help to pretend to be an earlier version of IE:

Thanks, that is a logical answer. However, that was already done by myself and others.
In fact I was just indicating that I tried it in IE11.

[techwriter31]

Yes, thanks Nicholas!

Sorry for the delayed response; I have been swamped and just now returning to this project.

I was able to update my css file to include the favicon link and it is now pulling the favicon up to the server. It is working in Chrome and Firefox. However, the favicon is still not displaying for me in IE 8 or IE 10. I haven't tried IE 9 or IE 11 yet.

[sdcinvan]

That's where mighty jQuery comes to the rescue. A single jQuery statement (OK two actually ) allows us to append the required ref link to the page head section, on the fly, just when the viewers browser displays the page. And the icing on the cake is that you can achieve that just by setting once a parameter in your Flare project. Here's how to do it :

1. Save your favicon (16x16 Microsoft Windows icon format - .ico) wherever you want in the Content folder of your Flare project (I find the Content/Resources/Images folder to be a sensible choice) .
2. Switch to Flare's Project Organizer and open your skin file (by default in Project/Skins).
3. Display the Toolbar pane/tab of the file and click the Edit... button at the bottom of the right-most frame (labelled: Custom JavaScript to include in Toolbar page).
4. In the Toolbar JavaScript dialog box that just opened, paste this tiny jQuery magic spell (remember to replace the href attribute value with your own relative path to favicon.ico):

   Code: Select all

   $(document).ready(function(){
   	$('head').append('<link rel="shortcut icon" href="Content/Resources/Images/favicon.ico" type="image/x-icon" />');
   });

5. Click OK to close the dialog box and save your skin file.
6. Build and Publish your WebHelp target.
7. Sit back and enjoy the view of your favicon while thinking of all the other great things you could achieve coaching your Flare + jQuery dream-team...

I have implemented this trick on my WebHelp2 (HTML5) targets and tested the server-based output on all major browsers (Chrome 28, Firefox 21.0, Opera 12.15, Safari 5.1.7 and IE 9) and my favicons work just fine.

Hoping the above will help you make your favicons less shy.

Oh, and all the credit goes to Dave Lee (see his post here: http://forums.madcapsoftware.com/viewto ... d=a#p90939 ) who gave me the key to Flare's skins backstage. Cheers David !

Thank you very much David. This was very useful. Works well in Flare v10 with HTML5 output.

Now testing with MadBuild.

[techwriter31]

Update: I've noticed that this does work in IE11 for my HTML5 outputs!

[asmith]

Hello,

I have followed nzinopoulos's steps for the favicon, but I can't get past a certain point.

I've implemented the JQuery code in the HTML5 skin, and I've added a dummy class to the main stylesheet. However, whenever I build and publish, the icon doesn't show up. It looks like it wants to, but something is amiss. It looks blank in Firefox and like a blank piece of paper in Chrome.

In the Images folder in my project, the favicon.ico displays as a blank piece of paper as well (same as Chrome), but it shows up okay in the Mac Finder. Not sure if this is normal or not.

Chrome.png

Firefox.png

Would anyone be able to point me in the right direction of something to check for?

[sdcinvan]

In the Images folder in my project, the favicon.ico displays as a blank piece of paper as well (same as Chrome), but it shows up okay in the Mac Finder. Not sure if this is normal or not.

That's not right.

BTW, A favicon can be in the following formats: ICO, PNG, GIF, aniGIF, JPG, APNG, or SVG (compatibility varies with different browsers)

Due to browser caching, there should be many examples of favicon.ico images on your computer. Have a look at other examples? Can you see them. Try one in place of yours. Does that favicon appear properly? That would be the first step in eliminating potential reasons for failure.

[RamonS]

Browsers do cache favicons, so you might also want to clear the browser caches and see if that does anything.

[asmith]

That's not right.

BTW, A favicon can be in the following formats: ICO, PNG, GIF, aniGIF, JPG, APNG, or SVG (compatibility varies with different browsers)

Due to browser caching, there should be many examples of favicon.ico images on your computer. Have a look at other examples? Can you see them. Try one in place of yours. Does that favicon appear properly? That would be the first step in eliminating potential reasons for failure.

Thanks for responding! I tried a png format, and it displays correctly in Flare v10 (instead of the blank page icon), but it still doesn't work in the browsers after I build and publish. Here is what I have:

• * The favicon image is stored in the Content/Resources/Images folder as favicon.png. It displays properly.

• * In the HTML5 skin > Toolbar > Custom JavaScript box, I have: $(document).ready(function(){
  $('head').append('<link rel="icon" href="Content/Resources/Images/favicon.png" type="image/png" />');
  });

• * In the main stylesheet, I added a "dummy" class to the p style called "favicon." Under Extensions > cursor, I added: url("Content/Resources/Images/favicon.png")

Whenever I build the project, the stylesheet throws a missing linked source warning:
Missing linked source file: \\psf\Home\Documents\My Projects\OnlineHelp\Content\Resources\Stylesheets\Content\Resources\Images\favicon.png

Whenever I view the help in the browsers, the icon still does not appear, even after clearing the history and cache and restarting the browser.

[RamonS]

Whenever I build the project, the stylesheet throws a missing linked source warning:
Missing linked source file: \\psf\Home\Documents\My Projects\OnlineHelp\Content\Resources\Stylesheets\Content\Resources\Images\favicon.png

I'd check if in the project as well as the output that the file is located where the CSS thinks it is, it might not be in the right place or the link in the stylesheet points to the wrong spot.

[nzinopoulos]

Hi Allison,

I can see a problem in the way you specify the 'cursor' property value in your main stylesheet:
the path to your favicon should be a relative path, as it is referenced from within your stylesheet.

From your error message:

Missing linked source file: \\psf\Home\Documents\My Projects\OnlineHelp\Content\Resources\Stylesheets\Content\Resources\Images\favicon.png

you can see that the absolute path you have specified (Content/Resources/Images/favicon.png) gets appended to your stylesheet path ( /Content/Resources/Stylesheets/).

If you have kept the default Flare setup of the Resources folder (i.e. Images folder at the same level as Stylesheets folder inside Resources folder), you should specify the favicon path for the cursor property like so:

Code: Select all

url("../Images/favicon.png")

where the '../' part will take you up one folder from the Stylesheets folder into the parent Resources folder, before going back down in your Images folder.

Hoping the above will help you get it right.

[nzinopoulos]

Thank you Nicolas,

I did exactly what you wrote.
It works with Chrome and Firefox. That is great already.
But it does not work with IE11 .

Wil

Hello Wil,

I don't know if you eventually managed to get it working in IE11, but I just wanted to let you know that I am now using IE11 and my favicons display just fine !
This seems to be the case also for Kellie:

Update: I've noticed that this does work in IE11 for my HTML5 outputs!

Best regards,

[DocuWil]

Well at my place IE11 is not working with favicon.
I tried it in the 32-bit as well as the 64-bit version.

[nzinopoulos]

Well at my place IE11 is not working with favicon.
I tried it in the 32-bit as well as the 64-bit version.

Sorry to hear that Wil
I am guessing you are viewing your HTML5 output locally and not via a web-server. Is that right ?

Indeed, I also get the default IE icon instead of my custom favicon, when using file:/// instead of the http:// protocol
I will have to dig it a little deeper... I will keep you posted if I find anything new.

Regards,

[asmith]

Nicolas,

Thank you! That saved the day. I corrected the relative path and now the original .ico loads perfectly and works like a charm. Thanks again! I really appreciate it.

[DocuWil]

Hi Nicholas,

Your guess is right.
I hope you find a solution for this phenomenon.
In fact it is not a very important item, but it is the finishing touch of professionalism.

Have a nice weekend

[nzinopoulos]

@Wil : I am affraid I have bad news...
All the information I could find on Internet seems to confirm that IE does not display custom favicons for local web-pages.
Apparently the issue would be due to IE not caching local web-pages and their resources.
A possible solution could be embedding the icon using a Base64-encoded data url (see here: http://dataurl.net/#about),
but this solution was reported not to function with IE 10 (http://stackoverflow.com/questions/1122 ... safari-why).

Will try to find time to dig further in that direction.

Have a nice weekend as well !

[nzinopoulos]

@Wil : I am affraid I have bad news...
All the information I could find on Internet seems to confirm that IE does not display custom favicons for local web-pages.
Apparently the issue would be due to IE not caching local web-pages and their resources.
A possible solution could be embedding the icon using a Base64-encoded data url (see here: http://dataurl.net/#about),
but this solution was reported not to function with IE 10 (http://stackoverflow.com/questions/1122 ... safari-why).

Will try to find time to dig further in that direction.

Well, no luck
Using the Base64-encoded data url for the favicon worked only with Chrome (33.0.1750.154 m), Firefox (27.0.1) and Opera (12.16).
IE 11 and Safari (5.1.7) show their default icon instead (fol local browsing - file:/// protocol).

[ruthhoward]

I've done this in a different way but using information posted above.

1) In order to force my favicon image file to be compiled I added this to my CSS:

Code: Select all

span.dummy
{
	cursor: url(../Images/favicon.png);
}

2) then our automated build system has a post-processing script implemented (mostly to run our internal spell checker and report on some file status embedded in comments in the HTML), so I added a Perl function to find the closing </style> in the header of the top-level output topic and append this to it:

Code: Select all

<link rel="shortcut icon" href="Content/Resources/Images/favicon.png" type="image/x-icon" />

so far so good, building fine with the post-compilation adjustment and working in FF 24.4 ESR, Opera 20 and Chrome 34 so far, not IE10 or Safari though. Delivering on File:// rather than HTTP.

anyone got any ideas for IE and Safari?

[We've also use this post-processing adjustment technique to alter the default width of the search filters dropdown and button, so long as you know the name of the style you want to override and you can make sure that its definition is added after the CSS links in the head all is good]

[kkelleher]

Hey folks,

I'd like to use a favicon from our corporate web page and got that working in a simple HTML file:

Code: Select all

<html>
  <head> 
   <link rel="short icon" href="http://jaspersoft.com/favicon.ico" />
  </head>
</html>

That works in my browser, no problem.

But when I add that same link to the <head> section on my MasterPage, the resulting HTML5 output doesn't use my icon -- it uses the "default" (blank piece of paper) instead.

System details:

• * I'm just viewing the target output; it's not deployed to a web server
  * The Browser is Google Chrome 35.0.1916.114 m

Any ideas about what I'm missing?

Thanks,

Kristen

[sdcinvan]

Hello Kristen,

Look back to page 2, of this thread, for my post, "by sdcinvan on Mon Mar 10, 2014 2:00 pm" where I quote nzinopoulos.

There, you will find complete instructions on how to get the favicon to work with Flare web output.

[kkelleher]

Thanks, sdcinvan. I read through that, but hoped to avoid adding more complexity to my projects at this point (we go into production over the weekend). What can I say, I'm an optimist.

Time permitting, I'll take a look at this today and see if we can shoe-horn it in.

Thanks,

Kristen

[kkelleher]

That's working for me in most browsers (*shakes fist at IE11*). Thanks again, Shawn and Nicolas for your help! I'll report back about any changes in behavior once we go into production.

-Kristen

[sdcinvan]

Thanks, sdcinvan. I read through that, but hoped to avoid adding more complexity to my projects at this point (we go into production over the weekend). What can I say, I'm an optimist.

Time permitting, I'll take a look at this today and see if we can shoe-horn it in.

Thanks,

Kristen

I totally understand and respect your caution. If it helps, it really is rather painless (also a set and forget sort of change) and the script is well tested to be reliable.