Infographie

Archives mensuelles : janvier 2012

Ce tutoriel va vous permettre d’ajouter un ‘favicon‘ à votre site Wordpress mais aussi à n’importe quel site autre site, le principe étant le même.

Qu’est ce qu’un ‘favicon‘ ?

C’est le petit icône que vous voyez apparaitre à gauche du nom d’un site dans l’onglet correspondant de votre navigateur :

Il doit avoir la taille de 16×16 pixels. Une taille plus grande pourrait ne pas fonctionner avec certains navigateurs.

En règle générale, il est au format ‘.ico’ (icône) mais ce tutoriel vous propose une solution en utilisant le format d’image ‘.png’. Vous trouverez grâce à Google, des tutoriels pour un ‘favicon‘ en format ‘.ico’ et de son insertion dans votre site. L’avantage du format ‘.png’ est qu’il permet des image avec le fond transparent.

Création de l’image :

En ce qui concerne ce tutoriel j’utilise Photoshop mais Gimp peut être utilisé ou tout autre logiciel générant du ‘.png’.

Vous devez utiliser un document dont la hauteur et la largeur sont identiques. Cela facilitera la mise en page. Pour la résolution, je vous conseille une valeur au dessus de 300 dpi. Cela permettra d’obtenir une image assez fine. Mais attention, l’image étant convertie obligatoirement en 16×16 pixels, éviter de surcharger votre création sous peine d’avoir en final, une image qui ne ne sera pas compréhensible. En ce qui concerne mon exemple, j’ai récupéré directement l’image de ma création originale avec les paramètres suivants : 1000×1000 pixels en 600 dpi.

Une fois réaliser, sauvegarder votre document en format image ‘.png’ par l’option « Fichier » -> « Enregistrer pour le Web et les périphériques ». Donner comme valeur de taille d’image 16 pixels en hauteur et en largeur. Pour mieux visualiser votre travail augmenter le % pour l’affichage de votre exemple comme suit :

 

Cette image devra être copier soit à la racine de votre site, soit dans un dossier spécifique de votre site comme celui des images par exemple à l’aide de votre logiciel FTP comme Filezilla

Insérer le lien vers le ‘favicon’ dans votre site :

1) Dans Worpress (version 3.3) aller dans le menu « Apparence » puis « Editeur ». Une fois la page affichée, sélectionner le fichier « En-tête » (header.php) dans la colonne de droite. Insérer la ligne suivante

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

après la ligne définissant le titre. Vous obtiendrez cela :

5
6
<title>< ?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
<link rel="icon" type="image/png" href="/favicon.png" />

Enregistrez votre document et vérifier votre travail en affichant votre page d’accueil.

ATTENTION :

le signe ‘/’ avant le nom du fichier ‘favicon.png’, veut dire que le fichier est à la racine du site. Le modifier en fonction du nom du dossier dans lequel vous avez installé l’image. Par exemple si votre image se trouve dans le dossier ‘image’ à la racine du site le code sera :

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

C’est tout ce qu’il y a faire… Si je n’ai rien oublié biensûr  :mrgreen: