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
LVL 1
rebiesAsked:
Who is Participating?
 
ZylochConnect With a Mentor Commented:
Interesting. Try preloading all of the favicon images in the head section:

<script language="javascript">
<!--
img1 = new Image();
img2 = new Image();

img1.src="http://www.espn.com/favicon.ico";
img2.src="http://www.yahoo.com/favicon.ico";
// -->
</script>

This might have a pretty good chance of working if you do this:

Have the <td> the image is in have a background of your favicon. Do not set the height and width of the <img> tag within. Then, combine it with the above code, and it might just work :)
0
 
ZylochCommented:
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.
0
 
rebiesAuthor Commented:
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.

0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
rebiesAuthor Commented:
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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.cnn.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.google.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.yahoo.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.cnn.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.priceline.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.ebay.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.foxnews.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.amazon.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.altavista.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.nsi.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.gateway.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;&nbsp; Bottom: <img src="http://www.msnbc.com/favicon.ico" height="16" width="16"></td>
<td style="font-size:11px;" valign="middle">&nbsp;&nbsp;&nbsp; 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
0
 
rebiesAuthor Commented:
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
0
 
ZylochCommented:
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
0
 
seanpowellCommented:
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>
0
 
rebiesAuthor Commented:
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?)
0
 
rebiesAuthor Commented:
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.
0
 
rebiesAuthor Commented:
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
0
 
rebiesAuthor Commented:
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
0
 
ZylochCommented:
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
0
 
rebiesAuthor Commented:
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
0
 
ZylochCommented:
Yep! Works in IE6 and Mozilla Firefox 0.9. All good, nice job :)
0
 
rebiesAuthor Commented:
Sweet, thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.