Mostrar los enlaces con sus favicons ~ Tube trucos

Esta es un sencilla forma de mostrar los enlaces en nuestro sitio con sus favicones correspondientes,hay varias herramientas online de mostrarlos pero yo les voy a mostrar la mas cencilla.para las personas que no saben de lo que estamos hablando,Un favicon es la imagen pequeña que se ve en la barra de direcciones del navegador o cuando agregamos un sitio a los marcadores o favoritos.
Ejemplo si ves en la barra de direcciones ahora vas a ver esta imagen a continuacion les muestro un ejemplo y el cencillo codigo a usar.

Blogger

Tube trucos

facebook

Twitter

El codigo que usamos para obtener el favicon de otro sitio es este :

<img height="16" src="http://www.google.com/s2/favicons?domain=tubetrucos.com" width="16" />

Tambien podemos usar estos:

<img height="16" src="http://getfavicon.appspot.com/http://tubetrucos.com" width="16" />

Lo que esta en color amarillo lo cambian por su url

El codigo para mostrar los enlaces con su favicon es el siguiente:

<div style="float:left;padding:8px;">
<img src="http://www.google.com/s2/favicons?domain=www.blogger.com" style="margin-right: 8px; float:left;" /><a href="http://blogger.com">
<span style="float: left; padding:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#ffffff;"> blogger</span></a></div><div style='clear:both;'/>

<div style="float:left;padding:8px;">
<img src="http://www.google.com/s2/favicons?domain=www.tubetrucos.com" style="margin-right: 8px; float:left;" /><a href="http://tubetrucos.com">
<span style="float: left;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#ffffff;"> tube trucos</span></a></div><div style='clear:both;'/>

<div style="float:left;padding:8px;">
<img src="http://www.google.com/s2/favicons?domain=www.facebook.com" style="margin-right: 8px; float:left;" /><a href="http://facebook.com">
<span style="float: left;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#ffffff;"> facebook</span></a></div><div style='clear:both;'/>

<div style="float:left;padding:8px;">
<img src="http://www.google.com/s2/favicons?domain=www.twitter.com" style="margin-right: 8px; float:left;" /><a href="http://twitter.com">
<span style="float: left;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#ffffff;"> twitter</span></a></div><div style='clear:both;'/></div></div></div></div>

Lo que esta en rojo es la url del favicon
Lo que esta en naranja es la url de enlace

Bueno es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información es utíl denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.