Qu'est-ce que l'ICO ? Fichiers d'icône et favicons

L'ICO est le format qu'utilise Windows pour les icônes de programmes et de dossiers, et que le web utilise pour la petite icône de site affichée dans l'onglet du navigateur (le favicon). Ce qui le distingue des autres formats d'image, c'est qu'un seul fichier peut contenir plusieurs tailles de la même icône. Cet article explique la structure interne d'un fichier ICO, son évolution au fil des versions de Windows, l'histoire du favicon, les tailles nécessaires aujourd'hui et la bonne façon de produire des fichiers ICO.

Qu'est-ce que l'ICO ?

L'ICO (extension .ico) est un format conteneur défini par Microsoft pour les ressources d'icône. Un fichier ICO commence par un « répertoire d'icônes » qui liste chaque image du fichier (par exemple 16x16, 32x32 et 48x48 pixels) sous forme d'entrée distincte. Windows ou le navigateur choisit ensuite la taille la mieux adaptée à l'endroit où l'icône s'affiche.

Le type MIME officiel enregistré auprès de l'IANA est image/vnd.microsoft.icon, mais les logiciels Microsoft et de nombreux serveurs utilisent encore image/x-icon. Le format CUR des curseurs de souris est presque identique ; il indique 2 au lieu de 1 dans le champ de type du répertoire et stocke le point actif du curseur (hotspot).

Historique : des icônes Windows au favicon

• Windows 1.0 : les icônes étaient monochromes.
• Windows 3.0 : arrivée de la structure à répertoire contenant plusieurs images, telle qu'on la connaît aujourd'hui.
• 1995 : l'article « Icons » de John Hornick chez Microsoft documente en détail la structure ICO et conseille aux développeurs d'inclure au moins des images en 16x16 (16 couleurs), 32x32 (16 couleurs) et 48x48 (256 couleurs).
• Mars 1999 : Internet Explorer 5 devient le premier navigateur à prendre en charge les favicons. Un fichier favicon.ico placé à la racine du site s'affichait dans les favoris et la barre d'adresse.
• Windows XP : ajout d'un canal alpha 8 bits aux images 32 bits, ce qui permet des bords doux et semi-transparents.
• Windows Vista : ajout des images 256x256 et de la compression PNG à l'intérieur de l'ICO.
• 2003 : le type MIME image/vnd.microsoft.icon est soumis à l'IANA par un tiers.

Structure d'un fichier ICO

Répertoire d'icônes (ICONDIR)

Le fichier commence par un en-tête de 6 octets : un champ réservé (0), le type (1 pour les icônes, 2 pour les curseurs) et le nombre d'images. Suit une entrée de répertoire de 16 octets pour chaque image.

Entrée de répertoire (ICONDIRENTRY)

Comme les champs de taille ne font qu'un octet, une image contenue dans un ICO mesure au maximum 256x256 pixels.

Données d'image : BMP ou PNG

Dans un ICO classique, chaque image est un BMP sans son en-tête de fichier (un DIB). Selon l'article de Hornick, il contient une image en couleurs (le masque XOR) suivie d'un masque de transparence 1 bit (le masque AND) ; c'est pourquoi la hauteur inscrite dans l'en-tête correspond à la hauteur cumulée des deux masques, soit le double de la hauteur réelle. À partir de Windows XP, les images 32 bits portent leur canal alpha directement dans les données de pixels.

Depuis Windows Vista, une entrée peut aussi être un fichier PNG complet au lieu d'un BMP. Intégrer du PNG, surtout pour la taille 256x256, réduit fortement la taille du fichier. MDN signale que le PNG dans l'ICO n'était pas pris en charge avant Vista et peut poser problème dans d'anciens logiciels, mais les navigateurs et versions de Windows actuels lisent les deux types.

Quelles tailles faut-il ?

Icônes d'applications Windows

Les recommandations actuelles de Microsoft sur les icônes d'application indiquent qu'une application Win32 doit inclure au minimum les tailles 16x16, 24x24, 32x32, 48x48 et 256x256. Si Windows ne trouve pas de correspondance exacte, il réduit la taille immédiatement supérieure ; avec une image de 256 pixels présente, l'icône n'est jamais agrandie, seulement réduite. À l'échelle 100 %, par exemple, la barre de titre et les menus contextuels utilisent 16 pixels et la barre des tâches 24 ; à 200 %, ces valeurs passent à 32 et 48.

Favicons pour les sites web

Le web fonctionne différemment. Selon le HTML Standard, si une page ne comporte pas de lien rel="icon", les navigateurs peuvent demander /favicon.ico à la racine du site. Garder un favicon.ico à la racine reste donc une bonne pratique, mais cela ne suffit pas à lui seul :

• Google Search exige un favicon carré (1:1) d'au moins 8x8 pixels et en recommande un de plus de 48x48 pour un bon rendu sur les différentes surfaces.
• Les écrans d'accueil de l'iPhone et de l'iPad utilisent une apple-touch-icon de 180x180.
• Android et les PWA attendent des icônes de 192 et 512 pixels dans le manifeste de l'application web, ainsi qu'une version « maskable » pour les icônes adaptatives.
• Les navigateurs actuels prennent aussi en charge les favicons SVG ; un seul fichier vectoriel couvre toutes les tailles.

En pratique, placer les tailles 16, 32 et 48 pixels dans le favicon.ico couvre les navigateurs de bureau et les anciens systèmes, tandis que les grandes tailles sont fournies sous forme de fichiers PNG séparés.

Prise en charge par les systèmes, navigateurs et logiciels

Windows lit et écrit l'ICO nativement ; l'Explorateur, les raccourcis et le bureau l'utilisent tous. Selon MDN, Chrome, Edge, Firefox, Opera et Safari affichent les fichiers ICO. macOS utilise son propre format ICNS pour les icônes d'application, mais Aperçu ouvre les ICO. Des éditeurs comme GIMP ouvrent un ICO comme un fichier à calques, un calque par taille. MDN déconseille l'ICO dans les contenus web en général et note que les favicons ont évolué vers le PNG déclaré par un élément <link>.

Points forts et points faibles

Problèmes courants et solutions

Renommer un PNG en .ico ne suffit-il pas ?

Certains navigateurs le tolèrent, mais ce n'est pas un vrai ICO : il n'y a pas de répertoire d'icônes et Windows ne l'acceptera pas comme icône. La bonne méthode consiste à convertir l'image en véritable ICO. Nos outils PNG en ICO et JPG en ICO écrivent toujours des carrés de 16, 32 et 48 pixels et ajoutent 64, 128 et 256 quand votre image est assez grande. Chaque taille est intégrée en PNG, la transparence est donc conservée.

Le favicon est flou ou illisible

Les traits fins et les petits textes disparaissent en 16 pixels. Utilisez un signe simple, épais et bien contrasté ; si nécessaire, ne gardez que le symbole de votre logo. Une source carrée d'au moins 256x256 pixels, idéalement 512x512, donne le meilleur résultat.

Une image non carrée paraît écrasée ou étirée

Les icônes sont carrées. Nos outils n'étirent jamais l'image : ils la centrent dans un carré en conservant ses proportions et laissent les bords transparents. Pour obtenir un carré parfait, découpez d'abord une zone carrée avec l'outil rogner une image.

Le nouveau favicon ne s'affiche pas

Les navigateurs gardent les favicons longtemps en cache. Renommer le fichier ou ajouter un paramètre de version (/favicon.ico?v=2), et vérifier que le serveur renvoie le bon type MIME, règle généralement le problème. L'icône affichée dans les résultats de Google Search ne se met à jour qu'après une nouvelle exploration du site.

Windows affiche toujours l'ancienne icône

Windows conserve les icônes dans un cache séparé. Recompiler l'application et recréer le raccourci, ou se déconnecter puis se reconnecter, suffit souvent.

Conseils de conversion

• Un seul ICO ne suffit pas pour un site web : le générateur de favicon produit d'un coup favicon.ico (16, 32 et 48 pixels), favicon-48x48.png, apple-touch-icon.png (180 pixels), icon-192.png, icon-512.png, une version maskable icon-512-maskable.png et site.webmanifest, plus icon.svg quand la source est un SVG. Il fournit aussi l'extrait de code à coller dans la balise <head> de votre page.
• L'icône Apple a besoin d'un fond opaque : iOS affiche les zones transparentes en noir et arrondit lui-même les coins ; le générateur de favicon remplit donc l'apple-touch-icon avec la couleur de fond de votre choix.
• Si votre logo est un SVG : générez un grand PNG avec SVG en PNG puis convertissez-le en ICO, ou confiez directement le SVG au générateur de favicon.

Nos outils ICO et favicon fonctionnent dans votre navigateur ; votre image n'est pas envoyée et ne quitte jamais votre appareil.

Questions fréquentes

Quelle est la taille maximale d'une image ICO ?

Les champs de largeur et de hauteur d'une entrée de répertoire font un octet chacun, et 0 signifie 256. Une image contenue dans un ICO mesure donc au maximum 256x256 pixels.

Faut-il utiliser l'ICO ou le PNG pour son favicon ?

Les deux. Un favicon.ico à la racine, avec les tailles 16, 32 et 48 pixels, sert les anciens navigateurs et les requêtes automatiques ; déclarez des icônes PNG (et éventuellement SVG) avec des balises <link> pour les navigateurs actuels et les appareils mobiles.

L'ICO gère-t-il la transparence ?

Oui. Les anciens ICO utilisent un masque 1 bit, les images 32 bits disposent d'un canal alpha complet depuis Windows XP, et le PNG intégré gère la transparence depuis Vista.

Comment convertir un fichier ICO en PNG ?

Ajoutez votre ICO dans le convertisseur d'images et choisissez PNG comme format de sortie. Si le fichier contient plusieurs tailles, c'est la plus grande qui est utilisée.

Les fichiers ICO sont-ils utilisés sur Mac ?

macOS utilise le format ICNS pour les icônes d'application. Pour les sites web, le favicon.ico et les icônes PNG fonctionnent dans les navigateurs de tous les systèmes d'exploitation.

Sources

• Microsoft Learn (archive) : Icons, John Hornick, 1995
• Microsoft Learn : Construct your Windows app's icon
• WHATWG HTML Standard : Link type "icon"
• Google Search Central : Define a favicon to show in search results
• MDN : Image file type and format guide
• Wikipedia : ICO (file format)
• Wikipedia : Favicon