Setting the favicon in the address bar or tab

kkelleher · Post by **kkelleher** » Thu Jun 26, 2014 11:37 am

Everything seems to be working in production; the one behavior change since we went into production is that in IE11, the default favicon appears for a split second before being replaced by our favicon. It's a little weird, but still an improvement over the behavior before the help system was loaded into our web server (Apache).

Thanks again for your help,

Kristen

nielsf · Post by **nielsf** » Fri Mar 20, 2015 2:40 am

The following method is much simpler, does not involve a script, and works in all browsers I've tested.
Just open all your html5 masterpages (.flmsp) in a text editor, and add the following line:

Code: Select all

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

(of course if you're using .ico, change the filename and the image type (to 'image/x-icon')
Save, and generate your output.
File is included in output, and displayed in the browser (at least after you do a Ctrl+F5 to refresh the browser cache).

HTH some.
-Niels

sdcinvan · Post by **sdcinvan** » Fri Mar 20, 2015 11:07 am

nielsf wrote:The following method is much simpler, does not involve a script, and works in all browsers I've tested.
Just open all your html5 masterpages (.flmsp) in a text editor, and add the following line:
Code: Select all
<link rel="shortcut icon" href="../Images/favicon.png" type="image/png" />
(of course if you're using .ico, change the filename and the image type (to 'image/x-icon')
Save, and generate your output.
File is included in output, and displayed in the browser (at least after you do a Ctrl+F5 to refresh the browser cache).

HTH some.
-Niels

Thank you for this. It looks interesting. I'll have to test this.

DocuWil · Post by **DocuWil** » Mon Mar 30, 2015 4:58 am

Well Niels, I tried and it works but again not with IE11.

In one of the previous posts I described the image type vnd.microsoft.icon like below, which you can find in http://www.droomsloep.nl (a site from my son).
Some of our friends that it was not a common one, but this is the link which is made in there and it works everwhere, also in IE11! (I show it together with the starting piece of the site):

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- JSN_Epic_PRO 4.2.5 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-nl" lang="nl-nl" dir="ltr">
<head>
  <base href="http://www.droomsloep.nl/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>Droomsloep</title>
  <link href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/templates/jsn_epic_pro/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

To me it looks crazy that Flare cannot make something of that. Or am I wrong?

dcole · Post by **dcole** » Tue Apr 21, 2015 12:56 pm

I am having an issue with getting the favicon to display in my browser tab.

I have added the following code to my Default.htm file between the <head> tags:

Code: Select all

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

The favicon is in the Content folder but it still doesn't display when I access the web page. I have tried clearing the browser cache for both Google Chrome and IE and have not had any success with either. Does anyone have any other suggestions on how I can get the favicon to display in the browser tab?

kwag_myers · Post by **kwag_myers** » Wed Apr 22, 2015 5:56 am

Have you tried using the Images folder as recommended? Personally, I gave up on this two years ago and have been using this method: "Add Favicon" Script For WebHelp.

MPighi · Post by **MPighi** » Fri Feb 05, 2016 1:15 am

Hi everyone!

I've found this Treehouse blog post extremely helpful:
http://blog.teamtreehouse.com/how-to-make-a-favicon

Note that I've not tested this method on a Flare project yet. On my personal web-design works it obviously works.

Cheers
Michele

Dee Vincent-Day · Post by **Dee Vincent-Day** » Mon Feb 08, 2016 8:52 am

I could really could do with the addition of a Favicon being built into Flare, preferably into the skin. We have source control and are moving towards auto publishing without Authors having to intervene. So , in this new world we won't get the opportunity to add a Favicon to the build.

techwriter31 · Post by **techwriter31** » Mon Feb 08, 2016 10:47 am

Dee Vincent-Day wrote:I could really could do with the addition of a Favicon being built into Flare, preferably into the skin. We have source control and are moving towards auto publishing without Authors having to intervene. So , in this new world we won't get the opportunity to add a Favicon to the build.

We automatically build/publish our Flare outputs using TeamCity. I took the advice of nzinopoulos in an earlier post to this thread, and added a reference to the .ico file in our stylesheet. We use global project linking and use the same .css and .ico file in all projects.

In our global.css file, I added the following:

Code: Select all

p.Favicon_DoNotUse	/*This style is used to force the  favicon file to be included in HTML5 outputs, but is set to disabled so it is not displayed in the list of styles in the UI.*/
{
	mc-disabled: true;
	cursor: url('../../Global_Images/favicon.ico');
}

Then I include a link to the favicon in our master pages:

Code: Select all

<link rel="shortcut icon" href="../../Global_Images/favicon.ico" type="image/x-icon" />

This works for both our public and internal websites in Chrome, IE, Firefox, etc., but I'm sure there might be more a elegant solution.

Dee Vincent-Day · Post by **Dee Vincent-Day** » Tue Feb 09, 2016 8:34 am

techwriter31 wrote:We automatically build/publish our Flare outputs using TeamCity. I took the advice of nzinopoulos in an earlier post to this thread, and added a reference to the .ico file in our stylesheet. We use global project linking and use the same .css and .ico file in all projects.

In our global.css file, I added the following:
Then I include a link to the favicon in our master pages:
This works for both our public and internal websites in Chrome, IE, Firefox, etc., but I'm sure there might be more a elegant solution.

That looks really good. The problem is, I have several different targets each with their own company logos published to a multi-tenanted saas system. The content shares the same Master Page and Style Sheet but has unique skins. I perform a lot of builds from the same source which would all need their own Favicon.ico file. This is why I would like an option to add a Favicon to the skin, I have the company logos for each customer, it would be nice to be able to add the Favicon on the same tab of the Skin Editor.

devjoe · Post by **devjoe** » Wed Feb 10, 2016 7:13 am

You might try defining the path in the Master Page's link to the favicon as a variable. Then you can declare a different value for the variable in each target, pointing to all the individual target versions of the favicon.

Chris B · Post by **Chris B** » Mon Feb 15, 2016 10:41 am

Worked great! Props for figuring this out.

nzinopoulos wrote:Adding the favicon file to the Content folder of your Flare project will indeed push the icon file to your published output but it will not display by default on your browser without a reference to its actual location via a link in your page head section.
The default browser behavior (i.e. no need for ref link) occurs on the conditions that :

your favicon file is named favicon.ico,

favicon.ico is located in the root folder of your WebHelp site.
With default settings the Content folder is not the root of the site, only the root of the topics content.
Flare does not give authors any direct access or control over the contents of the root folder that it publishes on your server. So unless you can place your favicon.ico file in your WebHelp's root folder manually after you have published your Flare output on the server, you are out of luck. Furthermore, you would probably have to do the same manipulation every time you publish the output. Not exactly a long-term solution to be proud of.
On the other hand, you can place your favicon.ico file wherever you like under the root folder, provided you specify its location to the browser via a ref link in the head section of your Default.htm page (this is the "only" page that the browser sees from your WebHelp site - all topic content is embedded in a frame of Default.htm).
Unfortunately once again, Flare does not give authors prior access and control over the head section of Default.htm until the output has been built and published on the server.
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 :
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) .

Switch to Flare's Project Organizer and open your skin file (by default in Project/Skins).

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).
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" />');
});
Click OK to close the dialog box and save your skin file.

Build and Publish your WebHelp target.

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 !

dfb · Post by **dfb** » Thu Mar 17, 2016 1:49 pm

Chris B, I'd love to attempt the solution in your last post but I'm getting hung up on step #3.

Your post says, "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)."

Apologies that I'm a bit of a noob and this is my first web project with Flare but I'm not finding the "Toolbar pane". Could someone hold my hand a little here and post a screenshot with something highlighted for roughly where I'm clicking to get to this pane/tab?

HUGE thanks!
David

Chris B · Post by **Chris B** » Sun Mar 20, 2016 8:43 pm

I'm not in front of flare at the moment but I believe that the top nav does not support that kind of global toolbar, which is no doubt why you are having difficulty finding it.

I'll have to verify this, but I guess you'll have to insert the JavaScript into the master page, hopefully that will work.

Post by **NorthEast** » Mon Mar 21, 2016 1:21 am

If you're using top nav, then simply just put the link tag in your master page.

You don't need any javascript for top nav - the script is just required for the tripane skin output, because you can't just add the link tag to the Default.htm file yourself.

dfb · Post by **dfb** » Mon Mar 21, 2016 8:46 am

Excellent. Thanks David and Chris!
At least I know to stop looking for something that isn't there.

I'll have a chance to work on modding the masterpage this afternoon or tomorrow. I might poke y'all again if I get stuck but this seems fairly straight forward now.

HUGE thanks!
David
SmartRG, Inc.

Dee Vincent-Day · Post by **Dee Vincent-Day** » Mon May 23, 2016 3:52 am

I have just tried this in Flare 12 and it does not appear to work. Am I doing the right thing?

Favicons 1.jpg

I added the favicon as shown above.

Then I went to the skin>toolbars>Edit

Favicons 2.jpg

I pasted the jquery and amended the path to reflect the location of the image. Saved this and built the project.

No favicon. What am I doing wrong?

Chris B · Post by **Chris B** » Mon May 23, 2016 4:24 pm

@Dee

Edit your master page with the internal text editor and add a link within the head tags as such:

<head><title></title>
<link href="../Stylesheets/basicstyles.css" rel="stylesheet" />
<link rel="icon" href="http://help.yourdomain.com/manuals/docs/Favicon.png" type="image/png" />
</head>

If I remember right, keeping the name Favicon.png will make your life easier.

Also you may have to manually upload the favicon since in this case the favicon is outside the flare project.

Dee Vincent-Day · Post by **Dee Vincent-Day** » Tue May 24, 2016 2:33 am

Chris B wrote:@Dee

Edit your master page with the internal text editor and add a link within the head tags as such:

<head><title></title>
<link href="../Stylesheets/basicstyles.css" rel="stylesheet" />
<link rel="icon" href="http://help.yourdomain.com/manuals/docs/Favicon.png" type="image/png" />
</head>

If I remember right, keeping the name Favicon.png will make your life easier.

Also you may have to manually upload the favicon since in this case the favicon is outside the flare project.

I have deleted everything and set it up from scratch again and it is now working. Looks like there was a hidden gremlin somewhere.

@Chris B

Thanks for your response.

We have a white label product that is branded and styled for each of our customers. I produce help with styling and branding to match, we have one master page and the branding and styling is included via the skin and css style sheet.

The favicons are in a folders within the resources/images area of the project content and the jquery is in the skin.

I could not go down the manual path because we publish direct to a git repository, I am not able to edit this manually due to security. Therefor favicon has to be included during the build.

I was not keen on the master page method because it would mean me adding new sets of master pages for each customer version I deal with, this is in addition to all the skins and adds a layer of management to the project that I did not want. It is not really worth it when the only physical difference is the favicon, all other differences are in the skin and the style sheets. It also means that if we did want to change the Master Page layout I would need to do all of them rather than just one, which opens up windows of opportunity for error.

This Jquery adds the head information during the build and allows me to include the favicon via the skin, which to me is the logical place to do it. This is where our customer's other assets are included in the project so it makes sense for the Favicon the be included here also.

thank you for your thoughts and keep them coming!

Dee

barbs · Post by **barbs** » Fri Sep 23, 2016 8:37 am

I've implemented the fix noted below and it doesn't seem to be working with either Microsoft Edge or IE 11. Works great on Firefox and Chrome. Does anyone know how to get this working on Microsoft Edge and IE 11?

This is the jQuery I copied into the skin JavaScript dialog box. Does it make any difference that I am using a .gif file for my favicon?

Code: Select all

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

Thanks!

Barb

nzinopoulos wrote:Adding the favicon file to the Content folder of your Flare project will indeed push the icon file to your published output but it will not display by default on your browser without a reference to its actual location via a link in your page head section.
The default browser behavior (i.e. no need for ref link) occurs on the conditions that :

your favicon file is named favicon.ico,

favicon.ico is located in the root folder of your WebHelp site.
With default settings the Content folder is not the root of the site, only the root of the topics content.
Flare does not give authors any direct access or control over the contents of the root folder that it publishes on your server. So unless you can place your favicon.ico file in your WebHelp's root folder manually after you have published your Flare output on the server, you are out of luck. Furthermore, you would probably have to do the same manipulation every time you publish the output. Not exactly a long-term solution to be proud of.
On the other hand, you can place your favicon.ico file wherever you like under the root folder, provided you specify its location to the browser via a ref link in the head section of your Default.htm page (this is the "only" page that the browser sees from your WebHelp site - all topic content is embedded in a frame of Default.htm).
Unfortunately once again, Flare does not give authors prior access and control over the head section of Default.htm until the output has been built and published on the server.
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 :
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) .

Switch to Flare's Project Organizer and open your skin file (by default in Project/Skins).

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).
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" />');
});
Click OK to close the dialog box and save your skin file.

Build and Publish your WebHelp target.

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 !

barbs · Post by **barbs** » Mon Oct 24, 2016 1:27 pm

Just thought I'd follow up with what ended up working for us. As noted, the JavaScript below, was not working for Microsoft Edge or IE 11.

barbs wrote:I've implemented the fix noted below and it doesn't seem to be working with either Microsoft Edge or IE 11. Works great on Firefox and Chrome. Does anyone know how to get this working on Microsoft Edge and IE 11?

This is the jQuery I copied into the skin JavaScript dialog box. Does it make any difference that I am using a .gif file for my favicon?
Code: Select all
$(document).ready(function(){
   $('head').append('<link rel="shortcut icon" href="Content/Resources/Images/BT_Favicon.gif" type="image/x-icon" />');
});

Our Web guy was able to get this working for us. First, he had me try the previous script, but point it to the favicon that already existed on our company website (from which the Web help would be opened), but that didn't fix it either.
Update the JavaScript to the following is what finally got it working. If you're struggling with getting this working on Microsoft Edge or IE 11, you might try something like this.

Code: Select all

$(document).ready(function(){
   $('head').append('<link rel="icon" href="" type="image/gif" />');
   $("link[rel='icon']").attr("href","http://www.[ourwebsite].com/media/101717/bt_favicon.gif");
});

MadCap Software Forums

Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab

Re: Setting the favicon in the address bar or tab