asked on

Get only one favicon.ico to display

Hi all. I'm trying to get the favicon.ico listed for the sites that are in my search results. However, many sites don't use a favicon.ico and I would like to have a default for those sites that don't use a favicon.ico.

I tried the following:

<table><tr><td background="http://www.mysite/our-generic-favicon.ico"><img src="http://www.site.com/favicon.ico" height="16" width="16"></td></table>

But since most favicon's have transparency enabled, you wind up seeing our generic favicon many times even when the other site has a favicon too.

Can anyone thing of an elegant way around this. Ideally I don't want my server to have to go out and check if that site has a favicon listed. I'm guessing there should be some HTML trick to doing this or possibly less elegantly some DHTML, but I don't really know.

Thanks for the time.

Andrew

Zyloch

You can to make your favicon transparent and put it over theirs. I'm not sure if this will help the noimage thing, but you can try.

rebies

ASKER

Zyloch,

Yes I tried that. If my favicon is transparent than theirs shows up behind it. If my favicon is completely transparent then everything displays correctly, but if those sites that don't have a favicon.ico look a bit out of place. So I'm trying to hopefully use a generic favicon for those sites.

rebies

ASKER

You can sort of see my problem by looking at this HTML in any browser:

<table cellpadding="0" cellspacing="0"><tr><td background="http://www.cnn.com/favicon.ico" valign="middle"><img src="http://www.google.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.cnn.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.google.com/favicon.ico" height="16" width="16"></td></tr></table>
<br>
<table cellpadding="0" cellspacing="0"><tr><td background="http://www.google.com/favicon.ico" valign="middle"><img src="http://www.cnn.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.google.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.cnn.com/favicon.ico" height="16" width="16"></td></tr></table>
<br>
<table cellpadding="0" cellspacing="0"><tr><td background="http://www.yahoo.com/favicon.ico" valign="middle"><img src="http://www.cnn.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.yahoo.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.cnn.com/favicon.ico" height="16" width="16"></td></tr></table>
<br>
<table cellpadding="0" cellspacing="0"><tr><td background="http://www.cnn.com/favicon.ico" valign="middle"><img src="http://www.yahoo.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.cnn.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.yahoo.com/favicon.ico" height="16" width="16"></td></tr></table>
<br>
<table cellpadding="0" cellspacing="0"><tr><td background="http://www.priceline.com/favicon.ico" valign="middle"><img src="http://www.espn.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.priceline.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.espn.com/favicon.ico" height="16" width="16"></td></tr></table>
<br>
<table cellpadding="0" cellspacing="0"><tr><td background="http://www.ebay.com/favicon.ico" valign="middle"><img src="http://www.foxnews.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.ebay.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.foxnews.com/favicon.ico" height="16" width="16"></td></tr></table>
<br>
<table cellpadding="0" cellspacing="0"><tr><td background="http://www.foxnews.com/favicon.ico" valign="middle"><img src="http://www.ebay.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.foxnews.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.ebay.com/favicon.ico" height="16" width="16"></td></tr></table>
<br>
<table cellpadding="0" cellspacing="0"><tr><td background="http://www.amazon.com/favicon.ico" valign="middle"><img src="http://www.crutchfield.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.amazon.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.crutchfield.com/favicon.ico" height="16" width="16"></td></tr></table>
<br>
<table cellpadding="0" cellspacing="0"><tr><td background="http://www.altavista.com/favicon.ico" valign="middle"><img src="http://www.alexa.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.altavista.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.alexa.com/favicon.ico" height="16" width="16"></td></tr></table>
<br>
<table cellpadding="0" cellspacing="0"><tr><td background="http://www.nsi.com/favicon.ico" valign="middle"><img src="http://www.abc.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.nsi.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.abc.com/favicon.ico" height="16" width="16"></td></tr></table>
<br>
<table cellpadding="0" cellspacing="0"><tr><td background="http://www.gateway.com/favicon.ico" valign="middle"><img src="http://www.php.net/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.gateway.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.php.net/favicon.ico" height="16" width="16"></td></tr></table>
<br>
<table cellpadding="0" cellspacing="0"><tr><td background="http://www.msnbc.com/favicon.ico" valign="middle"><img src="http://www.cbs.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Bottom: <img src="http://www.msnbc.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">    Top: <img src="http://www.cbs.com/favicon.ico" height="16" width="16"></td></tr></table>
<br>

Unless the top favicon.ico uses all 16x16 of the pixels, the two get merged into one odd looking icon.

Andrew

rebies

ASKER

I'm thinking is there an easy way to say: If image 'x' is there show it, if image 'x' does not show up, show image 'Y' instead within HTML? If this were to be the solution I don't think it can be done in just HTML. Probably would require JavaScript, but I don't know.

Andrew

Zyloch

Hi

Sorry for the late reply, my email is broken for some reason so I'm just randomly surfing :)

Up to my knowledge, it can't be done. It's possible to use filters to make a image more transparent, but not less transparent. The best way would be to have your server check to see if the icon exists. Perhaps, you can do it yourself and only run the script to check perhaps once a month?

Regards

seanpowell

Well, you could just give the top icon a white border, so the img below deosn't bleed through... or something to that effect.

<style type="text/css">

.test
{
      margin-bottom:20px;
}

.test td
{
      font-size:11px;
      vertical-align:top;
}

.topimg img
{

      border:4px solid white;
}

.test td img
{
      width:16px;
      height:16px;
}

td.td1
{
      padding-left:10px;
}

</style>

<table cellpadding="0" cellspacing="0" class="test">
      <tr>
            <td style="background: url(http://www.cnn.com/favicon.ico) no-repeat;"><div class="topimg"><img src="http://www.google.com/favicon.ico"></div></td>
            <td class="td1">Bottom: <img src="http://www.cnn.com/favicon.ico"></td>
            <td class="td1">Top: <img src="http://www.google.com/favicon.ico"></td>
      </tr>
</table>

rebies

ASKER

seanpowell:

That was a problem in the example I showed, but not when the table does not have any other data (text, images, etc)

Still does not solve the problem. I have thought of the following:

<div style="position:absolute;"><img src="http://www.priceline.com/favicon.ico" height="16" width="16"></div>
<div style="position:absolute;"><img src="http://www.espn.com/favicon.ico" height="16" width="16"></div>

But the second icon is always displayed on top, even if its broken or not there. (Maybe This Gives One Of You an Idea?)

rebies

ASKER

Another idea I had was to...

<img src="http://www.priceline.com/favicon.ico" height="16" width="16" OnLoad="img1=new Image(); img1.src='http://www.espn.com/favicon.ico'; if(img1.complete) { this.src=img1.src; }" border="0">

But that does not solve the problem either because by the time the javascript is read the image is never already loaded.

So then I tried...

<body OnLoad="if(img1.complete) { favicon1.src=img1.src; }">
<img src="http://www.priceline.com/favicon.ico" id="favicon1" height="16" width="16" OnLoad="img1=new Image(); img1.src='http://www.espn.com/favicon.ico';" border="0">
<br><br>
<a href="" OnClick="JavaScript: if(img1.complete) { favicon1.src=img1.src; } return false;">Click Me After Page Is Loaded</a>

But many times by the time the page has loaded and the body OnLoad runs, the img1.src still has not downloaded. To test if this works I included the link to click too which it does.

By the way, I consider doing something like above to be not an elegant solution because it requires JavaScript and altering the BODY tag. But maybe someone will get an idea from this too.

ASKER CERTIFIED SOLUTION

Zyloch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rebies

ASKER

The solution is much simpler than any of us thought! All we need is:

onerror="this.src=/images/default-favicon.ico';"

In the image tag itself. No background image in a TD, no JavaScripting to mess with. Here is an example below where I obviously misspeleled "Google" in the original image:

<img src="http://www.NotGoogleRealURL.com/images/logo.gif" width=276 height=110 alt="Google" OnError="this.src='http://www.google.com/froogle/images/froogle_110tall.gif';">

I can see this as being very useful to know in the future for many other things. Can't think of an instance off hand, but I'm a sucker for tricks like this!

Andrew

rebies

ASKER

Zyloch:

By the way, I did first try what you suggested and that code wound up with the same problems. It would still show the background image (my default image) behind the real favicon.ico if there was one. If there wasn't I would see a grey border around the background image.

By the way, how am I supposed to accept an answer on this question? I posted what I believe is the correct answer (after hours of looking for it), but I'm still willing to give you (Zyloch) the credit as you helped me work through the problem. Is that how I do it? Just accept any ol' answer that you submitted?

Andrew

Zyloch

If you want, you can post a request in Community Service to refund you points.
If you feel that I actually really helped you, accepting any old answer is the general idea, heh

rebies

ASKER

hey, tell you what... if you can simply test that code in your browser and tell me that it works or does not work for you and what browser version then that'll be good engouh! I agree that without your help I would not have gotten to the answer the way that I did.

Thanks

Zyloch

Yep! Works in IE6 and Mozilla Firefox 0.9. All good, nice job :)

rebies

ASKER

Sweet, thanks.