Rajoutez un favicon à votre blog

13 mai, 2008 par Aurelien • Articles similaires • Infos

Un favicon est une icône servant à enjoliver votre site web, au niveau de votre navigateur (dans la barre de navigation et dans l’onglet de votre page), comme dans la capture ci-dessous :

favicon

Pour créer votre favicon, il y a plusieurs solutions très accessibles.
FavIcon from Pics, comme son nom l’indique, vous permettra de créer un favicon à partir d’une image. Une fois l’image envoyée sur le site, elle est redimensionnée à la taille adéquate. Vous pouvez tester le résultat dans votre navigateur et/ou la télécharger pour pouvoir l’installer sur votre blog.

Le site Favicon.cc vous propose de le faire pixel par pixel comme sur la capture ci-dessous :

favicon.cc

Il existe également des galeries de favicons qui vous proposent des solutions toutes faites, mais celles-ci ne sont pas toujours en adéquation avec vos attentes.

Maintenant que l’on a vu comment faire un favicon, l’étape suivante, en toute logique, est de l’installer. Pour cela, il va falloir éditer votre blog.

Tout d’abord, il faut que votre image soit en ligne pour pouvoir l’afficher en favicon. Pour cela, si vous maîtrisez un logiciel de FTP, vous l’envoyez directement vers votre espace d’hébergement, sinon vous pouvez toujours vous servir d’un service tiers comme ImageShack ou FlickR.
Votre image est maintenant en ligne, il ne vous reste plus qu’à l’afficher.
Dans la balise <head> de votre site (souvent présente dans le fichier “header” ou “en-tête”), trouvez la balise indiquant
<link rel=”shortcut icon” [...]
et rajouter le lien vers l’emplacement de votre image de la manière suivante :
<link rel=”shortcut icon” href=”http://www.votre-blog-com/image/favicon.ico”>
(si vous avez mis votre favicon dans un répertoire “image” et que vous avez fait un .ico. Dans le cas d’un png ou d’un gif, il faudra changer le lien pour mettre le .png ou le .gif à la place du .ico bien évidemment.

En complément, nous vous conseillons le site Wikistuce, qui vous apprendra à faire un favicon animé.

Quelques galeries de favicons:


Sources :
Rapidomaine.fr


4 Comentaires »

  1. Erikheus le 14 mai 2008:

    Génial ! Un petit plus pour son blog, merci beaucoup !

  2. REDPEPPERS le 14 mai 2008:

    Le gros intérêt du favicon, c’est pas d’”enjoliver” les sites web, c’est de pouvoir repérer plus facilement un site dans les bookmarks.

    Pour pouvoir utiliser un gif ou un png comme favicon il faut le préciser dans le code :

    Sinon ça marche pas sur ie.

    Il est en outre possible d’utiliser des favicon animés..
    J’avais fait un billet complet sur le sujet sur mon blog il y a un moment..

  3. REDPEPPERS le 14 mai 2008:

    arf le bout de code est pas passé dans le commentaire précédent. Je retente :

    [link rel="shortcut type="image/png" href="favicon.png" /]

    remplacer les crochets par un

  4. Aurelien le 14 mai 2008:

    @Redpeppers : oui les signes supérieur et inférieur sont détectés comme du langage HTML, donc ils sont tronqués dans les commentaires.

    Il faut donc remplacer les crochets [ ] de l’exemple de Redppeppers par un signe “inférieur à” au début et “supérieur à” à la fin.

Rediger un commentaire