Solved

Get only one favicon.ico to display

Posted on 2004-08-05
15
1,019 Views
Last Modified: 2009-07-29
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
0
Comment
Question by:rebies
  • 9
  • 5
15 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 11727115
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
 
LVL 1

Author Comment

by:rebies
ID: 11727387
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
 
LVL 1

Author Comment

by:rebies
ID: 11727399
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
 
LVL 1

Author Comment

by:rebies
ID: 11727485
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11727986
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11728125
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
 
LVL 1

Author Comment

by:rebies
ID: 11729090
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 1

Author Comment

by:rebies
ID: 11729128
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
 
LVL 36

Accepted Solution

by:
Zyloch earned 500 total points
ID: 11729202
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
 
LVL 1

Author Comment

by:rebies
ID: 11730831
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
 
LVL 1

Author Comment

by:rebies
ID: 11730883
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11731852
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
 
LVL 1

Author Comment

by:rebies
ID: 11731869
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11731917
Yep! Works in IE6 and Mozilla Firefox 0.9. All good, nice job :)
0
 
LVL 1

Author Comment

by:rebies
ID: 11731919
Sweet, thanks.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now