Favicons en la lista de enlaces de Blogger

Mostar el favicon de una página web para "adornar" los enlaces es fácil si ese sitio coloca la etiqueta adecuada, si la imagen es "normal" y si está alojada correctamente.

En principio, hay dos formas de hacerlo, la obvia es usar la dirección URL del sitio seguida del nombre del archivo que en este caso, debería ser favicon.ico y luego, colocar esa dirección en una etiqueta IMG al igual que hacemos con cualquier otra imagen; por ejemplo:

<img src="http://www.facebook.com/favicon.ico"/>

Claro que, esto no funcionará siempre; hay sitios que los bloquean así que no podemos acceder a esas imágenes o usan otros formatos o están en otro directorio interno, etc.

Un segundo método es usar un servicio de Google que nos permite postrar el favicon de cualquier sitio, en formato PNG; para eso, debemos usar una dirección URL como esta:

http://www.google.com/s2/favicons?domain=DOMINIO

e igual que en el caso anterior, la ponemos en una etiqueta IMG:

<img src="http://www.google.com/s2/favicons?domain=facebook.com" />

Cualquiera de ambos métodos podríamos aplicarlos a la lista de enlaces de Blogger y automatizar la tarea, para eso, bastaría modificar un poco el código del gadget pero, el primero de ellos es el más sencillo de implementar, sobre todo, ahora que Blogger nos permite agregar un favicon a las plantillas.

Así que, si la expandimos y buscamos el widget que deberá llamarse LinkList, veremos algo así:

<ul>
  <b:loop values='data:links' var='link'>
    <li><a expr:href='data:link.target'><data:link.name/></a></li>
  </b:loop>
</ul>

Es un bucle, que crea una lista donde la dirección URL es data:link.target y el texto visible es data:link.name así que podríamos re-armarlo agregándole otro dato:

<li>
  <a expr:href='data:link.target'>
    <img expr:src='data:link.target + &quot;favicon.ico&quot;' />
    <data:link.name/>
  </a>
</li>

Claro que que no todos serán accesibles y si son blogs de Blogger, muchos de ellos no habrán establecido el favicon así que se mostrará el que se usa por defecto.

• Aeromodelismo a full
• Blogtecnia
• Conectablog
• Gem@ Blog
• Himsomnio
• Palomas de papel
• SpamLoco
• Templates Novo Blogger
• Zona Firefox

Y un poco de CSS nos permitirá organizar ese gadget como se nos ocurra:

<style>
  #LinkList1 li {
    background-color: #303941;
    border-top: 2px solid #303941;
    border-bottom: 2px solid #303941;
    cursor: pointer;
    margin: 2px 0;
    padding: 3px 10px;
  }
  #LinkList1 li a {
    color: #FFF !important;
    font-weight: normal !important;
  }
  #LinkList1 li img {
    background: #FFF url(IMAGENxDEFECTO) no-repeat 0 0;
    display: inline-block;
    height: 16px;
    margin-right: 5px;
    vertical-align: top;
    width: 16px;
  }
  #LinkList1 li:hover {
    background-color: #101921;
    border-color: #606971;
  }
</style>