Recherche
Posez votre question »

Favicon - L'icône de votre site dans la barre d'adresse

Avril 2015

Vous avez sûrement remarqué la présence d'une icône à gauche de l'URL dans la barre d'adresse de votre navigateur sur certains sites web ?

Pour mettre en place ce type d'icône sur votre propre site web il n'y a rien de plus simple.



Créer la favicon


Il y a plusieurs méthodes :

Pour la plupart des navigateurs


Il suffit dans un premier temps de créer une image au format png ou gif (formats standards, à utiliser).
(on peut également utiliser des formats plus rares, voir le lien en fin de page).
Vous pouvez choisir plusieurs dimensions, 16x16 ou 32x32 (en pixels).

Pour Internet Explorer


Comme d'habitude, IE ne respecte pas les standards et n'utilise pas les images avec les bons formats.
Pour ce navigateur, il faut utiliser une image ou format ico (ou bmp renommée) (non standard, à éviter de préférence) , et de dimensions 16x16 pixels.

Pour créer une favicon animée ou générer simplement un fichier ICO


Cet outil vous permettra non-seulement de générer un fichier ICO facilement mais aussi d'animer votre favicon et de faire défiler du texte si vous le souhaitez.

Cliquez sur le bouton Parcourir... et choisissez une image se trouvant sur votre ordinateur.

Vous pouvez aussi rajouter du texte qui défilera après votre icône, cela générera automatiquement une icône animée.

Enfin, il est également possible de générer une icône animée sans texte en cochant la case Animated Favicon : c'est alors le favicon en lui-même qui semble défiler.

Validez ensuite en cliquant sur le bouton Generate Favicon.ico

Vous aurez ensuite un aperçu de votre favicon.

Il vous suffit alors de télécharger le fichier zippé sur votre ordinateur.

Après avoir décompressé le fichier téléchargé, copier le fichier favicon.ico vers votre site.

Si vous avez téléchargé une icône animée, le fichier ZIP contiendra également un dossier Extra qui contient votre favicon animée, copiez alors animated_favion1.gif vers votre site.

Mettre la favicon en ligne


Il faut ensuite déposer la favicon sur votre site, et indiquer son chemin via la balise link dans les balises d'en tête head.
Voici un exemple avec une image au format png :
<link rel="icon" type="image/png" href="/images/mafavicon.png" />

Selon le format, c'est l'attribut "type" qui change :
  • Format png : image/png
  • Format gif : image/gif
  • Format jpeg (extension jpg ou jpeg) : image/jpeg


Et si vous avez une favicon qui ne respecte pas les standards, l'attribut "rel" change également :
<link rel="shortcut icon" type="image/x-icon" href="/images/icone_ie.ico" />
Il est également possible de déposer un fichier favicon.ico à la racine du site pour que certains navigateurs l'utilisent automatiquement, mais ce n'est pas standard.

Si votre icône est animée (GIF)


Insérez la balise suivante :
<link rel="icon" href="/images/animated_favicon1.gif" type="image/gif">

Notes

  • Si vous utilisez une icône dans un format standard mais aussi une autre au format ico, évitez de placer cette dernière à la racine : les navigateurs l'afficheront si ils ne trouvent pas l'image au format png.

A voir


Explication et méthode en détails
Pour une lecture illimitée hors ligne, vous avez la possibilité de télécharger gratuitement cet article au format PDF :
Favicon-l-icone-de-votre-site-dans-la-barre-d-adresse.pdf

Réalisé sous la direction de , fondateur de CommentCaMarche.net.

A voir également

Dans la même catégorie

Favicon - Colocar un icono en la barra de direccciones
Par Carlos-vialfa le 3 juillet 2008
Favicon auf homepage erstellen
Par jedtheboss le 11 mars 2013
Publié par Jeff. - Dernière mise à jour par christelle.b
Ce document intitulé «  Favicon - L'icône de votre site dans la barre d'adresse  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.