XHTML.net

Technology talks by Loïc d’Anterroches

News, articles, PHP, scripts, XHTML/CSS, …

Icônes de pages web, la favicon.ico

The 2006-01-17 at 21:16 by Loïc d'Anterroches filed under Articles and (X)HTML/CSS.

Avec Mozilla, Internet Explorer et K’onqueror, vous pouvez maintenant avoir une petite icône au niveau de vos signets ou dans la barre d’adresse. Cela permet de faire ressortir votre site dans la liste, c’est plutôt bien pour les fréquentations. Son nom : favicon.ico.

C'est tout simple

Si vous avez les bons outils, c’est très simple, en fait le problème se résume à créer l’icône et à mettre le code HTML correspondant dans votre page web.

Vous pouvez trouver une série de freeware pour éditer vos icônes facilement sur Internet. Vous pouvez essayer IconArt de ConWare pour Windows. Si vous êtes sous Linux vous pouvez utiliser The Gimp ou si vous êtes sous KDE le petit KDEIconEditor vous tend les bras.

Bien entendu, pour éditer votre page HTML, votre éditeur de texte favori fera très bien l’affaire.

Le format des icônes

Le format des icônes dépend de votre navigateur. Un seul format est supporté par tous, c’est le ICO.

Internet Explorer est à la traîne, c’est lui qui n’accepte que le ICO, recherchez les fichiers en .ico sur votre disque dur, vous ferez peut-être des trouvailles. Mais si vous utilisez un navigateur un peu plus moderne comme Mozilla, vous pouvez utiliser tous les formats d’images supportés par ce dernier. Ce qui donne les types JPEG, GIF, PNG, MNG, XBM, BMP et ICO. Vous verrez par la suite comment ne pas pénaliser les utilisateurs ayant un navigateur qui respecte les standards.

La taille des icônes. L’icône doit être format 16x16 ou 32x32.

Si vous piochez votre icône dans un programme que vous avez, attention à respecter le copyright. Vous ne pouvez pas toujours récupérer pour votre usage les icônes des programmes.

Je laisse vos talents d’artiste s’exprimer dans la création… Eric Taher me souffle à l’oreille qu’une icône au format .ico n’est en fait qu’une image .bmp avec la bonne taille et la bonne extension.

Le code HTML dans la page

Il existe deux manière d’informer le navigateur de l’existence d’une icône pour la page, une bonne et une mauvaise, je vous laisse trouver le navigateur qui ne supporte que la mauvaise.

Si on respecte les standards

Vous devez mettre le lien suivant dans votre page entre les balises <head> et </head>.

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

Remarquez le type qui contient le type ou Mime Type de l’image. Voici les types que vous pouvez utiliser pour les 4 classiques :

image/png: image PNG.
image/gif: image GIF.
image/jpeg: image JPEG.
image/x-icon: image de type icon, attention ce format n’est pas un format standard.

Si on ne respecte pas les standards

Et vous serez obligés de faire cela si vous voulez que Internet Explorer puisse utiliser l’icône.

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

Notez l’utilisation du type shortcut icon à la place de icon et l’obligation d’utiliser une image au format ICO.

Un peu de fun avec les standards

Et oui, avec les standards on peut faire mieux qu’avec les conduites propriétaires. Je vous conseille un petit tour sur le site hideout de Jakub ‘jimmac’ Steiner. Regardez l’icône de la page… et oui elle change !

Si on regarde un peu plus le code on trouve :

<link rel="icon" href="images/favicon.mng" type="video/x-mng" />

Le type MNG c’est comme les gifs animés pour le PNG. Et oui, vous pouvez faire des icônes animés ! Bon alors maintenant comment supporter la brouette Internet Explorer, tout en proposant le top, pour les navigateurs supportant les standards. Voici la réponse :

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

Et voilà, en mettant après le lien pour Internet Explorer, le lien vers la version animée, vous avez le beurre et l’argent du beurre. Internet Explorer va prendre la première solution qu’il comprend et va laisser tomber le reste. Mozilla lui, va tout comprendre, mais ne va garder que la dernière déclaration, c’est à dire la version animée pour l’affichage.

Si vous êtes intéressés par la création d’icônes animées, je vous conseille de regarder la liste des applications permettant de travailler les fichiers MNG et particulièrement ImageMagick qui peut convertir vos gifs animés en animation MNG.

Vous pouvez bien entendu utiliser directement un gif animé pour votre icône, mais c’est un format, même si utilisé partout, propriétaire. Comme les navigateurs qui supportent les gifs animés pour l’icône supportent aussi les MNG, autant suivre les standards. Le fichier MNG permet par ailleurs d’avoir plus de 256 couleurs dans votre icône.

Conclusion

A vous les commandes, créez vos de superbes icônes, et pourquoi pas, revenez ici parler de vos expériences !

Cet article n’aurait pas pu être enrichi sans l’aide de :

l’AFUL et son tutoriel pour la manière d’inclure une icône en respectant les standards ;
la liste des tests de Mozilla pour sa liste des images supportées par le lézard cachée au milieu ;
et la liste des types MIME.

Comments from readers

Firestorm said:

attention le dernier lien est mauvais

http://goirand.christophe.free.fr/

sinon IE 6 déconne quand même avec les favicons j'ai des soucis..

lyüstcl said:

C'est t'y normal que y'a pas d'icône qui bouge sur le site où c'est sencé le faire (jimmac.musichall.cz) ?

GIF n'est plus proprio donc utiliser MNG n'a aucun intérêt si on n'a pas besoin de beaucoup de couleurs.

Et voilà ce qui se passe quand on prend pas le temps d'actualiser ses billets recyclés :P

lyüstcl said:

Oups, je viens de lire que ce billet n'a pas été publié en Janvier 2007 mais en Janvier 2006 ... (mon agrégateur qui bugge ?) Bref si jamais tu es prêt à faire la mise à jour n'hésite pas ;)

CamilleRoux.com said:

En fait, il y a un peu plus de formats possibles que ceux précisés dans cet article : cf. http://en.wikipedia.org/wiki/Favicon

bidibul said:

Bien super, je vais essayer l'icone animée, mais déjà que je galère pour arriver à afficher celle que j'ai dans IE.. j'espère que ça va aller, j'essaye et je viens en reparler d'ici un jour ou deux...

Merci pour l'info en tous les cas et bravo pour l'explication bien claire !

annuaire zen said:

heu, j'ai été voir sur le site site hideout de Jakub ‘jimmac’ Steiner et j'ai pas vu d'icone animée... :(

annuaire zen said:

ben ça marche l'icone animée... pas pas dans ie pour moi..

Big Jimus said:

bon voilà je m'acharne je m'acharne mais ça ne marche pas.
Je ne sais pas pourquoi. Peut etre que je n'ai pas mis le code au bon endroit...
Si vous pouviez m'aider SVP.
MERCI

shamanphenix said:

Le format .mng n'est plus supporté par Firefox depuis la 1.5.x, c'est lamentable.

Jyus said:

Avec qq modifs pour le gif et l'ico, ca marche nickel, merci !

Teddyp said:

Ben moi j'ai un problème d'affichage de cette fameuse icone.

Elle s'affiche sous un nom de domaine acheté chez Néodomaine mais pas sous un nom de domaine acheté chez Netim...

Euh... Est ce normal?

Si qqun tient la solution, j'en serais ravi.

Teddyp.

QQun aurait une explication?

Kador said:

> "Bon alors maintenant comment supporter la brouette
> Internet Explorer, tout en proposant le top"

Cette idée que proposer une icône animée représente "le top" m'horripile au plus haut point. Voilà encore le genre de clou bien inutile enfoncé dans la tête des graphistes qui ne soucient déjà que des "bells and whistles", des trucs qui clignotent parce que ça en jettent, en ignorant superbement les attentes des internautes et les constatations les plus basiques en terme d'ergonomie. Ça clignote, ça m'énerve; ça bouge, ça distrait ma lecture; ça "fond-enchaîne", ça ressemble à de la pub et je zappe.