Setting the favicon in the address bar or tab

DocuWil · Post by **DocuWil** » Wed Feb 18, 2009 6:57 am

Does someone know how to set the favicon (favorite icon)?
In other words how can I change:

favicon.png

I want to put our own icon on these places.

Post by **NorthEast** » Wed Feb 18, 2009 7:26 am

There's a few ways to do this.

a) If there is a file named favicon.ico in the root folder of the webserver, the browser will use that.

b) You can specify the favicon to use in the <head> section of your web page.

For example:

Code: Select all

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="http://www.yoursite.com/favicon.ico" type="image/vnd.microsoft.icon" />

For a WebHelp system, you could add this to Default.htm in your output (so you'd need to update this by hand) , and the path to the image might be in the WebHelp itself, e.g.:

Code: Select all

<link rel="shortcut icon" href="Content/Resources/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="Content/Resources/favicon.ico" type="image/vnd.microsoft.icon" />

The image needs to be in icon format (.ico) for it to work in Internet Explorer (I think Firefox will be happy with a ICO, GIF or PNG).

DocuWil · Post by **DocuWil** » Wed Feb 18, 2009 7:49 am

Thanks Dave,
It does work with Firefox, but not with Internet Explorer

Post by **RamonS** » Wed Feb 18, 2009 8:52 am

Often enough the favicon for a site is cached. You should see it after clearing out the browser cache (although considering IE to be a browser is a stretch).

Post by **NorthEast** » Wed Feb 18, 2009 9:14 am

DocuWil wrote:Thanks Dave,
It does work with Firefox, but not with Internet Explorer

Hmmm. It is supposed to work, although I must admit I've only used this before with my website, and not with local files.
Firefox seems to pick up the favicon for local files, but IE doesn't.

Post by **LTinker68** » Wed Feb 18, 2009 12:00 pm

Doesn't the favicon have to always be at the root of the website? Maybe that's just a requirement for IE and FF is smart enough to be able to follow a path into the site. I've also never seen the type="image/vnd.microsoft.icon" code before, but then, it's always picked it up automatically from the root and I've never had to insert a ref link to it. Is that code really required? Is that code compatible with IE6 and IE7?

Post by **RamonS** » Wed Feb 18, 2009 2:04 pm

I also only ever know it to be in the root of the htdocs folder.

Post by **LTinker68** » Wed Feb 18, 2009 2:55 pm

RamonS wrote:I also only ever know it to be in the root of the htdocs folder.

I'm guessing that would be on an Apache server? On IIS it just has to be in the root folder (there is no htdocs folder).

Post by **RamonS** » Wed Feb 18, 2009 2:57 pm

I was talking about web servers.

Post by **LTinker68** » Wed Feb 18, 2009 4:09 pm

Same here.

Post by **RamonS** » Wed Feb 18, 2009 4:53 pm

You mentioned IIS, which is just a the product of ten drunken monkeys with a game console.

DocuWil · Post by **DocuWil** » Wed Feb 18, 2009 11:17 pm

LTinker68 wrote:Doesn't the favicon have to always be at the root of the website?

That is one of the first things I tried, but didn't work.
And ... htdocs, indeed that's Apache server. I also develop websites with Joomla and then I have to put the favicon in the root of the used template. Thinking of that, I have put the favicon (by the way, always 16 x 16) in all directories of the WebHelp. Nothing.
Maybe I have to put it as a feature request, although it is not that important. On the other side, it increases professionality a little bit more.

Post by **NorthEast** » Thu Feb 19, 2009 2:22 am

LTinker68 wrote:Doesn't the favicon have to always be at the root of the website? Maybe that's just a requirement for IE and FF is smart enough to be able to follow a path into the site. I've also never seen the type="image/vnd.microsoft.icon" code before, but then, it's always picked it up automatically from the root and I've never had to insert a ref link to it. Is that code really required? Is that code compatible with IE6 and IE7?

It's a newer 'standards' way to do it.
http://en.wikipedia.org/wiki/Favicon#In ... ardization
http://www.w3.org/2005/10/howto-favicon

I think the main benefits are that the icon can be set for a particular page (not just the whole site), and can be located where you want.

Looks like there might be some issues with IE compatibility though. Generally, IE seems to be a bit more hit and miss with favicons. I've seen it use the wrong favicon (use one from another site), or display the icon in the location bar (to the left of the URL) but not on the tab itself.

Post by **RamonS** » Thu Feb 19, 2009 5:04 am

Thanks for providing the links. The reasoning is quite convincing. So one should not solely rely on the favicon to be in htdocs. I assume that a link specification in the page takes precedence.

DocuWil · Post by **DocuWil** » Thu Feb 19, 2009 6:02 am

RamonS wrote:I assume that a link specification in the page takes precedence.

That's right and what I have discovered earlier.
Anyway, it remains a difficult subject.
I try support. Maybe they have an answer.

Post by **LTinker68** » Thu Feb 19, 2009 9:15 am

Did you also try doing a forced refresh in the browser? Seems like I had to do that to get our favicon to show up. And if you have a link in your browser favorites then you might have to go back to the site again by clicking on the link to get it to update the browser favorites with the icon.

DocuWil · Post by **DocuWil** » Thu Feb 19, 2009 11:59 pm

Oh yes Lisa I did.
I am aware of that. I even not only the F5 but also the CTRL+F5.
BUt, it is one easy to forget.
Thanks

DocuWil · Post by **DocuWil** » Fri Feb 20, 2009 12:04 am

I just got the message from support that they had a look on it and came more or less to the same experiences I had.
So, they added a feature request for a favicon.ico option.

whunter · Post by **whunter** » Mon Apr 04, 2011 9:24 am

Before I enter another enhancement request for this, I thought I'd ask y'all whether it was implemented in Flare 7? I'm still on 6.1.

DocuWil · Post by **DocuWil** » Mon Apr 04, 2011 10:55 pm

Hi,

Unfortunately I didn't discover a change. I could image that it should be possible to set it in the skin.

jcabral · Post by **jcabral** » Wed Jul 17, 2013 7:55 am

When I publish the target, Flare is removing the link to the favicon in my startup topic in the published output. As a result, the favicon doesn't appear in browser tab.

Suggestions!

Post by **RamonS** » Wed Jul 17, 2013 10:21 am

You really should only have to drop it into the content folder so that it gets dragged into the output. Browsers will then pick up that icon automatically. Not sure why you linked it to a topic, but maybe I misunderstand something.

nzinopoulos · Post by **nzinopoulos** » Thu Jul 18, 2013 8:37 am

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 !

techwriter31 · Post by **techwriter31** » Mon Nov 18, 2013 4:55 pm

Thanks nzinopoulos!

I have been storing my favicon.ico file in the root of my website, and it has displayed properly for Chrome and Firefox. Now, I am attempting to force IE to include my favicon and have a few questions:
1) I have the favicon saved within my project (16x16 favion.ico). I also have "Exclude content not linked directly or indirectly from the target". I have to have this checkbox checked for my output, as there are a lot of files that I do not want to include. Is there a way to force the favicon to be included in the published output? (For css files, I typically will add a link to the file in the header of my master page, but this doesn't work for the favicon.)

2) When adding the jQuery code to the skin, can we simply include the following statement? (I include the "Content" folder in my output, so this path is valid for my favicon.)

Code: Select all

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

Or do we need to include both statements?

Code: Select all

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

Any advice is greatly appreciated!

DocuWil · Post by **DocuWil** » Tue Nov 19, 2013 12:40 am

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

MadCap Software Forums

Setting the favicon in the address bar or tab

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

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