Tailles et formats des icônes de site (favicon) en 2026 : ce dont votre site a réellement besoin.
7 min de lecture
Si vous recherchez des conseils sur les icônes favicon, vous trouverez des listes de contrôle exigeant plus de vingt fichiers d’icônes : un fichier PNG pour chaque génération d’iPad, des images pour les vignettes Windows, le fichier browserconfig.xml, des masques pour les onglets épinglés. La plupart de ces éléments sont des vestiges d’une approche dépassée datant de 2014, pour des plateformes qui ne sont plus utilisées ou qui sont revenues à l’utilisation d’icônes standard. En 2026, vous n’aurez besoin que de six fichiers d’image, d’un fichier manifeste et d’environ cinq lignes de code HTML. Cela suffira pour les onglets de navigateur, les favoris, les résultats de recherche Google, l’écran d’accueil d’iOS et Android, y compris les applications web installées. Ce guide vous explique quels fichiers sont importants, pourquoi chacun d’eux existe, ce que vous pouvez supprimer en toute sécurité et comment générer l’ensemble des fichiers à partir d’un seul logo, sans avoir à installer quoi que ce soit ni à envoyer vos créations sur un serveur.
À quel endroit votre icône apparaît réellement.
Il y a longtemps que la favicon a cessé d’être un simple élément décoratif pour les onglets. Aujourd’hui, cette petite collection d’images est utilisée dans des contextes beaucoup plus importants, et chaque contexte exige une taille et un format spécifiques.
Les onglets du navigateur, les favoris et l’historique affichent votre icône en 16 x 16 pixels CSS, puis en 32 x 32 pixels sur les écrans à haute densité. Google affiche les icônes de favoris à côté des résultats de recherche. Par conséquent, une icône manquante ou de mauvaise qualité donne une impression moins légitime à votre annonce par rapport à celle de votre concurrent. Lorsqu’un utilisateur ajoute votre site à l’écran d’accueil de son iPhone, iOS utilise votre icône « apple-touch-icon » comme icône d’application complète. Sur Android, Chrome utilise vos icônes du fichier manifeste pour la même fonction, et si votre site peut être installé comme une application web, l’icône de 512 pixels devient l’image d’écran de démarrage pendant le chargement.
Voilà la liste complète des éléments pour lesquels il est intéressant de créer des designs. Les tuiles de l’écran d’accueil de Windows, les icônes des onglets épinglés de Safari et une douzaine de résolutions d’écran héritées pour iPad n’y figurent pas, mais nous y reviendrons plus bas.
Le lot de 2026 : sept fichiers, cinq lignes de code HTML.
Voici tout ce dont un site web classique a besoin. Si une liste de contrôle vous indique de générer davantage d’éléments, cela est superflu.
Placez les fichiers dans le répertoire racine de votre site (en particulier, le fichier favicon.ico doit s’y trouver). Le code HTML ne contient qu’un petit nombre de balises de lien dans l’en-tête : une pour le fichier ICO, une pour chacun des deux fichiers PNG, une balise « rel » pour « apple-touch-icon » et une balise « rel » pour « manifest » pointant vers le fichier « webmanifest ».
- favicon.ico : un seul fichier ICO contenant des versions de l’icône aux formats 16, 32 et 48 pixels. Il assure la compatibilité ; vous trouverez plus loin une explication sur les raisons pour lesquelles il est toujours utilisé.
- favicon-16x16.png et favicon-32x32.png : fichiers PNG de haute qualité pour l’icône de l’onglet et la barre de favoris, optimisés pour les écrans standard et à haute densité de pixels.
- apple-touch-icon.png, format 180x180 : l’icône utilisée sur l’écran d’accueil des appareils iOS. Une seule taille suffit désormais pour tous les modèles actuels d’iPhone et d’iPad ; iOS la redimensionne si nécessaire.
- android-chrome-192x192.png et android-chrome-512x512.png : ces fichiers sont référencés dans le fichier manifeste et utilisés pour l’écran d’accueil d’Android, le sélecteur d’applications et l’écran d’introduction lors de l’installation.
- site.webmanifest : il s’agit d’un petit fichier JSON qui contient la liste des deux icônes Android, ainsi que le nom de votre application et la couleur du thème. Ce fichier est requis pour que les icônes Android soient correctement détectées et pour que le site puisse être installé.
- Facultatif : vous pouvez utiliser une icône SVG via une balise de lien avec le type « image/svg+xml ». Elle s’adapte parfaitement et peut modifier son apparence pour les onglets sombres grâce à une requête média intégrée, mais conservez les fichiers PNG et ICO en tant que solutions de repli.
Pourquoi le fichier favicon.ico refuse de disparaître.
Le format ICO est un format Windows datant des années 1990, et pourtant, l’abandonner serait encore une erreur en 2026. La raison est que les navigateurs, les robots d’indexation, les lecteurs RSS et d’innombrables programmes d’extraction de données demandent systématiquement le fichier « /favicon.ico » à la racine de votre site, sans même lire votre code HTML. N’importe quel journal de serveur web montre un flux constant de ces requêtes. Si le fichier est absent, ils reçoivent une erreur 404 et votre icône apparaît vide dans ces contextes.
Ce format présente également un avantage certain : un seul fichier .ico peut servir de conteneur et contenir plusieurs tailles d’images simultanément. Un fichier favicon.ico correctement conçu contient des images de 16, 32 et 48 pixels, et le programme qui l’utilise sélectionne l’image la plus appropriée au lieu de redimensionner une image de taille incorrecte, ce qui entraînerait une perte de qualité. C’est pourquoi la conversion d’un fichier PNG unique en un fichier favicon.ico entraîne une dégradation de la qualité : les petites images sont redimensionnées à la volée, ce qui entraîne une perte de netteté.
La règle pratique est donc la suivante : proposez un fichier favicon.ico de différentes tailles à la racine du site pour répondre aux demandes standard, et proposez les fichiers PNG de 16 et 32 pixels via des balises de lien pour les navigateurs modernes, qui les préfèrent.
Le piège d'iOS : la transparence devient noire
L'icône apple-touch-icon a un bord net qui trompe presque tout le monde une fois. iOS ne composite pas les icônes transparentes sur un bel arrière-plan ; il remplit les zones transparentes avec du noir uni. Un logo exporté avec un arrière-plan transparent semble correct partout ailleurs, mais se transforme en un carré noir avec une marque flottante sur l'écran d'accueil d'un iPhone.
La solution consiste à aplatir l’icône sur une couleur de fond spécifique avant de l’exporter : blanc, la couleur de votre marque, ou toute autre couleur choisie. iOS arrondira ensuite les angles automatiquement, il n’est donc pas nécessaire de les arrondir au préalable ; une icône déjà arrondie sera recadrée une seconde fois, ce qui entraînera l’apparition de zones sombres dans les angles.
Laissez un peu d’espace autour du logo : comme iOS applique son propre masque aux coins, les éléments graphiques qui touchent le bord de la zone de 180 x 180 pixels seront coupés. Il est donc préférable de placer le logo au centre, sur environ 80 % de la surface, ce qui améliorera également son rendu en tant qu’icône d’application.
Qu’est-ce qui est dépassé (oubliez ces notions) ?
L’ancien code utilisé pour les icônes de favoris ne cause que rarement des problèmes, mais il alourdit le chargement de chaque page et oblige les responsables de la maintenance à rechercher des fichiers image que personne n’utilise. Tout ce qui suit peut être supprimé :
- Les fichiers browserconfig.xml et les métabalises msapplication-TileColor/TileImage ne sont plus utilisés. Ils servaient à personnaliser les vignettes de l’écran d’accueil de Windows 8 et d’Internet Explorer 11. Ces deux éléments ont disparu.
- apple-touch-icon-precomposed. Cette option supprimait l’effet de brillance qu’iOS 6 ajoutait aux icônes. L’effet de brillance a disparu avec iOS 7 en 2013 ; il suffit désormais d’utiliser l’attribut « apple-touch-icon ».
- Voici les différentes tailles d’icônes « apple-touch-icon » : 57, 72, 76, 114, 120, 144, 152. Ces tailles correspondaient aux résolutions spécifiques des anciens modèles d’iPhone et d’iPad. Une seule icône de 180 x 180 pixels suffit pour tous les appareils actuels.
- L’attribut « rel » pour définir une icône de raccourci était une particularité d’Internet Explorer et n’a jamais été une norme. L’attribut « rel icon » simple fonctionne parfaitement depuis plus de dix ans sur tous les navigateurs.
- Images SVG pour l’icône de masque de Safari et les onglets épinglés. Les versions modernes de Safari utilisent l’icône habituelle pour les onglets épinglés, ce qui rend le fichier de masque monochrome inutile.
- Les balises PNG sont définies à 96, 128, 196 et 228 pixels pour assurer la compatibilité avec les anciennes versions de Chrome et d’Opera. Sur Android, ces balises ont été remplacées par des icônes dans le fichier manifeste ; elles n’ont jamais été nécessaires sur les ordinateurs de bureau.
Concevoir un logo qui reste reconnaissable même lorsqu’il est réduit à 16 pixels.
Les questions de format sont la partie la plus facile. Le défi réside dans le fait que votre icône doit être visible et reconnaissable dans un format de 16x16 pixels, ce qui signifie qu’un logo de 256 pixels risque de devenir flou. Quelques règles peuvent vous aider.
Simplifiez au maximum. Utilisez le symbole de votre logo, et non le nom de marque en toutes lettres – le texte devient illisible en dessous de 32 pixels, sauf s’il ne contient qu’une ou deux lettres. Si votre marque est basée sur la typographie, un monogramme composé d’une seule lettre sur un fond uni sera toujours plus efficace qu’un logo réduit.
Privilégiez les formes audacieuses et les contrastes marqués plutôt que les détails. Les traits fins disparaissent lorsqu’ils sont réduits, et les dégradés subtils se transforment en un effet de bruit. Vérifiez l’icône en la plaçant à la fois sur une barre d’onglets claire et sur une barre d’onglets foncée. Une icône bleu marine foncée disparaît dans un thème sombre, à moins qu’elle ne comporte un contour plus clair, un élément de couleur de fond ou une variante SVG qui inverse les couleurs à l’aide d’une règle « prefers-color-scheme ».
Enfin, examinez le résultat en appliquant un zoom de 100 %, sans utiliser les fonctions d’agrandissement de votre logiciel de conception. Une image de la taille d’un onglet est le seul aperçu réaliste.
Créer l'ensemble du package à partir d'un seul logo, directement dans le navigateur.
Vous n’avez pas besoin de Photoshop ni d’une commande ImageMagick pour réaliser tout cela. Le générateur de favicon de FileTinker prend une seule image et produit l’ensemble complet décrit ci-dessus en une seule étape : le fichier favicon.ico multi-tailles avec des icônes de 16, 32 et 48 pixels, les fichiers favicon-16x16.png et favicon-32x32.png, un fichier apple-touch-icon.png de 180 x 180 pixels aplati sur un fond coloré pour qu’il ne devienne pas noir sur iOS, les fichiers android-chrome-192x192.png et android-chrome-512x512.png, un fichier site.webmanifest qui configure les icônes Android, et un extrait de code à copier-coller avec les balises de lien correspondantes. Le tout est fourni dans un seul fichier zip, et le traitement se fait entièrement dans votre navigateur – le logo ne quitte jamais votre ordinateur.
Commencez avec la version la plus grande et la plus nette de votre logo ; idéalement, elle devrait mesurer 512 pixels ou plus, car la plus grande taille de sortie est de 512 x 512. L’agrandissement d’une image source de petite taille entraîne une perte de qualité. Si l’image source n’est pas carrée, le générateur propose deux options d’ajustement : « remplir » (cover) et « contenir » (contain). L’option « remplir » remplit le cadre et rogne les parties qui dépassent, tandis que l’option « contenir » ajuste l’ensemble de l’image à l’intérieur du cadre et remplit le reste avec la couleur d’arrière-plan que vous avez choisie. Pour contrôler précisément la partie d’un logo large qui sera conservée, commencez par le redimensionner vous-même en carré à l’aide de l’outil de recadrage, puis insérez l’image carrée dans le générateur.
Choisissez délibérément la couleur d’arrière-plan, même si votre logo n’a pas de transparence. C’est cette couleur que les utilisateurs d’iOS verront derrière votre logo et qui remplira l’espace vide autour de celui-ci. Ensuite, décompressez le fichier dans le répertoire principal de votre site, insérez le code dans la section <head> de votre page et publiez. Si vous n’avez besoin que d’un seul fichier .ico pour un projet secondaire, la conversion PNG vers ICO de l’outil de conversion d’images produira une icône de taille unique en quelques secondes, mais pour tout ce qui sera visible publiquement, il vaut mieux utiliser l’ensemble complet, même si cela prend une minute de plus.