J‘ai toujours été surpris de voir qu’un bon nombre de développeurs web — et pas seulement les plus novices — relèguent la création de leur favicon au rang de baliverne. Et pour cause, au fil du temps, c’est devenu un élément indispensable avec l’explosion des bookmarks et des agrégateurs en ligne.
Le rôle du favicon
Selon Wikipédia, un ou une favicon est une icône mise à disposition par un site web pour enjoliver, en particulier dans les navigateurs web, les endroits où ce site est mentionné.
Le terme est né de la contraction de “favorites” et “icon”. Le nom vient du fichier nommé favicon.ico placé à la racine du site qui était utilisé avec un navigateur, comme Safari.
Cette icône peut être utilisée dans la barre d’adresses ou de titre, les favoris, les onglets, ou autres raccourcis. Avec l’évolution du web, des plugins — favatars principalement — ont vu le jour pour afficher par exemple, le favicon du site d’un internaute lorsqu’il dépose un commentaire sur un blogue. Le plus souvent, la taille de cette icône est de 16×16 ou 32×32 pixels.
Malgré ces caractéristiques techniques bien connues de tous, le favicon semble être méprisé par les webmasters qui n’y voient pas, dans sa mise en place, une grande utilité. Le problème qui revient le plus souvent est celui de la transparence, souvent omise et supplantée par un fond uniforme blanc qui ne passe malheureusement pas partout.
Ne pas oublier la transparence
Que vous le vouliez ou non, chaque élément graphique qui est appliqué sur une page est important et doit être traité avec la même attention que les autres, et cela quelles que soient ses dimensions.
Préférer un fond blanc basique — gage de facilité — est une erreur typique que l’on pourrait également comparer à peaufiner le rendu de son site que pour les navigateurs dits récents. C’est un travail incomplet et peu sérieux à mon goût.
Exemples de favicons sans transparence.
Tout comme les émoticons en .gif qui s’adaptent à n’importe quelle situation — entendez par là couleur de fond, les favicons doivent impérativement faire la même chose pour rendre plus agréable leur intégration qui n’est pas forcément toujours appliquée dans une seule et unique couleur.
Du système d’exploitation orné d’un thème aux couleurs flashy à la dernière version de Netvibes peu lumineuse, il est primordial de supprimer ce remplissage incolore par une transparence plus correcte et tout-terrain.
Il existe d’ailleurs de nombreux outils pour palier à ce problème.
Réaliser un favicon transparent
Parmi la bonne centaine de tutoriaux disponibles à ce sujet, voici les deux méthodes les plus concluantes et faciles d’accès. Il y a deux catégories :
- Concernant les outils en ligne, je vous conseille Dynamic Drive qui, à partir d’un
.gifou d’un.png, vous permettra de réaliser automatiquement unfavicon.icotransparent ; - Pour ce qui est des logiciels de retouche, Mintywhite propose un tutorial en anglais très bien détaillé et illustré en images sur la démarche à suivre pour supprimer les zones blanches.
Conclusion
Bien que cela soit un élément minuscule, l’harmonie de votre design doit être retranscrite de façon quasi-parfaite dans cette icône qui, à travers de nombreuses applications, sera la vitrine de votre site.
Il est donc judicieux qu’elle s’adapte à tous les fonds et à tous les styles possibles.
