Asignar un Favicon a los Enlaces Externos con jQuery

Este código te ayuda asignar los Favicons de los enlaces externos a los que se haga referencia en tu pagina. Esta técnica no es recomendable utilizarla en toda la pagina sino en algunas áreas en las que quieras mostrar los Favicon de los enlaces, ya que puede aumentar enormemente el numero de peticiones de HTTP en la pagina y por tanto aumentar la velocidad de carga de la misma.

Con jQuery puedes asignar los favicon a los enlaces externos de esta forma:

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat",
        "padding-left": "20px"
    });
});

En tu hoja de estilo tienes aplicar estas propiedades a los anchor.

a { display: block; text-decoration: none; padding: 5px; } 

Para que funcione solo debes crear una lista de enlaces en markup HTML.

<a href=http://github.com>GitHub</a>
<a href=http://css-tricks.com>CSS-Tricks</a>
<a href=http://www.google.com>Google</a>
<a href=http://jsfiddle.net/chriscoyier/6Vg7t/3/>JSfiddle</a>
<a href=http://www.google.com:80>Google</a>
<a href=http://doesnotexistsreallyreallyreally.com>Nope</a>
<a href=http://127.0.0.1>localhost</a>

Este método hace que nuestros enlaces se vean mas elegante, ya que delante de cada enlace se muestra el favicon del mismo. Aqui un ejemplo de como resulta todo.

jsFiddle Demo

Este es un ejemplo gracias a Chris Coyier y CSS Wizardry

Google’s Favicon Service http://www.google.com/s2/u/0/favicons?domain=codigoadicto.com

Recomendado