Icônes d'application vs favicons : ICO vs PNG et ce que chaque plateforme attend

Les icônes sont partout dans les logiciels modernes, de l'image minuscule dans un onglet de navigateur au grand carré sur l'écran d'accueil d'un téléphone. Malgré une apparence similaire en surface, ces icônes servent des objectifs différents, suivent des règles de format différentes et sont affichées dans des contextes très différents. Les mélanger ou utiliser le mauvais format conduit à des onglets flous, des icônes de signets manquantes ou des rejets d'app store.

Les deux catégories les plus courantes sont les favicons et les icônes d'application. Un favicon (abréviation de "favorite icon") est la petite image qui apparaît dans les onglets du navigateur, listes de signets et historique du navigateur. Une icône d'application est l'image qui représente une application native sur un système d'exploitation de bureau ou mobile. Les deux commencent comme fichiers d'image, mais elles diffèrent dans les exigences de format, les attentes de taille et comment la plateforme les découvre et les utilise.

Cet article explique ce qu'est chaque type d'icône, quand vous devez utiliser le format ICO par rapport à PNG, et ce que les principales plateformes attendent réellement. Que vous construisiez un site web, emballiez une application bureau ou expédiez une application mobile, vous saurez exactement quel format et quelles tailles fournir.

Qu'est-ce qu'un favicon ?

Un favicon est l'icône qu'un navigateur web affiche à côté de votre site web. Vous le voyez dans l'onglet du navigateur à côté du titre de la page, dans votre liste de signets, dans l'historique du navigateur et dans certains cas dans la barre d'adresse ou les résultats de recherche. Le terme vient de l'implémentation originale d'Internet Explorer, qui cherchait un fichier nommé favicon.ico dans le répertoire racine de chaque site web.

Historiquement, les favicons devaient être au format ICO. Internet Explorer l'exigeait, et il n'y avait pas d'alternative. La capacité du format ICO à intégrer plusieurs tailles dans un seul fichier en faisait un choix pratique : un fichier pouvait servir l'image 16x16 pour l'onglet et l'image 32x32 pour la barre de signets. Les navigateurs modernes (Chrome, Firefox, Safari, Edge) acceptent maintenant également les favicons PNG spécifiés via une balise <link> dans le HTML de la page, mais ils reviennent toujours à /favicon.ico si aucune balise link explicite n'est présente.

Pour une compatibilité maximale sur tous les navigateurs, y compris les anciennes versions et les robots d'indexation, fournir un fichier favicon.ico à la racine de votre site web est toujours l'approche la plus sûre. Ce fichier ICO devrait contenir au moins des tailles 16x16 et 32x32. De nombreux développeurs incluent également 48x48 pour les onglets de navigateur haute résolution. Vous pouvez compléter cela avec des balises link PNG pour les plateformes qui les préfèrent, mais le fichier ICO agit comme votre filet de sécurité.

Qu'est-ce qu'une icône d'application ?

Une icône d'application représente une application native dans l'interface d'un système d'exploitation. Sur Windows, elle apparaît sur le bureau, dans la barre des tâches, dans le menu Démarrer et dans le sélecteur ALT+TAB. Sur macOS, elle s'affiche dans le Dock, Launchpad et le Finder. Sur iOS et Android, elle occupe une place sur l'écran d'accueil et dans le tiroir d'applications. Chaque plateforme a ses propres exigences de format et spécifications de taille.

Windows utilise le format ICO pour les icônes d'application. Un exécutable Windows (.exe) intègre une ressource ICO que le système d'exploitation lit et affiche. Cet ICO devrait contenir des couches à 16, 32, 48, 64, 128 et 256 pixels pour couvrir chaque contexte d'affichage et niveau d'échelle DPI. Les raccourcis (fichiers .lnk) peuvent également référencer des fichiers ICO externes.

macOS utilise le format ICNS, qui est le conteneur d'icônes multi-résolution propriétaire d'Apple. Les fichiers ICNS peuvent contenir des tailles jusqu'à 1024x1024 pixels. Les images sources sont généralement des PNG qui sont compilés dans le bundle ICNS pendant le processus de construction.

iOS nécessite des images PNG à des tailles spécifiques (60x60 à 2x et 3x, plus des variations pour iPad, Spotlight et Paramètres). Apple n'utilise pas ICO ou ICNS pour les icônes d'applications iOS. Les images sont incluses dans le catalogue d'actifs de l'app sous forme de PNG simples.

Android utilise également PNG, généralement fourni comme couches d'icônes adaptatives (premier plan et arrière-plan) à plusieurs densités (mdpi à xxxhdpi). L'icône Play Store est un PNG 512x512.

Applications web (PWA) utilisent des icônes PNG référencées dans un fichier manifest.json. Les tailles courantes sont 192x192 et 512x512. Ces icônes apparaissent sur l'écran d'accueil lorsqu'un utilisateur installe la PWA.

Conseils pratiques et erreurs courantes

Réussir les icônes sur toutes les plateformes nécessite une attention à quelques détails faciles à négliger. Voici les erreurs que les développeurs font le plus souvent, avec des correctifs directs.

S'appuyer sur un seul PNG pour tout : Un seul PNG 512x512 fonctionnera pour certains contextes mais échouera pour d'autres. Les navigateurs qui cherchent /favicon.ico ne le trouveront pas. Les exécutables Windows ne peuvent pas intégrer un PNG comme ressource d'icône. Générez toujours un fichier ICO dédié pour les cas d'utilisation favicon et Windows, même si PNG est votre format source principal.

Utiliser seulement une taille dans le fichier ICO : Un fichier ICO uniquement 32x32 semble bien dans un onglet de navigateur mais devient une tache floue dans la vue grande icône de l'Explorateur Windows. Incluez toujours plusieurs tailles. L'ensemble complet (16 à 256) garantit que chaque contexte d'affichage a une couche parfaite au pixel près à extraire.

Oublier les écrans haute résolution et Retina : Les écrans modernes compactent deux à trois fois les pixels des écrans standard. Un favicon 16x16 qui semble bien sur un moniteur 1080p apparaît minuscule et doux sur un écran Retina. Incluez une couche 32x32 (que les navigateurs utilisent avec échelle 2x pour l'emplacement onglet 16px) et une couche 48x48 pour l'échelle 3x ou les onglets haute résolution.

Ne pas tester sur toutes les plateformes : Une icône qui semble parfaite sur votre machine de développement peut sembler complètement différente sur un autre OS ou navigateur. Testez votre favicon dans au moins Chrome, Firefox, Safari et Edge. Si vous construisez une app bureau, testez l'ICO sur Windows à 100%, 150% et 200% d'échelle DPI. Quelques minutes de test évitent des heures de plaintes utilisateurs.

Pour un aperçu plus approfondi du format ICO et sa structure, ou pour de l'aide sur la création de favicons spécifiquement, consultez notre guide de création de favicon.