JQuery : ajouter automatiquement les favicons sur les liens externes

JQuery : favicon automatique sur les liens externes

Petite astuce toute simple pour faire apparaître facilement le favicon sur tous les liens externes présent sur la page.

Le code JQuery onstruit simplement l’URL de l’icone (de type http://www.example.com/favicon.ico) et l’affiche à côté du lien. Pour que l’affichage fonctionne, il faut absolument que le site en question est un favicon nommé favicon.ico à la racine du site (en théorie sur tous les sites possédant un favicon, si ceux-ci sont bien faits !). L’affichage se fait ensuite facilement : il faut définir le fond du lien et préparer la class CSS définissant le padding et empêchant le fond de se répéter.

JQuery favicon

1
2
3
4
5
6
7
8
9
$(document).ready( function () {
	jQuery('a[href^="http://"]').filter(function(){ // on détecte tous les liens ayant l'attribut href commençant par http://
     	return this.hostname && this.hostname !== location.hostname; // il faut que le domaine soit différent du domaine du site (on veut traiter que les liens externes)
	}).each(function() { // pour chacun des liens externes
		var link = jQuery(this); // on met les propriétés du lien dans une variable
		var faviconURL = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1')+'/favicon.ico'; // on construit  l'url du favicon (de type http://www.example.com/favicon.ico)
		$(this).addClass("favicon").css("background-image", "url("+faviconURL+")"); // on ajoute la class CSS "favicon" au lien (pour le padding par exemple) et on définit le fond du lien
	});
});

Et c’est tout 😉 !
En exemple, je met également le code de la class CSS que j’ai utilisée pour la démo :

1
2
3
4
5
a.favicon { 
        padding-left:20px; 
        background-position:0 50%; 
        background-repeat:no-repeat; 
}
Ce contenu a été publié dans JQuery, avec comme mot(s)-clé(s) , , . Vous pouvez le mettre en favoris avec ce permalien.

2 reponses a JQuery : ajouter automatiquement les favicons sur les liens externes

  1. Nicolas F. dit :

    Bonjour,

    Un préchargement de l’image ou un HEAD pour vérifier l’éxistence permettrait de ne pas avoir de padding si il n’y a pas de favicon.

    Sinon, l’idée est intéressante.

    ++

  2. Damien dit :

    Il existe déjà 2 plugins jQuery traitant des favicons dans le même style :
    http://www.babylon-design.com/share/faviconize/
    http://www.zen-in-progress.com/ressource/jquery-externallink/

    Le second reprend la logique du premier avec plus d’options et des créations d’éléments en DOM plus propre.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *