Introduction
Vous venez de lancer un nouveau site, vous avez dessiné un logo propre en PNG et tout s'affiche nickel jusqu'à ce que vous remarquiez que l'onglet du navigateur montre une icône de globe générique au lieu de votre logo. Cette petite icône s'appelle le favicon et, pour qu'il s'affiche de façon fiable sur tous les navigateurs, anciens et modernes, il vous faut un fichier ICO. Le PNG fonctionne sur les navigateurs modernes, mais l'ICO reste l'option la plus sûre pour une compatibilité totale. Dans ce guide, on vous explique pourquoi l'ICO reste pertinent, comment convertir png vers ico gratuitement en ligne et quelles tailles vous faut-il dans ce fichier ICO pour être net partout.
Pourquoi ça arrive
ICO est un format d'image hérité développé par Microsoft dans les années 80 pour les icônes de Windows. Malgré son âge, c'est encore le format de favicon avec le meilleur support universel. Des navigateurs comme Chrome, Firefox, Safari et Edge lisent les favicons ICO, et les navigateurs anciens comme Internet Explorer aussi. L'astuce de l'ICO, c'est qu'un seul fichier peut contenir plusieurs tailles de la même image, généralement 16x16, 32x32, 48x48 et 256x256 pixels. Quand le navigateur a besoin du favicon pour un onglet, il prend le 16x16. Quand Windows veut une icône de bureau, il prend les tailles plus grandes. Si vous n'embarquez qu'une seule taille, votre favicon apparaît flou ou pixelisé dans certains contextes. Un fichier ICO adapté empaquette toutes les tailles ensemble pour que le navigateur choisisse la bonne automatiquement.
3 solutions
Solution 1 : Utiliser un convertisseur en ligne de PNG vers ICO. Le convertisseur piczen de png vers ico prend votre logo PNG, embarque plusieurs tailles dans un fichier ICO et vous permet de le télécharger gratuitement. Sans installation. C'est la voie la plus rapide pour la majorité des propriétaires de sites parce que ça gère l'embarquement des tailles automatiquement, ça marche sur n'importe quel appareil avec un navigateur et ça produit un fichier ICO compatible avec tous les navigateurs, de Chrome à Internet Explorer. Vous pouvez aussi convertir plusieurs logos en un seul lot si vous gérez plusieurs sites.
Solution 2 : Générer des favicons avec RealFaviconGenerator. Uploadez votre PNG et produisez un ICO plus des icônes PNG, des icônes Apple touch et des fichiers manifest pour chaque plateforme. Parfait pour un support multiplateforme complet, puisque ça génère aussi les balises HTML à ajouter au head de votre site. C'est la meilleure option si vous voulez une couverture intégrale sur iOS, Android, Windows et navigateurs anciens.
Solution 3 : Convertir dans Photoshop ou GIMP. Les deux peuvent exporter de l'ICO avec le plugin adéquat. Le mieux si vous avez déjà le logiciel ouvert et voulez un contrôle total sur chaque taille, puisque vous pouvez optimiser manuellement la version 16x16 pour une lisibilité max en toute petite taille. L'inconvénient, c'est que les plugins ICO ne sont pas toujours fiables et monter le flux prend du temps si vous n'avez besoin que d'un favicon.
Guide étape par étape
Commencez avec un PNG carré de votre logo, idéalement en 512x512 pixels pour que le convertisseur ait beaucoup de résolution à se mettre sous la dent. Si votre logo n'est pas carré, recadrez-le d'abord avec n'importe quel éditeur, parce que les images non carrées produisent des favicons distordus. Ouvrez le convertisseur de png vers ico dans votre navigateur. Glissez votre PNG sur la page. La plupart des outils vous laissent choisir quelles tailles embarquer, l'ensemble standard c'est 16, 32, 48 et 256 pixels. Cliquez sur Convertir et téléchargez le fichier ICO obtenu. Appelez-le favicon.ico et uploadez-le à la racine de votre site. Ajoutez une balise link dans le head de votre HTML qui pointe vers lui, genre link rel="icon" href="/favicon.ico" type="image/x-icon". Videz le cache du navigateur ou rafraîchissez fort et votre logo devrait apparaître dans l'onglet. Pour de meilleurs résultats, ajoutez aussi une version PNG de 180x180 pour les icônes Apple touch et une de 192x192 pour Android, puisque les appareils modernes attendent ces tailles supplémentaires pour les raccourcis sur l'écran d'accueil.
Avantages et inconvénients
Un favicon ICO vous donne un support navigateur universel, y compris les versions anciennes qui ignorent les favicons PNG. Empaqueter plusieurs tailles dans un seul fichier signifie que le navigateur choisit toujours la version la plus nette pour le contexte, que ce soit une icône d'onglet 16x16 ou un raccourci de bureau 256x256. La contrepartie, c'est qu'ICO est un format ancien au support d'outils limité. La plupart des éditeurs d'image modernes ne peuvent pas ouvrir ni éditer des fichiers ICO directement, c'est pour ça qu'un convertisseur en ligne est si utile. Pour les nouveaux sites, la bonne pratique, c'est de publier à la fois un ICO pour le support hérité et des icônes PNG pour les appareils modernes, ce qui vous donne la couverture la plus large possible sur tous les navigateurs et systèmes. Tout le processus prend une dizaine de minutes et ça se voit à chaque fois que quelqu'un visite votre site, puisqu'un favicon pro renforce la reconnaissance de marque et donne du poli à votre site.