Enlaces con favicon

Bear! Imaginario me hace llegar esta consulta:

Tengo una duda, no se si has visto en otros blogs, pequeños cuadritos que son para colocar favicones, en ves de intercambiar links, intercambian favicones... mas o menos como seria el código para lograr tener una cantidad de cuadritos 16x16????

Es cierto que últimamente he visto esta manera de intercambiar enlaces en bastantes blogs, ocupa mucho menos espacio que los botones de enlace tradicionales y además queda muy lindo estéticamente.

Se trata de colocar el favicón de tus blogs amigos o favoritos en la sidebar enlazando a sus páginas, incluso solicitando el mismo tipo de enlace, es decir, "yo pongo tu favicón si tu pones el mio".

El código se colocará dentro de un elemento html en la sidebar, y no tendrá mayor complicación que incluir la url a la imagen (favicón) que tendrá un tamaño de 16x16 pixeles y la dirección a la página que enlazará desde el favicón.

En "title" y en "alt" escribimos el título de la página a la que enlaza el favicón, para que al colocar el puntero sobre el, salga un pequeño cartelito con el nombre de la misma, como véis en el ejemplo.

<table border="0" cellpadding="0" cellspacing="2" align="center">

<tbody><tr>

<td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td>

<td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td>

<td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td>

<td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td></tr>

<tr><td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td>

<td><a href="Url de la página" target="_blank" title="Título de la página"><img alt="Título de la página" src="Url de la imagen-favicon" class="favicon" title="Título de la página"/></a></td>

<td><a href="#" target="_blank" title="Tu favicon aqui"><img alt="Tu favicon aqui" src="Url de la imagen-favicon-vacio" class="favicon" title="Tu favicon aqui"/></a></td>

<td><a href="#" target="_blank" title="Tu favicon aqui"><img alt="Tu favicon aqui" src="Url de la imagen-favicon-vacio" class="favicon" title="Tu favicon aqui"/></a></td>

</tr>

</tbody></table>

Si vais a usar el widget para ofrecer intercambio de enlaces a vuestras visitas podéis usar, como en el ejemplo, una imagen que os guste para mostrar los huecos disponibles.

En ese caso, en el "title" y el "alt" pondríamos algo como lo que he escrito en el ejemplo "Tu favicón aquí" o algo parecido...

Si nos fijamos en el código, cada favicon lleva aplicada una clase: class="favicon"  usando esta clase colocamos en el css de la plantilla, justo antes de ]]></b:skin> unas líneas de código para añadirle, si así lo queremos, un borde de color a cada favicon y algo de separación de este borde a la imagen:

.favicon{

padding: 2px;

border: 1px solid #7b68ee;

}