Favicon en .ico ou .png ?

La première question que certains novices en la matière peuvent se poser, c’est tout simplement :

• Qu’est-ce qu’un favicon ?

Né de la contraction des mots anglais favorite (favori) et icon (icône), le favicon est une icône informatique symbolisant un site internet. Les navigateurs web utilisent les favicons dans la barre d’adresse, la barre de titre, les signets, les onglets et autres raccourcis. Afin d’avoir une certaine cohérence, il est vivement conseillé de « porter » le logo de votre site internet en favicon afin que l’internaute puisse facilement reconnaître votre site internet.

• Un exemple ?

Il suffit de jeter un oeil sur la petite image dans votre navigateur. Pour l’agence web niçoise eMaginance, vous aurez droit à un petit logo sous forme de e :

Avec Logaster, vous pouvez générer des dizaines de versions favicon prêtes à l’emploi, sans connaissance en design ou Photoshop. Cela fait gagner du temps et vous permet de choisir en 2 minutes le meilleur favicon parmi ceux disponibles : https://www.logaster.fr/favicon/

• Comment l’implémenter sur son site internet ?

Simple à mettre en place, il faut simplement placer une petite ligne entre les balises ‹head› et ‹/head› de votre site internet.

Voici le code que nous utilisons sur eMaginance :

‹link rel=“icon“ href=“https://wwww.emaginance.com/wp-content/uploads/2013/04/favicon.png“ type=“image/png“/› plutôt que la balise pour favicon.ico : ‹link rel=“icon“ href=“http://wwww.mon-site-internet.com/images/favicon.ico“/›

Nous privilégions l’affichage d’une image avec l’extension .png plutôt que .ico car la qualité visuelle est nettement supérieure.

• Tableau de compatibilité navigateurs

À savoir que les navigateurs récents savent très bien lire un favicon avec l’extension .png. Voici un tableau récapitulatif de compatibilité :

1/ Si les favicons en .png et .ico sont implémentés, le navigateur privilégiera le favicon avec l’extension .ico
2/ Si les favicons en .png et .ico sont implémentés, le navigateur privilégiera le favicon avec l’extension .ico
3/ Si les favicons en .png et .ico sont implémentés, le navigateur privilégiera le dernier favicon chargé.
4/ Navigateurs ne lisant pas les favicons, peu importe l’extension.

• Notre avis

Privilégiez l’implémentation du favicon avec l’extension .png pour un visuel de qualité supérieure. Seul impératif, le poids de votre .png doit être inférieur à 10ko, toujours dans un but d’optimiser le chargement de vos pages internet.

En effet, la plupart des navigateurs se mettent à jour automatiquement.

Puis nous sommes en 2016, il est peut être temps de s’asseoir sur du Internet Explorer 8, 9 ou 10 :)