Créer un fichier ICO : icônes Windows et favicons

Les fichiers ICO sont à la base des icônes d’applications Windows et des favicons de sites Web. Contrairement aux formats d’image qui ne contiennent qu’une seule image, un fichier ICO peut réunir plusieurs tailles dans un même fichier. Windows et les navigateurs peuvent ainsi choisir l’icône la plus proche de la taille d’affichage demandée. Ce guide présente les bases du format ICO, puis les étapes de création d’icônes professionnelles.

Qu’est-ce que le format ICO ?

ICO est un format conteneur développé par Microsoft spécialement pour les icônes. Sa particularité : un seul fichier .ico peut stocker plusieurs images de tailles et de profondeurs de couleur différentes.

Lorsque Windows ou un navigateur Web doit afficher une icône, il recherche dans le fichier ICO l’image dont la taille correspond le mieux au besoin, puis l’utilise. Fournir plusieurs tailles peut réduire les mises à l’échelle. Vérifiez le rendu à 16×16, 32×32 et 256×256 pixels ; les détails fins peuvent malgré tout perdre en lisibilité aux petites tailles.

Principales caractéristiques du format ICO :

• Un conteneur regroupant plusieurs images intégrées
• Une taille et une profondeur de couleur pouvant varier d’une image à l’autre
• Une prise en charge de la transparence complète grâce à l’encodage PNG-32

Vérifiez que la destination accepte le format ICO et les tailles que vous fournissez.

Pourquoi utiliser des fichiers ICO

Pour les applications Windows

Windows utilise les fichiers ICO dans de nombreuses parties du système d’exploitation :

• Raccourcis du bureau et icônes d’applications
• Icônes de la barre des tâches
• Icônes du menu Démarrer
• Icônes associées aux types de fichiers
• Icônes du sélecteur de fenêtres Alt+Tab

Sans fichier ICO adapté, votre application affiche l’icône générique de Windows, ce qui donne immédiatement l’impression d’un produit inachevé.

Pour les favicons de sites Web

Chaque site Web a besoin d’un favicon, la petite icône qui apparaît dans :

• Les onglets du navigateur
• Les listes de favoris
• L’historique du navigateur
• Les raccourcis de l’écran d’accueil sur mobile
• La barre d’adresse

Vérifiez que la destination accepte le format ICO et les tailles que vous fournissez.

Comment créer un fichier ICO

Pour convertir un PNG en ICO en choisissant les tailles des icônes, utilisez le convertisseur PNG en ICO :

1. Importez un PNG de 20 Mo maximum.
2. Sélectionnez 16, 32, 48, 64, 128 ou 256 px ; les tailles 32, 64 et 128 sont présélectionnées.
3. Lancez la conversion, téléchargez puis extrayez icons.zip.
4. Choisissez un fichier ICO d’une seule taille ou favicon.ico, qui contient toutes les tailles sélectionnées.

Les images sources rectangulaires sont ajustées proportionnellement dans le carré avec des marges transparentes. Préparez d’abord un recadrage carré si vous souhaitez que le sujet occupe davantage l’icône. Pour obtenir un ensemble fixe de fichiers pour site Web comprenant des PNG et un manifeste, le générateur de favicon accepte une seule image et ne propose pas de sélection des tailles.

Les tailles à prévoir selon l’usage

Choisissez les tailles en fonction de la destination réelle. Ce site propose 16, 32, 48, 64, 128 et 256 px, mais pas 24 px. Incluez les tailles nécessaires à votre application ou à l’affichage dans le navigateur, puis examinez la plus petite. Aucun ensemble de tailles ne garantit une compatibilité ou une netteté parfaites dans tous les contextes.

Bonnes pratiques de conception des icônes

Privilégier la simplicité

Les icônes s’affichent à de très petites tailles. Un dessin détaillé et soigné en 512×512 peut devenir une tache méconnaissable en 16×16. Une icône efficace suit des règles différentes de celles des autres créations visuelles :

• Des formes simples et marquées — Privilégiez des formes géométriques bien visibles plutôt que des illustrations complexes
• Un contraste élevé — L’icône doit rester lisible sur des fonds clairs et sombres
• Une silhouette nette — La forme générale doit être reconnaissable même sans les détails de couleur
• Peu de couleurs — 3 à 5 couleurs suffisent généralement ; trop de couleurs brouillent le rendu aux petites tailles

Commencer par la plus petite taille

L’erreur la plus courante consiste à créer une belle grande icône en supposant qu’elle restera réussie une fois réduite. Procédez plutôt ainsi :

1. Réfléchissez dès le départ à son apparence en 16×16
2. Créez le dessin en gardant cette contrainte à l’esprit
3. Utilisez les tailles supérieures pour ajouter des détails et affiner le rendu
4. Vérifiez toutes les tailles avant de finaliser

Éviter les détails fins

À petite taille, certains éléments posent problème :

• Traits fins — Ils disparaissent ou deviennent indistincts ; prévoyez une épaisseur minimale de 2 px
• Petits caractères — Ils sont illisibles en dessous d’environ 32 px ; évitez le texte dans les icônes si possible
• Dégradés — Réussis en grand, ils peuvent se transformer en aplats indistincts à petite taille
• Ombres portées — Elles nuisent souvent à la netteté des petites icônes

Convertir des images existantes en ICO

À partir d’un PNG, le cas le plus courant

PNG est le format source idéal pour une conversion en ICO :

• Un PNG carré avec un fond transparent
• Une haute résolution de 512×512 ou plus
• Des contours nets et lisses
• Aucun artefact de compression

À partir d’un JPG

Le JPG peut convenir, mais présente des limites :

• Aucune transparence : les zones qui doivent être transparentes nécessitent une intervention manuelle
• Un recadrage carré est nécessaire si l’image ne l’est pas déjà
• Les artefacts de compression JPG peuvent devenir visibles à petite taille

À partir d’un SVG

Le SVG constitue un excellent point de départ, car il peut être redimensionné à volonté :

• Exportez d’abord le SVG en PNG haute résolution, en 512×512 ou 1024×1024
• Convertissez ensuite le PNG en ICO
• Examinez le PNG exporté et chaque taille ICO ; une source vectorielle ne garantit pas que les détails fins resteront visibles aux petites tailles de sortie

Intégrer un favicon en HTML sur un site Web

Intégration de base

Voici un lien de favicon simple :

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Placez-le dans la section <head> de votre HTML. La plupart des navigateurs trouvent aussi automatiquement un fichier favicon.ico à la racine du site sans déclaration HTML, mais l’ajout de la balise de lien reste plus fiable.

Intégration moderne avec plusieurs formats

Pour obtenir les meilleurs résultats sur les différentes plateformes et appareils, utilisez plusieurs formats :

<!-- Favicon standard -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Favicons PNG pour les navigateurs modernes -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Icône Apple pour l’écran d’accueil iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Mettez en ligne chaque fichier référencé et testez l’icône dans les navigateurs et sur les appareils visés.

Manifeste d’application Web

Pour les applications Web progressives (PWA), ajoutez aussi un fichier manifeste :

<link rel="manifest" href="/site.webmanifest">

Le manifeste référence des icônes plus grandes, en 192×192 et 512×512, utilisées lorsque le site est installé comme application sur l’écran d’accueil.

Intégrer une icône dans une application Windows

Intégration dans les ressources de l’application

Pour les développeurs d’applications de bureau, le fichier ICO s’intègre directement dans l’application :

• Dans Visual Studio, ajoutez le fichier .ico comme ressource
• Référencez-le dans le manifeste de l’application
• Windows utilise automatiquement la taille adaptée au contexte d’affichage

Association aux types de fichiers

Si vous souhaitez une icône spécifique pour un type de fichier, par exemple .myapp :

• Enregistrez l’extension de fichier dans le Registre Windows
• Indiquez l’exécutable de l’application ou un fichier ICO distinct
• L’icône apparaît dans l’Explorateur de fichiers pour tous les fichiers de ce type

Résoudre les problèmes de qualité

Icônes floues

Cause : Le fichier ICO ne contient pas la taille demandée ; Windows redimensionne donc l’image dont la taille est la plus proche.

Solution : Incluez toutes les tailles couramment nécessaires : 16, 32, 48 et 256. Vérifiez celles que contient votre ICO avec un outil comme IcoFX ou Resource Hacker.

Contours crénelés

Cause : L’image utilise une transparence binaire sur 1 bit au lieu d’un canal alpha complet.

Solution : Utilisez des fichiers sources PNG-32 avec un canal alpha complet. Le format ICO moderne prend en charge l’encodage PNG-32 dans son conteneur.

Le favicon ne s’affiche pas dans le navigateur

Cause : Le cache du navigateur, un code HTML incorrect ou un chemin de fichier erroné.

Solution :

1. Videz le cache du navigateur et forcez l’actualisation avec Ctrl+Shift+R ou Cmd+Shift+R
2. Vérifiez que la balise <link> se trouve dans <head> et que le chemin href est correct
3. Assurez-vous que le fichier est accessible en ouvrant directement son URL
4. Vérifiez que le format du fichier est valide avec un outil de validation de favicon

Tester vos icônes

Avant la mise à disposition, vérifiez le rendu des icônes dans tous les contextes :

Contextes d’affichage Windows

• Barre des tâches : petite taille, généralement 24×24 obtenue à partir de 32×32
• Raccourci du bureau : taille moyenne, généralement 48×48
• Affichage en grandes icônes dans l’Explorateur de fichiers : 96×96 ou 128×128
• Très grandes icônes : 256×256
• Menu Démarrer de Windows 11 : tailles variées

Contextes d’affichage dans les navigateurs

• Onglet du navigateur : 16×16 ou 32×32
• Barre de favoris
• Liste de l’historique du navigateur
• Sur mobile : icône de raccourci sur l’écran d’accueil

Vérification sur différents fonds

• Fonds clairs, le contexte le plus courant
• Mode sombre et fonds sombres, de plus en plus importants
• Barres des tâches et barres d’outils colorées

Questions fréquentes

Quelles tailles un fichier ICO doit-il contenir ?

Choisissez les tailles en fonction de la destination réelle. Ce site propose 16, 32, 48, 64, 128 et 256 px, mais pas 24 px. Incluez les tailles nécessaires à votre application ou à l’affichage dans le navigateur, puis examinez la plus petite. Aucun ensemble de tailles ne garantit une compatibilité ou une netteté parfaites dans tous les contextes.

Puis-je utiliser un PNG à la place d’un ICO pour un favicon ?

Oui, les navigateurs modernes prennent en charge les favicons PNG avec <link rel="icon" type="image/png" ...>. Toutefois, ICO offre la compatibilité la plus large, notamment avec les anciens navigateurs, les clients de messagerie et certains outils tiers qui recherchent par défaut un fichier favicon.ico à la racine du site.

Pourquoi mon icône est-elle floue ?

Votre fichier ICO ne contient pas la taille que Windows ou le navigateur cherche à afficher. Incluez toutes les tailles nécessaires. Vous pouvez vérifier le contenu d’un fichier ICO avec des outils comme IcoFX, Resource Hacker ou des inspecteurs ICO en ligne.

Les icônes doivent-elles toujours être carrées ?

Les images rectangulaires sont ajustées proportionnellement dans le carré avec des marges transparentes. Ce convertisseur ne les recadre pas et ne les étire pas automatiquement.

Comment créer une icône transparente ?

Partez d’un PNG qui contient déjà de la transparence. Ce convertisseur conserve le canal alpha de la source sans option à activer. Examinez chaque taille après l’extraction du ZIP ; les petits contours peuvent changer lors du redimensionnement.

Conclusion

Créer un fichier ICO adapté devient simple dès que vous comprenez qu’il s’agit d’un conteneur réunissant plusieurs tailles, plutôt que d’une seule image. Partez d’un PNG carré, net et de haute résolution, incluez toutes les tailles nécessaires à votre usage, testez les différents contextes d’affichage et examinez le résultat à chaque taille prévue.

Pour créer des fichiers ICO à partir d’une image PNG, JPG, WebP, GIF ou SVG prise en charge, utilisez notre convertisseur ICO : il génère automatiquement les tailles proposées.

Créer un fichier ICO →

---

Outils associés : Générateur de favicon | Redimensionner une image | Convertisseur PNG