Xyberneticos

En askthecssguy veo una bonita forma de resaltar nuestros link. Básicamente la idea es a todos los enlaces que apuntan a un sitio externos (otra web) agregarles sus respectivos favicones al lado. El método para hacer esto requiere un poco de CSS, pero la mayor parte de la magia sucede con Javascript.
Lo bueno de esta técnica que presenta askthecssguy, es que nos presenta diversas alternativas para emplearlas, o mejor dicho podremos implementarla de varias formas. Implementarlas en listas, en un div especifico, y demás.
Cerrando la intro la idea es llegar de esto

A esto.

Entonces lo que haremos mediante Javascript será:

1. Buscar los enlaces en nuestra pagina
2. Si los enlaces señalan a otro sitio, agregar el favicon de ese sitio.
3. El favicon será acomodado al lado del enlace.

Consideraciones

• Conseguir los favicones externos: Si existe un favicon, siempre suele encontrase en un punto fiable: por lo general esta siempre en la raíz de un dominio, como esto: http://www.xyberneticos.com/favicon.ico. Por esta razón, no hay necesidad de almacenar favicones localmente, el Javascript lo buscara de forma automática.
• No todos los sitios tienen un favicon: Aunque es normal ver favicones en los sitios web, puede suceder que nos encontremos que alguno de ellos no posea. En este caso no se mostrara nada. Pero para no dejar un espacio en blanco, utilizaremos en esos raros casos una imagen por defecto almacenada localmente, que se mostrara en los enlaces sin favicones.
• No todos los favicones son del mismo tamaño. Algunos favicones posen dimensiones de 16x16 pixeles otros serán quizás mas grandes. Es por eso que en nuestro css no especificaremos la propiedad “background image”, para redimensionar las favicones y acomodarlos, ya que no podremos especificar el tamaño de las imágenes de fondo, pero si se llamara la imagen utilizando la etiqueta “img” con las dimensiones deseadas para todos los favicones.

Nota recordatorio: En todos los casos o ejemplos iremos agregando nuestro Javascript dentro de las etiquetas < Head > < /Head >

• Agregar favicones a un div especifico (Pagina demo)

  

Trabaja solamente en enlaces dentro de un div con una clase especificada.
Aquí, el Javascript busca la etiqueta del div con la clase “faviconlink”. Entonces entra en cada enlace que contiene el div para ver si el href comienza con el “HTTP: ”, que indicaría que es un enlace externo. Si es así, insertara el favicon de ese dominio web después de cada enlace. En caso de que no exista un favicon en el sitio, utilizara una imagen localmente almacenada () para indicar que el enlace es externo. Si deseas cambiar el nombre de la clase para satisfacer tus necesidades, Simplemente buscas la clase “faviconlink” en el Javascript y lo cambias por cualquier nombre que desees tenga la clase.

PLAIN TEXT
JavaScript:

<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}
function faviconizeDivClass() {
  if (!document.getElementsByTagName) return false;
  if (!document.createElement) return false;
  var div = document.getElementsByTagName("div");
  for (var i=0; i<div.length; i++) {
    if (div[i].className == "faviconlink") {
      var links = div[i].getElementsByTagName("a");
      for (var j=0; j<links.length; j++) {
        var hoststring = /^http:/;
        var hrefvalue = links[j].getAttribute("href",2);
            if (hrefvalue.search(hoststring) != -1) {
                var domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/);
                domain = RegExp.$2;
                var cue = document.createElement("img");
                cue.className = "faviconimg";
                var cuesrc = "http://"+domain+"/favicon.ico";
                cue.setAttribute("src",cuesrc);
                cue.onerror = function () {
                    this.src = "external.gif";
                    }
                insertAfter(cue,links[j]);
            }
        }
    }
  }
}
addLoadEvent(faviconizeDivClass);
</script>

<style type="text/css">
a { color: #FF3300;}

a:hover { color: #878787; background: inherit;}

p, li {font:normal 12px/18px arial;}
h1    {font:bold 22px/28px arial;}
h2    {font:bold 16px/20px arial;}
.wrap {width:500px;}

img.faviconimg {
    border:0;
    width:11px;
    height:11px;
    padding:0 4px;
}

</style>

• Favilist (“Pagina demo”)

  

Agregara favicones a los enlaces dentro de la clase "favilist" con la etiqueta < UL > que nos permite presentar listas de elementos sin orden alguno, dando por resultado.

PLAIN TEXT
JavaScript:

<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function faviconizeFavilist() {
  if (!document.getElementsByTagName) return false;
  if (!document.createElement) return false;
  var ul = document.getElementsByTagName("ul");
  for (var i=0; i<ul.length; i++) {
    if (ul[i].className == "favilist") {
      var links = ul[i].getElementsByTagName("a");
      for (var j=0; j<links.length; j++) {
        var hoststring = /^http:/;
        var hrefvalue = links[j].getAttribute("href",2);
            if (hrefvalue.search(hoststring) != -1) {
                var domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/);
                domain = RegExp.$2;
                var cue = document.createElement("img");
                cue.className = "faviconimg";
                var cuesrc = "http://"+domain+"/favicon.ico";
                cue.setAttribute("src",cuesrc);
                cue.onerror = function () {
                    this.src = "external.gif";
                    }
                links[j].parentNode.insertBefore(cue,links[j]);
            }
        }
    }
  }
}
addLoadEvent(faviconizeFavilist);
</script>

<style type="text/css">
p, li {font:normal 12px/18px arial;}
h1    {font:bold 22px/28px arial;}
h2    {font:bold 16px/20px arial;}
.wrap {width:500px;}

img.faviconimg {
    border:0;
    width:11px;
    height:11px;
    padding:0 4px;
}

ul.favilist {list-style:none;}
</style>

• Favilist 2 (“Pagina demo”)

  

Igual que arriba, pero mostrando los favicones en 16x16 “tamaño original”, y con un texto más grande acompañando, dando por resultado:

PLAIN TEXT
JavaScript:

<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function faviconizeFavilist() {
  if (!document.getElementsByTagName) return false;
  if (!document.createElement) return false;
  var ul = document.getElementsByTagName("ul");
  for (var i=0; i<ul.length; i++) {
    if (ul[i].className == "favilist") {
      var links = ul[i].getElementsByTagName("a");
      for (var j=0; j<links.length; j++) {
        var hoststring = /^http:/;
        var hrefvalue = links[j].getAttribute("href",2);
            if (hrefvalue.search(hoststring) != -1) {
                var domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/);
                domain = RegExp.$2;
                var cue = document.createElement("img");
                cue.className = "faviconimg";
                var cuesrc = "http://"+domain+"/favicon.ico";
                cue.setAttribute("src",cuesrc);
                cue.onerror = function () {
                    this.src = "external.gif";
                    }
                links[j].parentNode.insertBefore(cue,links[j]);
            }
        }
    }
  }
}
addLoadEvent(faviconizeFavilist);
</script>

<style type="text/css">
p, li {font:normal 18px/23px arial;}
h1    {font:bold 29px/35px arial;}
h2    {font:bold 22px/27px arial;}
.wrap {width:600px;}

img.faviconimg {
    border:0;
    width:16px;
    height:16px;
    padding:0 4px;
}

ul.favilist {list-style:none;}
.Estilo1 {color: #993333}
</style>

• Agregar favicones en todos los enlaces de nuestra web, menos en enlaces que apunten a nuestra propia web:

Aquí en el Javascript se puede especificar que deseamos agregar los favicones a todos los enlaces que se encuentren en nuestra web, salvo en aquellos enlaces que apunten a nuestro propio sitio, (categorías, post, etc). Mirar el código y sustituir donde dice www.xybermneticos.com por tu sitio.