Visualizzare il favicon di un sito (l’icona visualizzata nella barra dell’indirizzo o nelle etichette delle schede del browser) può servire a rendere più interessanti i collegamenti esterni presenti in una pagina. Per visualizzare l’icona di un link è sufficiente qualche riga di javascript e jQuery.

Visualizzare il favicon di un sito

Per il funzionamento dello script è necessario avere nel documento uno più collegamenti di cui si vuole visualizzare il favicon.

<div class="demo">
  <p><a href="http://google.it">Google</a></p>
  <p><a href="http://it.wikipedia.org/wiki/Pagina_principale">Wikipedia</a></p>
</div>

Inserire, alla fine del documento, una copia di jQuery e, subito dopo, un altro elemento script per le istruzioni.

<script src="js/jquery-1.11.1.min.js"></script> 
<script></script>

Per prima cosa selezionare tutti gli elementi a di cui si vuole visualizzare il favicon (nell’esempio tutti gli elementi a che si trovano all’interno degli elementi con classe demo).

<script>
  $(function(){
    $('.demo a').each(function(){
      
    });
  });
</script>

Il metodo each() di jQuery consente di eseguire una serie di istruzioni per ciascun link selezionato dalla funzione jQuery. In questo caso si crea un elemento img che punta all’icona del sito per ogni collegamento selezionato dall’istruzione precedente e lo si aggiunge all’interno di ciascun link, con il metodo appendTo().

$(function(){
   $('.demo a').each(function(){
   //$(this).text("");
   $('<img src="'+ 
   findhost($(this).attr('href')) + 
   '/favicon.ico' + 
   '" height="16" width="16">').appendTo($(this));
   });
});

L’istruzione più interessante è quella che recupera l’url dall’attributo href di ciascun link, attraverso il metodo attr(), e lo passa alla funzione findhost().

<script>
$(function(){
  $('.demo a').each(function(){
    $('<img src="'+ 
    findhost($(this).attr('href')) + 
    '/favicon.ico' + 
    '" height="16" width="16">').appendTo($(this));
  });
});
function findhost(url) {
  var u = url.match(/^http:\/\/[^/]+/);
  return u ? u[0] : null;
}
</script>

La funzione findhost() utilizza il metodo javascript .match() per estrarre il nome dell’host da un url attraverso un’espressione regolare. L’espressione regolare utilizzata restituisce la prima parte dell’url e cioè da http:// fino alla prima barra obliqua esclusa.

Concatenando il nome dell’host alla stringa “/favicon.ico” si forma il percorso del favicon predefinito, cioè salvato all’interno della root del sito. L’autore del sito però può posizionare l’icona in qualsiasi percorso del sito e poi specificare la sua posizione mediante un elemento link posizionato nelle intestazioni del documento. In questo caso l’icona non potrà essere visualizzata.

Infine, se si vuole visualizzare il favicon al posto del testo del link è sufficiente aggiungere un’altra istruzione che svuoti il contenuto dell’elemento a prima di posizionare al suo interno l’immagine, nell’esempio il metodo text().

$(function(){
 $('.demo a').each(function(){
   $(this).text("");
   $('<img src="'+ 
   findhost($(this).attr('href')) + 
   '/favicon.ico' + 
   '" height="16" width="16">').appendTo($(this));
 });
});
Visualizzare il favicon con jQuery - Demo

Visualizzare il favicon con jQuery – Demo

Per altre informazioni sulle espressioni regolari in javascript consultare il documento Regular Expressions di MDN. Mentre per la il metodo match() consultare anche: