ICO et favicon : créer l’icône de ton site
Le favicon est la petite icône qui identifie ton site dans un onglet ou une liste de résultats. Voici les tailles à prévoir et comment créer un fichier ICO.
Ce qu’est un favicon, et où il apparaît
Le favicon est la petite image qui accompagne ton site partout où il est listé. Tu la vois dans l’onglet du navigateur, à côté du titre de la page, mais aussi dans les favoris, l’historique et les raccourcis sur l’écran d’accueil d’un téléphone. Sur mobile, Google affiche également cette icône à côté de chaque résultat de recherche.
C’est un détail minuscule, mais il compte : parmi dix onglets ouverts, c’est souvent lui qui te permet de retrouver la bonne page. Un site sans favicon affiche une icône générique, ce qui donne une impression d’inachevé.
Le format ICO : un fichier, plusieurs tailles
Le format ICO est le format historique des icônes, popularisé par Windows. Sa particularité est de pouvoir contenir plusieurs versions de la même image dans un seul fichier, à des tailles différentes. Le navigateur ou le système choisit celle qui convient à l’endroit où l’icône s’affiche, ce qui évite d’agrandir une petite image, avec un flou à la clé.
Un fichier favicon.ico déposé à la racine d’un site est encore cherché automatiquement par de nombreux navigateurs et outils, même si aucune balise ne le déclare. C’est pourquoi on le prévoit toujours, y compris à l’époque des favicons en PNG.
Les tailles à prévoir aujourd’hui
Une base simple couvre la quasi-totalité des cas :
| Fichier | Taille | Usage |
|---|---|---|
favicon.ico |
16, 32 et 48 px dans le même fichier | onglets, favoris, outils qui cherchent l’adresse classique |
| PNG | 192 × 192 px | icône de site pour les téléphones Android et les applications web |
| PNG | 512 × 512 px | grande icône, écran de démarrage |
apple-touch-icon |
180 × 180 px | raccourci sur l’écran d’accueil des appareils Apple |
Google Search recommande de fournir un favicon dont la taille est un multiple de 48 pixels (48, 96, 144…), carré, pour qu’il s’affiche correctement dans les résultats. C’est une recommandation de Google : elle ne remplace pas les autres tailles, elle s’y ajoute.
Partir d’un bon fichier source
La qualité d’un favicon se joue avant la conversion, sur l’image de départ :
- Un carré parfait. Une image rectangulaire est déformée ou coupée. Nous avons vérifié qu’une image de 300 × 150 px donne un fichier ICO lui aussi rectangulaire : mieux vaut donc recadrer en carré avant de convertir.
- Une grande taille de départ, par exemple 512 × 512 pixels, que l’on réduit ensuite. Agrandir une petite image donne un résultat flou.
- Un motif simple. À 16 pixels de côté, seuls les gros aplats et les formes nettes restent lisibles. Une initiale, un symbole épuré ou un logo simplifié fonctionnent mieux qu’un logo détaillé avec un texte.
- Des marges réduites, pour que le dessin occupe la place disponible, mais sans toucher les bords.
- Un fond transparent si l’icône n’est pas un carré plein, ce qui suppose de partir d’un PNG. Notre guide sur le PNG et la transparence explique le principe.
Si ton image n’est pas carrée, tu peux la découper avec l’outil Rogner, puis ajuster ses dimensions avec l’outil Redimensionner avant de la convertir.
Créer un ICO à partir d’un PNG avec ConvertiPic
- Prépare un PNG carré, de préférence de 512 × 512 pixels.
- Ouvre la page PNG en ICO et dépose ton fichier.
- Lance la conversion et télécharge le fichier
.ico.
Nous avons vérifié ce que contient le fichier obtenu. À partir d’un PNG carré de 512 pixels, l’ICO contient sept tailles : 16, 24, 32, 48, 64, 128 et 256 pixels. Avec une source de 64 pixels, il s’arrête à 64 ; avec une source de 20 pixels, il ne contient que la taille 16. Plus la source est grande, plus l’ICO est complet. C’est une raison de plus de démarrer d’une image de 512 pixels.
Déclarer les icônes dans le HTML
Le fichier ne suffit pas : il faut aussi l’annoncer dans l’en-tête de chaque page, entre les balises head. Voici, à titre d’exemple, la forme des déclarations qu’utilise ConvertiPic :
<link rel="icon" href="https://exemple.fr/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" href="https://exemple.fr/icon-192.png" sizes="192x192">
<link rel="apple-touch-icon" href="https://exemple.fr/apple-touch-icon.png">
<link rel="manifest" href="https://exemple.fr/manifest.webmanifest">
Le premier déclare l’ICO, le deuxième le PNG de 192 pixels, le troisième l’icône des appareils Apple. La dernière ligne relie le fichier de manifeste, qui permet de décrire l’application web (nom, couleurs, icônes) pour l’installer sur un écran d’accueil. Remplace « exemple.fr » par l’adresse de ton propre site : les chemins commençant par une barre oblique, comme /favicon.ico, fonctionnent aussi.
Vérifier que ton favicon fonctionne
Une fois les fichiers en ligne, contrôle le résultat en trois gestes :
- Ouvre l’adresse du fichier dans ton navigateur, par exemple
ton-site.fr/favicon.ico. Si l’icône s’affiche ou se télécharge, le fichier est bien accessible. - Charge ta page dans une fenêtre privée, qui n’a pas d’ancienne icône en mémoire, et regarde l’onglet.
- Ajoute la page à tes favoris, puis regarde l’icône dans la liste : c’est l’endroit où les défauts de lisibilité se voient le mieux.
Pense aussi à l’affichage sur un fond sombre. Un onglet de navigateur en mode sombre peut faire disparaître une icône noire sur fond transparent. Si ton logo est foncé, place-le sur un carré de couleur claire, ou choisis une variante lisible sur les deux fonds.
Et le favicon en SVG ?
Les navigateurs récents acceptent aussi un favicon au format SVG, un format vectoriel qui reste net à toutes les tailles et qui peut même s’adapter au mode sombre. La prise en charge n’est cependant pas aussi universelle que celle de l’ICO et du PNG. La solution prudente consiste à garder un ICO et un PNG comme base, et à ajouter un SVG en complément si tu le souhaites.
Les erreurs fréquentes
- Oublier de vider le cache. Les navigateurs gardent les favicons très longtemps : après un changement, l’ancienne icône peut rester affichée. Teste dans une fenêtre privée.
- Utiliser une image illisible en petit. Ce qui est beau à 512 pixels peut devenir une tache à 16.
- Fournir un fichier rectangulaire, qui sera déformé.
- Renommer un PNG en
.ico. Changer l’extension ne change pas le contenu : il faut réellement convertir le fichier. - Oublier l’icône Apple, ce qui donne une capture d’écran de la page en guise d’icône sur l’écran d’accueil d’un iPhone.
Questions fréquentes
Qu’est-ce qu’un favicon ?
Le favicon est la petite icône qui représente ton site : elle s’affiche dans l’onglet du navigateur, dans les favoris, dans l’historique et, sur mobile, dans les résultats de recherche de Google. Son nom vient de « favorite icon ».
Quelle taille doit avoir un favicon ?
Pars d’une image carrée de 512 pixels, puis fournis un fichier ICO contenant 16, 32 et 48 pixels, ainsi qu’un PNG de 192 pixels et une icône de 180 pixels pour Apple. Google demande une taille multiple de 48 pixels.
Un PNG peut-il servir de favicon ?
Oui, les navigateurs actuels acceptent le PNG comme favicon. Le fichier ICO reste utile pour les cas où un navigateur ou un outil cherche directement l’adresse traditionnelle favicon.ico à la racine du site.
Pourquoi mon favicon n’apparaît-il pas ?
Les navigateurs gardent l’icône en mémoire et mettent du temps à la mettre à jour. Vérifie que le fichier est accessible à son adresse, que la balise est bien dans l’en-tête, puis vide le cache ou essaie une fenêtre privée.
