Favicon Friends

The idea behind this is to have an area on your web site that contains favicon icons which link to web sites that you want to exchange links with. So instead of traditional text links, you have image links in the form of favicons. These are normally 16x16 pixels in size and displayed in browser tabs.

For example you could have a 4x4 grid of favicons linking to 16 other sites. This grid would then fit snugly into a small area of your home page and would create curiosity in visitors to click the links.

Favicons are normally stored on the homepage of a site as favicon.ico So in our code, the link data would be coded as:
<a href="http://www.site.com/" title="" target="_blank"><img src="http://www.site.com/favicon.ico" alt="" /></a>

Fill in the ALT and TITLE tags with descriptions for people with accessibility issues and to show up as a mouse moves over the favicons.

Generate the Code

You can use the generator to create the code for different numbers of Favicons.

The code for 4 x 4 = 16 Favicons

Cut and paste this HTML code into your site where you want the Favicon Friends to appear:

<!-- Start of Favicon Friends code -->
<div id="favicons">
<a href="http://urgentclick.com/favicon-friends/">Favicon<br />Friends</a>
<div>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
</div>
<div>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
</div>
<div>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
</div>
<div>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
<a href="" title="" target="_blank"><img src="favicon.ico" alt="" /></a>
</div>
Click Us
</div>
<!-- End of Favicon Friends code -->

The Styles

Copy this code to before the </head> tag in your web page:

<style>
#favicons {
  width: 72px;
  border: 1px solid #000;
  text-align: center;
  background-color: #000;
  color: #9f0;
  font: 10pt verdana, sans-serif;
}
#favicons img {
  border: 1px solid #888;
  float: left;
  width: 16px;
  height: 16px;
}
#favicons a {
  text-decoration: none;
  color: #9f0;
  font-weight: bold;
}
#favicons a:hover {
  color: #9fc;
}
</style>

License

You are free to copy and use this code as suggested above as long as the link to our site urgentclick.com is retained.