Favicon en .ico ou .png ?

Publié le 04 janvier 2016 par Emaginance Nice @emaginance

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 " porté " le logo de votre site internet en favicon afin que l'internaute puisse facilement reconnaître votre site internet.

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 :

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="http://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érieur.

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.

Privilégiez l'implémentation du favicon avec l'extension .png pour un visuel de qualité supérieure.

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