Les Favicon

Un favicon est une icône informatique symbolisant un site web. […] Les navigateurs web utilisent les favicons dans la barre d’adresse, la barre de titre, les favoris, les onglets et autres raccourcis.

Source : Wikipédia

Inventé par Microsoft pour Internet Explorer, et adopté par tous les navigateurs ensuite, leur utilité va croissante avec la navigation par onglet, mais on ne sait pas toujours par où commencer. Voici des informations et outils pour tout savoir sur ces petites choses.

Créer un favicon

Un favicon est un fichier au format .ico. Ce format permet de stocker des images de différents formats, un peu comme le format .icns d’Apple. Pour le web, c’est un BMP de 16 pixels par 16 pixels.

Favicon.cc est un outil en ligne très pratique car il permet à la fois de créer et de prévisualiser le résultat dans le navigateur (regardez la favicon du site : elle change quand vous modifiez la zone de dessin). Importer une image et la retoucher est également un jeu d’enfant. Je recommande particulièrement cet outil parce qu’il oblige à travailler dans les limites du format (16 pixels par 16 pixels et palette limitée). D’expérience, pour un résultat lisible, il est bien plus pratique de travailler sur une zone de 16 pixels par 16 pixels.

Si néanmoins vous voulez travailler avec un logiciel graphique, telegraphics propose un plugin gratuit permettant d’ouvrir et d’enregistrer ce type de fichiers avec Photoshop.

Enfin, si vous avez fréquemment besoin de créer des icônes, un logiciel dédié sera probablement un bon investissement. Je n’ai pas testé personnellement, mais IconBuilder (80$) a bonne presse.

Définir la favicon d’un site

En l’absence d’indications, les navigateurs chercheront un fichier favicon.ico à la racine du site. Ainsi, pour une page dont l’adresse est http://www.example.com/dossier/page.html, la favicon sera cherchée à l’adresse http://www.example.com/favicon.ico. Vous pouvez également utiliser le code suivant pour indiquer aux navigateurs de chercher cette icône à un autre emplacement :

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

Autres formats

Hormis sur Internet Explorer, qui ne supporte que le format ico, vous pouvez également utiliser le format PNG, GIF, voire même APNG/MNG (versions animées du format PNG). Dans ces cas-là il est obligatoire d’indiquer explicitement le type de l’image à utiliser. Pour cela, utilisez le même code que ci-dessus en adaptant le contenu de l’attribut type. Exemple :

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

Sur iPhone, iPod Touch et iPad, les favicon sont utilisées lorsque vous ajouter un site à l' »écran d’accueil ». Les dimensions des favicon classiques n’étant pas adaptées à l’interface utilisateur iOS, le navigateur prend une capture de la page sur laquelle vous vous trouvez au moment où vous décider d’ajouter le site à l’écran d’accueil. Pour fournir une image particulière, il faut créer une image de 57 pixels par 57, et ajouter une balise link dans la balise head de toutes les pages du site.

<link rel="apple-touch-icon" href="chemin/vers/votre/favicon.png" />

Si vous ne souhaitez pas que le navigateur n’applique un effet « bulle de verre » à votre image, remplacez apple-touch-icon par apple-touch-icon-precomposed dans l’attribut rel.

Performances web

Même si aucun favicon n’est déclarée, les navigateurs chercheront le fichier favicon.ico à l’emplacement par défaut. Pour éviter de remplir les logs du serveur avec des lignes et des lignes d’erreur 404 « fichier non trouvé », il est recommandé de mettre un favicon à la racine du site.

Enfin, puisque cette icône change rarement, on peut éviter aux visiteurs de retélécharger le même fichier encore et encore. Pour cela, dans le fichier .htaccess à la racine du site (ou mieux, dans la configuration du vhost si vous avez la main dessus), mettre le code suivant :

ExpiresActive On
ExpiresByType image/ico "access plus 1 years"