e-Planet

November 20, 2005

Improve your external links with Favicons

Web Design - Jean-Jacques Guegan

Put some style into your links.

By including this PHP script on your site, you can call the FaviconLink function to make favicons appear in your links to other websites. This brings more life to your external links and also tells your visitor that the link will open in a new window - most people now expect that this is what an icon on a link means.

text text text text text text
Text text Wikipedia text text text
text text text text text text
text text text text text text

Google
Yahoo
Wikipedia
"Site with no favicon.com"
 

This script needs Javascript to be enabled but "degrades gracefully" if Javascript is not enabled on your visitor's browser or if there is no "favicon.ico" file available on the remote website. In this case, no icon will appear, leaving the link as a standard link (no blank image or empty space).

Favicons can appear on the right (default) or on the left (list style display) of the link label.

 
<?php
 
define ('FL_ALIGN_RIGHT', true );
define ('FL_ALIGN_LEFT' , false);
 
function FaviconLink ($iURL, $iLabel=null, $iAlign=FL_ALIGN_RIGHT, $iTarget='_blank')
  {
    if ($iLabel==null)
      $iLabel = $iURL;
 
    $iDomain = str_replace(array('http://','https://'), '', rawurldecode($iURL));
    $aDomain = explode('/', trim  ($iDomain, '/ '));
    $iDomain = $aDomain[0];
 
    if ($iAlign == FL_ALIGN_RIGHT)
        echo <<<HTML
          <a href="$iURL" target="$iTarget">$iLabel<img src="http://$iDomain/favicon.ico" style="width:0; height:0; left-margin:0;" onLoad="this.style.width='16px';this.style.height='16px';this.style.margin='0 0 0 3px';" align="middle" border="0" alt="" /></a>
HTML;
      else
        echo <<<HTML
          <a href="$iURL" target="$iTarget"><img src="http://$iDomain/favicon.ico" style="width:0; height:0; left-margin:0;" onLoad="this.style.width='16px';this.style.height='16px';this.style.margin='0 3px 0 0';" align="middle" border="0" alt="" />$iLabel</a>
HTML;
  }
 
?>
 

Include this function in your code, then call it to get your "Faviconed Link":

 
<?php
 
...
      FaviconLink ('http://google.com', 'Google');
...
?>
 

You can download the function here.

This code is free to use and published under the GPL license.

 
 
 
 
 
 

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

 
Powered by WordPress
Copyright Mach13