Añadir favicon delante de los enlaces

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Cada vez que vemos una columna de enlaces, conocida en el mundo de los blogs como Blogroll, notamos que “le falta algo de vida”. Algún indicativo que nos haga hacer click en un enlace en lugar de otro…

Es un tema complicado ya que en principio no se puede hacer mucho a parte de poner un enlace significativo acompañado de un anchor text que nos identifique qué vamos a encontrar al hacer click en el enlace.

Sin caer en lo fácil, que sería mostrar una imagen o banner de la web en cuestión, podemos mediante su favicon darle algo de vida a nuestras listas de enlaces. Si aún no sabes que es el favicon puedes ver nuestros artículos donde lo explicamos.

En la siguiente imagen se muestra cómo podemos añadir el favicon de la web delante del enlace.

favicon-enlace

Existen varias formas para conseguir que los faviconos de las páginas y colocarlos delante de los enlaces de forma automática, por medio de CSS, mediante el servicio de favicon de Google o haciendo uso del servicio de getFavicon y jQuery.

En este último caso:

JavaScript:

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

 

CSS:

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

 

Y para finalizar los enlaces los escribiríamos de forma normal con <a href=http://blog.adpv.com>ZonaW</a>

Puedes ver un ejemplo en funcionamiento en jsfiddle.net

Recuerda no abusar del uso de faviconos en páginas con muchos enlaces, ya que aumentaríamos nuestras peticiones al doble y por lo tanto la carga de nuestra web se podría ver afectada. Y si al enlazar encuentras alguna web que aún no tenga favicono ponte en contacto con su webmaster para hacerle saber lo útiles que pueden llegar a ser.

 

Un comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.