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 :
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 :
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.
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"