suivez-moi sur :

Philippe da Cruz : graphique and web designer
Philippe da Cruz

Blog

0

Créer et installer un favicon sur votre site web

Favicons Philippe da Cruz, Yahoo et Google

Apprenez facilement à installer et afficher un favicon personnalisé sur la barre d’adresse du navigateur lorsqu’un internaute visite votre site web.

Un favicon, c’est quoi ?
Vous avez sûrement déjà vu une petite icône près de l’adresse d’un site internet. Et bien, cette petite icône est un favicon. Favicon vient de l’anglais “Favourites Icon”.
C’est en général un logo ou une image PNG ou .ico au format 16X16 qui représente un site internet. Les navigateurs web les utilisent dans la barre d’adresse, la barre de titre, les favoris, les onglets …

 

Création

Dans Photoshop ou GIMP, ouvrez un nouveau document (document > nouveau) au format 64X64 pixels à 72 dpi. Dans ce nouveau document, importer ou créez l’image que vous voulez avoir en Favicon. Celui-ci doit rester simple pour que votre favicon soit facilement repérable et mémorisable. Rappeler-vous que c’est votre favicon qui sera vu en premier lorsqu’un internaute aura votre adresse en favoris.
Quand vous êtes satisfait de votre réalisation, allez dans image > taille de l’image et changez les valeurs à 16X16 pixels puis, enregistrez-le fichier au format GIF ou si vous avez un fond transparent, au format PNG. Notez qu’Internet Explorer n’affichera votre image qu’au format ico. A vous de choisir !

 

Insérer le favicon dans le site

Si vous n’êtes pas très à l’aise en HTML, vous pouvez tout simplement exporter le fichier favicon.png (gif ou .ico) que vous venez de faire à la racine de votre site avec l’outil Filezilla ou Dreamweaver.
Cependant, cette manière n’offre pas la possibilité de changer de favicon entre les pages.
Pour avoir un meilleur contrôle sur votre joli favicon, je vous conseille donc d’utiliser la méthode qui suit et qui comporte un peu de code.
Entre les balises <head> et </head> de votre page index.html par exemple, insérez la ligne suivante :

<link rel="icon" type="image/png" href="favicon.png" />

Bien sûr, n’oubliez pas de modifier le nom de votre fichier .png pour y mettre l’URL de votre icône si nécessaire.

Pour Internet Explorer :

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

Et pour tous les navigateurs Internet Explorer inclu :

<link rel="icon" type="image/png" href="favicon.png" />
<!--[if IE] > <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->

 

Et pour un site WordPress ?

Pour WordPress le code est légèrement différent.
Exporter votre favicon.png ou .ico à la racine de votre site web.
Ensuite, insérez le code ci-dessous entre les balises <head> et </head> de header.php :

<link rel="shortcut icon" href="/favicon.ico" />

Attention, que ce soit sur un site utilisant WordPress ou non, vous ne pourrez pas voir votre favicon en action si votre site est en local. Tâchez donc à le mettre en ligne avant pour voir si tout fonctionne bien.
Si même après avoir mis à jour le site en ligne le favicon ne s’affiche pas, vider le cache de votre navigateur et rafraîchissez votre page.

 

Conclusion

Voilà, vous savez quasiment tout sur les favicons !
Je ne voulais pas vous le dire avant mais vous pouvez aussi télécharger les logiciels IconEdit32 ou icoFX qui vous feront tout le travail ou presque.

 

Posté dans HTML, Photoshop | 0 commentaires

Laisser un commentaire

*

*


+ 4 = onze