Favicons as link bullets

September 1, 2004

I was updating my list of Links that displays in the sidebar and saw that WordPress allows you to associate an image with the link. Associating images to entries is a bit of a novelty to me and not something that I wanted to do if I had to go out and find appropriate images and manipulate them accordingly. Then I thought about the favicon.ico images that so many people are using on their sites. Sure it is an .ico file, but just maybe it will work.

Of course, my most visited site (and most updated), Gadgetopia, doesn’t have a favicon. So I decided to work with another site. I added WordPress to my Links list and pointed the Image URI property to the favicon. And voila, it worked. Kind of.

I wasn’t too thrilled with the default display of Link images. WordPress shows the image with a 2px border (since it is linked) and did not display the Name of the link. A couple of quick modifications to links.php and I was set:

Change lines 210-211 from:

if (strstr($row->link_image, 'http'))
echo "<img src='$row->link_image' $alt $title />";

to:

if (strstr($row->link_image, 'http')) {
echo "<img style='border:0px;padding-right:4px;vertical-align:middle;' src='$row->link_image' $alt $title />";
echo($name);
}

and you end up with a nice looking list of links. Kind of.

You didn’t think that I could get away without browser issues did you? With the exception of Dive Into Mark, which shows as text, all of the icons display fine in the latest version of Firefox (actually Kintana Superkangaroo with the Firesomething extension). And in the latest Internet Explorer, A List Apart, Dive Into Mark, SimpleBits and Zeldman had issues. Not the same issues though. A List Apart shows as a 32×32 black and white image. Dive Into Mark and SimpleBits have broken image placeholders. Zeldman is a 16×16 black square.

I plan on keeping this feature as it looks good in Firefox (my primary browser). So for those I mentioned above, feel free to fix your icons so my site looks better. ;-)

Popularity: 8% [?]

Share This

Posted by Matt Smith | Filed Under General, WordPress 

Comments

2 Responses to “Favicons as link bullets”

  1. Matt on September 1st, 2004 10:22 pm

    Before anyone feels compelled to state the obvious… Yes, I realize that I’m not using the favicon as real html link bullets. Rather I am achieving a similar effect by putting the image and text next to each other.

  2. Matt on May 29th, 2005 12:05 pm

    Two updates:
    First, for WordPress 1.5, the line number that you need to change is line 250 and you will want to replace it with:
    $output.= “<img style=’border:0px;padding-right:4px;vertical-align:middle;’ src=’$row->link_image’ $alt $title />$name”;

    Second, I’m removing the favicon link images from A List Apart, Mike Industries, SimpleBits, and Zeldman. I was hoping that over time, something would come to their attention that they don’t display correctly in IE, but that hasn’t happened I don’t want the site to continue to look ‘broken’.

Got something to say?





MyHomePoint

Having trouble keeping track of everything going on at home? Is the refrigerator organizer not cutting it anymore? We feel the same way...
Check out MyHomePoint »

Latest Blog Posts

Close
E-mail It