Un logo terminé finit toujours par rencontrer un développeur qui demande le favicon et les icônes d'application. La liste comptait autrefois une vingtaine de fichiers. Elle est bien plus courte aujourd'hui, mais les tailles qui restent sont précises, deux d'entre elles exigent un dessin préparé différemment, et un format de fichier ne peut pas du tout être écrit par Illustrator. Cet article donne les tailles qui comptent en 2026, comment préparer un symbole pour qu'il survive à 16 pixels, comment exporter chaque taille avec Exporter pour les écrans, comment construire le .ico, et les balises à remettre avec les fichiers.

Les tailles qui comptent en 2026

Navigateurs et systèmes d'exploitation ont convergé vers un petit ensemble.

favicon.ico compte toujours. C'est un seul fichier qui contient trois bitmaps, 16, 32 et 48 px, et c'est la solution de repli que tous les navigateurs comprennent. Les navigateurs demandent /favicon.ico à la racine du site même quand aucune balise ne pointe vers lui.

Un favicon SVG est l'icône d'onglet moderne. Il s'adapte à n'importe quelle taille, pèse quelques centaines d'octets et peut embarquer une media query pour changer de couleur en mode sombre. Les navigateurs Chromium et Firefox l'utilisent depuis des années ; Safari les a rejoints avec la version 26 en 2025, si bien que les versions plus anciennes de Safari se rabattent encore sur l'ICO.

Un PNG de 32 px couvre les navigateurs qui n'acceptent ni l'un ni l'autre et ne coûte rien à livrer.

apple-touch-icon.png en 180 x 180 est ce qu'iOS et iPadOS placent sur l'écran d'accueil et dans les signets de Safari. Une seule taille suffit ; l'ancien jeu de 57 à 152 px est obsolète.

Les PNG de 192 et 512 px sont déclarés dans le manifeste de l'application web. Android et Chrome utilisent le 192 pour l'écran d'accueil et le 512 pour l'invite d'installation et l'écran de démarrage.

Un PNG maskable de 512 px est la même icône préparée en fond perdu, pour les lanceurs qui rognent les icônes en cercle, en squircle ou en carré arrondi.

Les tuiles Windows, le fichier browserconfig.xml et les balises meta msapplication sont obsolètes : la version actuelle d'Edge utilise le favicon standard. Le mask-icon monochrome de Safari pour les onglets épinglés est facultatif et rarement demandé aujourd'hui.

Fichier Taille (px) Format Utilisé par
favicon.ico 16, 32, 48 dans un seul fichier ICO Onglets, signets, navigateurs anciens, raccourcis Windows
icon.svg Toute taille, viewBox carré SVG Onglets des navigateurs actuels, compatible mode sombre
favicon-32.png 32 x 32 PNG Repli pour l'onglet quand le SVG n'est pas lu
apple-touch-icon.png 180 x 180 PNG, opaque Écran d'accueil iOS et iPadOS, signets Safari
icon-192.png 192 x 192 PNG Écran d'accueil Android, installation PWA
icon-512.png 512 x 512 PNG Écran de démarrage et invite d'installation PWA
icon-maskable-512.png 512 x 512 PNG, fond perdu Icônes adaptatives Android, rognées selon une forme

Préparer le dessin

Partir d'un document carré, en pixels

Créez un nouveau document avec le profil Web, ou réglez-le vous-même : couleur RVB, pixels comme unité, 72 ppi pour les effets de pixellisation. Ajoutez un plan de travail de 512 x 512 px nommé icon et, si le symbole comporte des détails fins, un second plan de travail de 16 x 16 px pour une petite version ajustée à la main. Sélectionnez l'outil Plan de travail (Shift+O) et vérifiez dans le panneau Propriétés que X, Y, L et H sont des nombres entiers. Un plan de travail au demi-pixel produit un bord flou sur chaque export.

Simplifier le symbole

Un favicon, c'est le logomark, jamais le logo complet. Retirez le logotype, épaississez les traits fins, ouvrez les petits contrepoinçons, supprimez tout détail qui disparaît à 16 px. Une icône de 16 px dispose de 256 pixels, pas plus. Vérifiez-la avec Affichage > Aperçu en pixels (Cmd+Opt+Y, Ctrl+Alt+Y sous Windows) à 800 pour cent, qui montre le résultat pixellisé plutôt que le vecteur.

Respecter la zone de sécurité des icônes maskable

Pour le 512 maskable, remplissez tout le plan de travail avec la couleur de fond, car c'est le lanceur qui décide de la forme extérieure et tout coin transparent apparaîtrait comme un trou. Gardez le symbole à l'intérieur d'un cercle centré dont le rayon vaut 40 pour cent de la largeur de l'icône : pour 512 px, un cercle d'environ 410 px de diamètre. Les dix pour cent extérieurs de chaque côté peuvent être rognés. Tracez ce cercle avec l'outil Ellipse (L), centrez-le sur le plan de travail avec Fenêtre > Alignement réglé sur Aligner sur le plan de travail, puis convertissez-le en repère avec Affichage > Repères > Créer les repères (Cmd+5, Ctrl+5 sous Windows). Gardez l'icône maskable sur son propre plan de travail plutôt que de réutiliser celui avec transparence, car les marges sont différentes.

Pour l'apple-touch-icon, utilisez un fond opaque et des angles droits. iOS applique lui-même le masque arrondi et ne respecte pas la transparence, si bien qu'une icône déjà arrondie ou transparente ressort avec des coins sombres.

Aligner sur la grille en pixels

Activez Affichage > Magnétisme du pixel avant de dessiner, pour que les bords droits tombent sur des pixels entiers. Pour un dessin existant, sélectionnez-le et choisissez Objet > Make Pixel Perfect, ou cochez Aligner sur la grille en pixels dans le panneau Transformation. Les courbes ne peuvent pas être parfaitement nettes au pixel, mais les bords extérieurs d'un symbole le peuvent, et c'est là que le flou se voit.

Exporter avec Exporter pour les écrans

Fichier > Exporter > Exporter pour les écrans (Cmd+Opt+E, Ctrl+Alt+E sous Windows) exporte les plans de travail en plusieurs tailles et formats en une seule passe.

  1. Dans l'onglet Plans de travail, sélectionnez le plan de travail icon, ou une plage.
  2. Réglez Exporter vers sur votre dossier de livraison et décochez Créer des sous-dossiers, sinon les fichiers atterrissent dans un dossier par échelle.
  3. Dans Formats, réglez la première ligne sur PNG avec Échelle sur Largeur, 32 px, et le suffixe -32. Cliquez sur Ajouter une échelle pour chaque taille supplémentaire : Largeur 180 avec le suffixe -180, Largeur 192 avec -192, et 1x avec -512 pour le fichier maître. Ajoutez une dernière ligne avec Format réglé sur SVG à 1x.
  4. Cliquez sur l'icône d'engrenage. Sous PNG, réglez Lissage sur Optimisé pour l'illustration (suréchantillonnage). Sous SVG, cochez l'option Minify.
  5. Cliquez sur Exporter le plan de travail.

Renommez icon-180.png en apple-touch-icon.png et icon-32.png en favicon-32.png, ou nommez un plan de travail dupliqué apple-touch-icon et exportez-le à Largeur 180 pour que le nom de fichier soit juste dès le départ. Faites de même avec le plan de travail nommé icon-maskable, exporté à 1x et à Largeur 192.

Le menu Échelle accepte Largeur, Hauteur ou Résolution en plus des multiplicateurs, et le suffixe s'ajoute au nom du plan de travail, si bien qu'un seul plan de travail de 512 produit toutes les tailles de PNG en une passe. Si le symbole paraît encore brouillé à 16 ou 32, exportez plutôt ces deux tailles depuis le plan de travail ajusté à la main.

Le panneau Exporter des éléments

Fenêtre > Exporter des éléments fait le même travail pour des objets plutôt que des plans de travail. Faites glisser le symbole dans le panneau (glissez avec Option, ou avec Alt sous Windows, pour regrouper plusieurs objets en un seul élément), ajoutez les mêmes lignes d'échelle et de suffixe, puis cliquez sur Exporter. Cela convient à un symbole qui vit dans un document plus grand, mais l'export utilise les limites propres de l'élément, si bien qu'un symbole qui n'est pas carré produit un fichier qui n'est pas carré. Les plans de travail vous donnent la toile carrée et les marges, et c'est pourquoi ils restent la meilleure voie pour les icônes.

Créer le fichier .ico qu'Illustrator ne peut pas exporter

Illustrator ne sait pas écrire de fichiers ICO, et Exporter pour les écrans non plus. Chercher une option "exporter en ICO" dans Enregistrer sous, Exporter sous ou le panneau Exporter des éléments ne donne rien, et aucun plugin officiel n'en ajoute une. Exportez des PNG de 16, 32 et 48 px depuis le plan de travail icon, puis combinez-les :

  • Avec ImageMagick installé, une seule commande suffit : magick icon-16.png icon-32.png icon-48.png favicon.ico.
  • GIMP exporte directement en .ico via Fichier > Exporter sous et vous laisse choisir quel calque devient quelle taille.
  • Les générateurs de favicon en ligne acceptent les PNG et renvoient le .ico.
  • Beaucoup de chaînes de build génèrent le .ico à partir d'un PNG ou d'un SVG source, auquel cas le développeur n'a besoin que de votre 512 et de votre SVG.

Dans tous les cas, livrez les trois PNG avec le .ico, pour qu'il puisse être reconstruit sans votre fichier source.

Les balises à remettre au développeur

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Et le manifeste :

{
  "name": "Brand name",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Pour que le favicon SVG suive le thème du système, ajoutez un bloc de style dans le fichier SVG :

@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }

Questions

Ai-je encore besoin d'un favicon 16 x 16 ?

Oui, à l'intérieur du .ico. Les onglets des navigateurs et les listes de signets sur les écrans de densité standard s'affichent toujours à 16 px, et un 32 réduit paraît plus flou qu'un bitmap dessiné pour 16. Mettez 16, 32 et 48 dans le .ico, livrez le SVG pour les navigateurs qui le lisent, et le 16 reste utilisé là où il compte.

Quelle taille pour l'apple-touch-icon ?

180 x 180 px, opaque, avec des angles droits. iOS arrondit lui-même les coins et ignore la transparence, si bien qu'un symbole sur fond transparent ressort sur une tuile sombre. Un seul fichier couvre les iPhone et iPad actuels ; les anciennes tailles de 57, 72, 114, 120 et 152 px sont obsolètes et peuvent être ignorées.

Illustrator peut-il exporter des fichiers .ico ?

Non. Ni Enregistrer sous, ni Exporter sous, ni Exporter pour les écrans ne proposent l'ICO. Exportez les PNG de 16, 32 et 48 px depuis Illustrator et combinez-les avec ImageMagick, GIMP, un convertisseur en ligne ou l'outil de build du développeur. Livrez les PNG avec le .ico pour qu'il puisse être reconstruit plus tard sans revenir au fichier source.

Le favicon doit-il être le logo complet ou seulement le symbole ?

Le symbole. Un logotype à 16 px n'est qu'une tache, et une icône d'application est jugée à côté de dizaines d'autres symboles sans aucun nom en dessous. Utilisez le logomark, ou une seule lettre si la marque n'a pas de symbole, et donnez-lui un fond uni pour les icônes touch et maskable afin qu'il se lise comme une tuile plutôt que comme une forme flottante.

Un clic pour les fichiers de logo, pas pour les icônes

Anchr Ship, l'onglet d'export du panneau Anchr Tools, est conçu pour le package de logo plutôt que pour le jeu d'icônes. Il associe trois plans de travail, logomark, logotype et logo complet, génère des variantes noir et blanc à plat comme nouveaux plans de travail, et exporte chaque plan de travail en SVG, PNG en 2x avec transparence et PDF dans un seul dossier en une seule passe, jusqu'à 27 fichiers nommés d'après les noms des plans de travail. Il ne produit pas les tailles de favicon ni d'icône d'application. Pour les tailles du tableau ci-dessus, utilisez Exporter pour les écrans comme décrit ; Ship couvre les fichiers de logo SVG, PNG et PDF qui entrent dans la même livraison. Les deux formules incluent les cinq outils, avec un essai de 7 jours ; voir les tarifs.