Ask the CSS Guy

Very very useful!

thanks!

I tried this but I didn't get any change. I have been manually styling external links with a generic image, but I couldn't get the favicons to work when trying this out. I just put the "Faviconize Everything" javascript in my header, then put the css in my external stylesheet, but got nothing. I assume it's the javascript that's not working for me, because the CSS doesn't add the favicon. It makes no sense that the javascript wouldn't work even though it was directly in the page header.

I still have the code on my site if anyone knows what's wrong. I shoved the javascript in my theme's head page.

Forgot to add that I still have the external link .gif styled as a background image, as well as the favicon code. Since it's a bg url, it shouldn't make a difference.

Hmm, I appreciate you looking at it. I've used the newer div class code and it half works. For instance, on this post, in Firefox it works until it gets to the Yamipod link. But in IE7, it faviconizes the whole entry.

Even stranger is that IE doesn't favicon Yamipod's site and keeps going, whereas Firefox stops altogether. It might be because Yamipod's favicon isn't in the root directory, but at http://www.yamipod.com/main/favicon.ico

Is it possible to search an external page's head tag for "favicon.ico" in javascript to avoid the above? It would probably take some extra Regex to scoop up everything from http:// -to- /favicon.ico

And I'll confirm that it also favicons my local pages. If I knew more JS or PHP I'd try to troubleshoot it more. Thanks again for trying to help.

Thought you could perhaps get around the Safari issue (and all non-existent-favicon issues) without any javascript at all by simply adding to your javascript the following:

1) Wrap each external-pointing link in a span tag.
2) Set the background image of the span to your generic icon (via a class on the <span>?)
3) Have the javascript set the bg image of the to the retrieved favicon.

If there's no favicon, the <span>'s icon shows through.
If there is a favicon that covers the span's icon.

I'm not a javascript jockey, but this shouldn't be so hard to do if you've already got the rest of the code working.

WDYT?

Nice site. Nice article. Thanks!

I really like this script, and i also think that it's cool that you have an elephant on all of ur own comment posts.

You truly ARE a CSS Guy!!!

Regards!

Amazing, you are a born genius!

Hmmm - I'm not convinced of the utility of this technique personally. I instantly recognised the intent of your second example, using the 'arrow-in-a-box' icon, but felt slightly confused by the second example using favicons. Why? Because I'm not familiar with the second site in your example, and didn't recognise either of their favicons. I think it's too great an assumption to assume that *any* of your readers will be familiar with the target site, let alone a majority. The 'arrow-in-a-box' icon, and its variations, represent something of a de facto visual standard for representing external links, and messing with that failed a basic usability test for me.

Having said that, I can see it working for very well-known sites, like Amazon, Wikipedia, Google etc. I think your own examples tell the story - the second-last listing has 3 links I instantly recognise, and the others have me scratching my head, trying to glean something from the link text itself (and I'm familiar with kottke.org, but again, not its favicon).

As much as I like this, I'm still a bit frustrated about it working smoothly, especially in Firefox. Your newer code (5) is exactly what I was looking for, then I added a second function to style comments too and all seems to be working correctly...

until I found a bug. In FF2 on XP, it stops at an "keep reading the rest" anchor link with no href, and only an id (and no text between the "a" tag). Inside brackets is a id="more-###". It styles any links before this and stalls on any other link afterfwards.

I can't recode the anchor because wordpress handles it, but I'd still love to be able to use this. If you have any explanations, I would be very grateful. This is the only bug holding me back. I'm guessing it fails as soon as an "a" tag doesn't have an href tag, but I still can't seem to fix it.

Sorry to bother you so much.

A really interesting idea! I'm still playing with it, as on some pages it becomes visually overwhelming with many favicons, but I'll definitely implement it on my site.

A suggestion I would have is not to insert the image after the link, but inside the link with appendChild. Any :hover styles on the link would then also apply to the image. It works especially well for me, as I give the downloaded favicons an opacity by default, and when one hovers the link, they become fully visible.

Thanks again for this idea!

@liquidparallax.

If you want the script to skip anchor links like that, you can change the following line:

if (hrefvalue.search(hoststring) != -1) {

into

if (hrefvalue && hrefvalue.search(hoststring) != -1) {

This way the code only executes if the hrefvalue exists, and it should therefore skip links the one you describe.

It's Beautiful!!!

Really a nice idea!
Will use it for sure.

@Mark:
That fixed everything. Now I am completely satisfied. Thanks to CSS Guy too!

Great! I will try to adapt this as soon as possible! :-)

Good job

Great thinking, really nice trick

This would be interesting as a greasemonkey script. :-)

When hovering over, try this nice hand icon instead of the standard I of edit :)

function highlightRows() {
if(!document.getElementsByTagName) return false;
var tbodies = document.getElementsByTagName("tbody");
for (var j=0; j var rows = tbodies[j].getElementsByTagName("tr");
for (var i=0; i rows[i].oldClassName = rows[i].className
rows[i].onmouseover = function() {
this.style.cursor='hand'
if( this.className.indexOf("selected") == -1)
addClass(this,"highlight");
}
rows[i].onmouseout = function() {
if( this.className.indexOf("selected") == -1)
this.className = this.oldClassName
}
}
}
}

Sorry about the dupe, I gave the wrong address! The wife was grabing my ear @ the same time...
You know the blah,blah,blah. :)

When hovering over, try this nice hand icon instead of the standard I of edit :)

function highlightRows() {
if(!document.getElementsByTagName) return false;
var tbodies = document.getElementsByTagName("tbody");
for (var j=0; j var rows = tbodies[j].getElementsByTagName("tr");
for (var i=0; i rows[i].oldClassName = rows[i].className
rows[i].onmouseover = function() {
this.style.cursor='hand'
if( this.className.indexOf("selected") == -1)
addClass(this,"highlight");
}
rows[i].onmouseout = function() {
if( this.className.indexOf("selected") == -1)
this.className = this.oldClassName
}
}
}
}

Hello, your script works on firefox when I see it and copy it into an html page. But when I added it to my phpBB forum, I could only see it in IE7. Whats wrong? How can I make it viewable in firefox and other browsers again?

Also, I am using the first example, faviconize everything.

Sorry I dont, I am currently using it in my localhost

You probably wont, or atleast not for me, but if you do download it and install it, I put the script in templates/subSilver/overall_header.tpl

In there, I put the script right before the </head> tag

Great tutor! and useful tips.

Quite nice,

I might try to incorporate an alternative implementation of this on my site using PHP/CSS instead of CSS/Javacript.

Might even parse the remote link so I'll be able to handle a <link rel="shortcut icon" href="http://HOST.TLD/images/favicon.ico" />

Thanks for the great idea

Great idea. Nice site to !
Thks :-)

this is amazing and that useful!

Hey, you've created a pretty useful thing here.
Congrat's.

I'm using this on my website too.
I've edited your thing to let me grab favicon's from websites only for selected div's and exclude my domain.

It works OK, well.. At least for the front page.
I don't know what the problem is but it doesn't work at inner pages, single posts. Can you have a look at my website and tell me the problem if you can figure it out?

http://az.cokh.net

Well, i've changed the code as you've mentioned.
But still, it works only at the frontpage.

I don't know why. It's working with div's and i've set it to show favicons only in "content" div which both the frontpage and inner page's have.

Bit of caution, this

cue.onerror = function () {
this.src = "external.gif";
}

will cause an infinite loop if external.gif also errors for some reason.

Also you are setting localdomain = in every iteration of your for loop. I would declare it before the loop.

This is really very nice, I plan on making it based on <a> classname, if i make any tweaks to the reg ill be sure to let you know. Thanks for a great starting point.

Well, in the end, i've removed the code. No matter how much i struggle, it didn't work at the inner pages!

Sadly, i had to say bye to your script.
(:

I really like this solution b/c it's a lot easier than creating lots of classes for every a href. I did this for my youtube, myspace, amazon, etc. links, because I want people to see immediately where the link will take them (and I hate the snapr thing).

But it's a big pain in the a** to include the class attribute to nearly every link you're putting up, takes up way too much time.

However, your solution would be even better with a little tweaking I think. For example, I'd love to combine the Faviconize Divs with Class and Faviconize Divs and excluding a domain solution. In my blog, I'd only like to have the links in the .post-content div styled, and I'd like to exclude my own domain. Is this possible?

Furthermore, I'd like to exclude images inside the .post-content div from the javascript as images linked to amazon or flickr e.g. are also getting the additional favicon, and that messes up the design. Do you think this would be possible?

The third thing I'd like to mention is that maybe it would be cooler if the javascript would not place img tags, but css background-url tags, in order to give the links some favicons. (The solution you mentioned in your previous favicon tutorial). That gives the user a lot more room to customize the images and their position in the text. But as I'm a total Javascript Noob, I don't know if that's possible.

greetings,
aloha

I am trying to implement the document type icon after links to docs on my site using your method. However, unlike your examples, the icon becomes part of my link (the link underline extends to the icon too). How does yours NOT do that?

i am new to this css. I have been searching online for a way to add a favicon to every page on my site without having to manually add it to each pages header tag. i seem something like adding
.pagehedear to a css stylesheet.
what would you recommend any comments are welcome

I thought that favicons were always 16x16 pixels - is that not the official standard?

I thought that favicons were always 16x16 pixels - is that not the official standard?

Very nice and I am going to try to implement it in my site! :-)

Mike:

As Wikipedia (http://en.wikipedia.org/wiki/Favicon):

* ICO: include multiple resolutions (the most commonly used being 16×16 and 32×32, with 64×64 and 128×128 sometimes used by Mac OS X) and bit-depths (most common being 4, 8, 24 bpp—i.e. 16, 256 and 16 million colors) in the file.
* GIF: use 16×16 in 256 colors.
* PNG: use 16×16 in either 256 colors or 24-bit.

Safari doesn't support the javascript onerror event. If a favicon doesn't exist, it's the onerror event that tells the browser to use the standby "external link" image instead. For Safari, I just get a blank spot instead of my standby image.

Instead of relying on onError, create your IMG tag as a DomElement, using your 'default' placeholder image. Then go away and fetch the favIcon, and if you don't find one, your image still contains the default image, otherwise swap out the SRC attribute in your new dom element. THEN add it to the document.

I've not looked at your source, so I've assumed you're using nice, proper DOM scripting and not InnerHTML but the above should apply there too.

I'm no javascript expert either, but that's how I'd get around the safari issue.

that might be something for snap (snap.com - integrating snapshots of external sites into your links). sounds useful!

Nice script, I think I'll use it for our news page!

FYI this is what the parts of the regex mean (roughly - I studied them about 7 years ago...)

Entire regex: (\w+):\/\/([^/:]+)(:\d*)?([^# ]*)

(You can ignore the / at the front and back in the code - these are the Javascript regex equivalent of "quotation marks" for string values)

Catch the protocol with (\w+):\/\/
\w means a letter
\/ means just a forward slash /
+ means 1 or more.
The brackets denote a numbered group you can pull out later (starting at 1).

Catch the domain with ([^/:]+)
Square brackets specify a group of characters which might match.
^ means NOT the characters inside the brackets.
+ means 1 or more repeats.
So [^/:]+ means match all characters until / or : is encountered.
The round brackets make this a numbered group you can retrieve later (number 2).

Everything after this can be left out I think (I haven't tried it yet though): it just identifies all the other parts of a full URL, which we don't need here.
Port: (:\d*)?
URI: ([^# ]*)

I think sticking something like this on the end would catch the local anchor, but I could be wrong:
(#([\w]*))?

Now this would be a cool jquery plugin

Hey Now,
I really like the concept of the favicon displayed.
Thx 4 the info,
Catto

Instead of switching images on error, couldn't you first use the default image and then onload of the external favicon-image you switch to that.

If there's no image, the onload will never fire and the default image will not change.

// Insert default image next to link
var favImg = document.creageElement('img');
favImg.src = 'default.png';
favImg.insertBefore(link);

// Load favicon
var extImg = new Image();
extImg.src = faviconSrc;
// Replace default image onload
extImg.onload = function() {
favImg.src = extImg.src;
};

Also, it's not entirely trud that the favicon.ico is _always_ in root. As far as I know it is valid to place it anywhere and reference it from a link-element in the head-element.

I've created a similar script that takes a site-URL and returns its favicon-URL, be it in root, some place else or non-existent.

Cool trick, great article.

I was googling around for some tips on using favicons and came across this article.

I'm thinking about using this technique, but I'm concerned about how it might turn off some users.

The reason I'm concerned is that on some (often lower-quality) sites, there are in-text ads that mess around with external links (some of them add a little image, some of them throw weird hover things, some of them add a double-underline on random words, etc).

I'm worried that a user might quickly scan the content, see the favicons, and think it's some sort of advertisement spam thing instead of something useful.

i think this a great idea. However people may say, the script is not good. Then i think they should do better. Maybe we can say "this script is not useful or i did not like it.
i will check out your other works and i will publish them in my own blog. Of course i will write down the origanal article links. Hope there is no problem with that..

thanks agan, again....

Cool, that's how I did it and t seems to work fine cross-browser.

Nice. I hardcode the favicons paths into my bookmarks. This is much neater. The only change I made was putting the favicons before the URLs. Also need to update it for dynamically created a-tag lists like in my bookmarks.

Thanks!

CSS Guy,

First, let me say that this is a great addition to most blogging sites, like mine.

For me, it worked, but with a few problems. My site is setup as a tumblelog powered by WordPress. In the theme, categories determine the formatting of the posts.

When I add the javascript code, I am telling it to pull the WP div tag, "entry-content". This works as it doesn't look at my navigation links and pagination any longer.

However, I would like to tell the script to only look at external links so that photos and other internally linked things in my tumblelog dont' have my favicon attached to them.

Do you have any advice on how I can troubleshoot this problem?

Thanks in advance,

CP

I hacked the DivClass version with the example you linked to and it appears to work. Thank you!

Great idea. Now how will it perform with an animated favicon? We give directions for creating an animated icon and placing the correct code in the Head section to distinguish between Internet Explorer, which only uses static favicons, and other browsers like Firefox and Netscape that will show the animated transparent favicons. http://www.cathetel.com/favicon.htm for reference.

Hi CSS Guy,

I love your CSS Favicon script..It rock!! I'm using on my blog at http://www.lrwv.com/

the problem I'm having it that site with https://
the favicon don't show up and it don't show the default.

Any suggestion how to fix this in the script??

Thanks,

-Tyler

I think may tinker with adding this script to our press release system will have to determine what it does to optimization of the news though.

Hi Tony (cssguy),

I found a temp work around for the https:// problem.. i just post a new blog post and redirect it to the https:// website

My new question that I now have over 1000+ Links with favicon on the homepage.. I've added a jquery.js to switch css with a on.css and off.css..

with the off.css I've change the favicon img to 0, but it will still load the favicon in the background. I'm using the <div id="linkr"> options "linkr" will active the favicon download.

My problem is that I can't seem to find a way to turn the favicon off if user switch to that off.css (it is still downloading in the background. I can't seem to find a way to change:

<div id="linkr">
to
<div id="linkr-off">

once user have click on that off link options, plus I can't seem to know how to set cookies on which option that user selected and keep that option css they've chosen.

Thanks,

-Tyler

Hi Tony, (cssguy)

You are correct.. it is a javascript related issue.. but the problem is I don't know any javascript :)

I need the javascript to turn the favicon off and on
.click(function().

http://www.lrwv.com
The javascript is here:
<script type="text/javascript" src="http://www.lrwv.com/wp-content/themes/plainbox1/js/favicon.js"></script>

Any advise would be helpful.

-Tyler

Very very cool! Thanks.

Heyhey!

Nice method, I changed it a bit to make it more general! (So you can apply the function to any CSS selector you want, in stead of specific lists/div's only.)

In the end I decided to use a php based approach though, because I didn't want to load the favicons while the client was waiting :D.

Very very cool! Thanks.

Hi,

on my site, i tried to solve kind of special task. I run a big website with thousands of topics, which are linked between them, in the text. Some topics are empty, created just to be able to link to them, so we dont have to come back and link them once they are created, some are full of content. The topics are marked with 0-100% according to their level of "completness".

In my text, i wanted to show, which link points to "complete" topic (100%), and which points to "incomplete" one (0-90%). Your CCS guide gave me an idea how to do it. The basic idea is here ( i also used jQuery, as im using it on my site very often) :

jQuery.noConflict()

function faviconizeFavilist()
{

jQuery(".topic_content").find("a").each(function(i)
{
var hrefvalue = this.getAttribute("href",2);
if (hrefvalue.search("/domain.com/viewtopic.php") != -1)
{
var linkimage= hrefvalue.replace("/viewtopic.php", "/action/get_viewtopic_icon.php");
var cue = document.createElement("img");
cue.className = "faviconimg";
cue.setAttribute("src", linkimage);
this.parentNode.insertBefore(cue,this);
}
});
}

what it does : it goes thru all the links in DIV with class="topic_content" (can be more of them, in that case, it repeats for each of them), and for each INTERNAL (within our site only) link found (see the SEARCH condition), it replaces the "viewtopic.php" part of the URL with "action/get_viewtopic_icon.php". This page checks for completness of the topic (it has the same params as the link, so it knows exactly which topic it points to, thats why we did the replacement), get the percentage, according to that it loads the correct image (prepared 11 images for 0%, 10% ... 100%) and serves it (via imagegif PHP function) back to the original page, where it is placed in front of the link.

CAREFULL, this can overload your server, if you have dozens of links in one page (as it launches one PHP page for each link to check the percentage), but by caching the results (the % settings of topics doesnt change very often in our environment) you can decrease the load dramaticly. On the other side, you get actuall value everytime you load the page, so you are always up to date :)

The code will be fine tuned and launched on our site very soon.

Thank you for your idea of handling this, it helped our community to add another "nice to have" feature, which is very helpfull to us !

R.

Is there a way to have it display nothing insted of the external image?

hey, great post. while i was fiddling with it, i noticed that you can completely remove the regex. instead of

var domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/);
domain = RegExp.$2;

you could write

var domain = links[j].hostname

tested in ie8, ff3.5 & o10. mostly should work with before version

Nice. I'm using this on my site, in addition to a Delicious plugin for WordPress that I've tweaked for displaying my bookmarks (used mostly within the Resource Links category).

I've excluded my own domain and my Delicious bookmarks (so there aren't duplicated images due to the WordPress plugin).

I'm using the Faviconize Everything but only within the content area, and I'm using the favilist also.

I'd be interested to find a way to display favicons for https without the workaround previously mentioned, but this is a very minor thing.

Thanks for the great work!

~MileHighTechGuy

Thankyou!!!

Thanks for posting, and GREETINGS FROM GERMANY

Its nice article and everyone will agree with you. great help for the webmasters. thanks

Great script i was looking for something like this.

I have one question?

Can you also attach it to a id?

So when a link has a id like id="fav" then this one should have a favicon. But when a link has no id or a different id it doens't show a favicon is this possible?

Hi,
I'm trying to use this function for displaying favicon icons but my problem is that favicon's domain name to be used is coded not in "href" value but in "onMouseOver" value !

Like the following:

<ul class="favilist"><a href="http://www.mydomain.com/cgi-bin/out.pl?ID=XX" onMouseOver="window.status = 'http://www.domain.com'; return true;" rel="nofollow">Linked domain name</a></ul>

I have tried to replace href with onMouseOver but obviously this didn't work :(

// $(document).ready(function() {
$('.extlinks a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after(' ');
});
//]]>

that is just script for a external link. may you can develope with that script

I've developed a technique that achieves the same effect using 4 lines of JavaScript, and Google's favicon cache:

See my blog post: Highlight external links with favicons