Qu'est-ce que ICO et favicon
Ouvrez n'importe quel site web, la petite icône sur l'onglet du navigateur est le favicon. C'est généralement un fichier .ico, parfois aussi un PNG. Le favicon est le « visage » du site, par lequel les utilisateurs identifient rapidement votre site parmi de nombreux onglets.
Pourquoi le format ICO
Bien que les navigateurs modernes supportent le PNG comme favicon, le format ICO conserve des avantages irremplaçables :
- Meilleure compatibilité : les anciens navigateurs et les raccourcis bureau Windows ne reconnaissent que l'ICO
- Emballage multi-tailles : un seul fichier ICO peut contenir 16x16, 32x32, 48x48 etc., le système choisit automatiquement
- Signets, icônes PWA : certains scénarios nécessitent encore l'ICO
Outil de conversion d'image en ICO DocsAll
Utilisez l'outil Image vers ICO pour générer rapidement :
- Préparez une image source carrée (PNG 256x256 ou plus recommandé)
- Ouvrez l'outil de conversion ICO, téléchargez l'image source
- L'outil génère automatiquement un ICO multi-tailles
- Téléchargez le fichier .ico
Configuration du favicon
Configuration de base
Placez favicon.ico à la racine du site, le navigateur le reconnaîtra automatiquement. Vous pouvez aussi le déclarer explicitement avec une balise link dans le head du HTML, avec l'attribut rel défini à icon et href pointant vers favicon.ico.
Adaptation multi-appareils
Pour les sites modernes, il est recommandé de configurer plusieurs tailles :
- favicon.ico : par défaut, à la racine
- apple-touch-icon.png (180x180) : pour l'ajout à l'écran d'accueil iOS
- icon.png (192x192, 512x512) : pour PWA
Recommandations de conception de l'image source
- Utiliser PNG : supporte la transparence, l'ICO converti depuis un PNG est de meilleure qualité
- Carré : 16x16, 32x32 sont les tailles d'affichage, une image source plus grande facilite la mise à l'échelle
- Simplicité : à petite taille, les motifs complexes deviennent flous, utilisez des formes simples et des couleurs de marque
- Fond transparent : évitez les carrés à fond blanc, intégrez-vous à l'onglet du navigateur
Problèmes courants
Le favicon ne se met pas à jour
Le cache du navigateur est tenace, si le favicon ne s'affiche pas après modification, forcez le rafraîchissement (Ctrl+F5) ou ajoutez un paramètre de version au chemin, par exemple favicon.ico?v=2.
Icône floue
L'image source est trop petite ou non carrée et étirée. Utilisez un PNG carré de 256x256 ou plus pour régénérer.
Un favicon clair rend le site plus professionnel. Avec l'outil ICO, c'est fait en quelques minutes, ne laissez pas l'onglet vide.