Les fichiers produits
Un favicon n'est plus un fichier unique : chaque endroit où l'icône d'un site apparaît demande sa taille. L'outil dessine l'icône une fois en 512 pixels, puis la réduit par moitiés successives pour chaque taille, ce qui garde les contours nets.
| Fichier | Pixels | Sert à |
|---|---|---|
| favicon.ico | 16, 32, 48 | Onglets, favoris, outils anciens |
| favicon-32x32.png | 32 | Onglets, écrans haute densité |
| apple-touch-icon.png | 180 | Écran d'accueil d'un iPhone ou d'un iPad |
| icon-192.png | 192 | Manifeste, écran d'accueil Android |
| icon-512.png | 512 | Manifeste, écran de démarrage |
S'y ajoutent les PNG de 16 et 48 pixels et un fichier site.webmanifest, le manifeste d'application web (norme du W3C) qui déclare les icônes de 192 et 512 pixels. Ces tailles sont celles que l'on trouve couramment demandées ; elles couvrent les navigateurs et les écrans d'accueil actuels.
Le format ICO
Le fichier ICO, dont la structure est documentée par Microsoft, range plusieurs images dans un seul fichier. L'outil l'assemble lui-même, octet par octet, sans rien envoyer :
6 octets : 0, type 1, nombre d'images16 octets : taille, 32 bits, positionchacune un PNG completLes nombres sont écrits octet de poids faible en premier. Une largeur de 256 pixels s'écrit 0, la seule valeur qui ne tient pas sur un octet. Le favicon.ico de l'outil contient trois PNG, de 16, 32 et 48 pixels : son en-tête et ses entrées occupent 6 + 3 × 16 = 54 octets, et la première image commence au 55ᵉ octet.
Installer le favicon
- Téléchargez tous les fichiers et déposez-les à la racine du site.
- Copiez le code HTML de l'outil dans la section <head> de chaque page, ou du gabarit commun.
- Changez le nom du site dans le manifeste si besoin : c'est celui qu'affiche un téléphone sous l'icône.
Les fichiers ailleurs qu'à la racine ? Adaptez les chemins des balises et ceux du manifeste. Un gestionnaire de contenu qui a son propre réglage d'icône du site lui demande en général une seule image carrée : donnez-lui le PNG de 512 pixels.
Une icône lisible à 16 pixels
À 16 pixels, un logo détaillé devient une tache. Une ou deux lettres sur un fond contrasté restent lisibles : c'est pour cela que l'outil propose une lettre. Avec une image, choisissez une version simplifiée du logo, sans texte fin.
À 512 pixels, la lettre fait 62 % du côté, soit 317 pixels de corps, et les coins un rayon de 512 ÷ 5 ≈102 pixels.
Deux caractères prennent 46 % du côté, soit 236 pixels à 512 pixels, pour tenir dans le carré.
L'erreur fréquente
Un fichier ICO a son propre en-tête, que l'extension seule ne crée pas : un PNG renommé reste un PNG, et rien ne garantit qu'un logiciel l'accepte comme icône. Le favicon.ico produit ici est un vrai fichier ICO, qui contient ses PNG.
Questions fréquentes
Quelle taille doit faire un favicon ?
Il n'y a pas une taille unique : un onglet affiche l'icône en 16 ou 32 pixels, un écran d'accueil de téléphone en 180 ou 192 pixels. L'outil produit les tailles couramment demandées (16, 32, 48, 180, 192 et 512 pixels) et un favicon.ico qui contient les trois plus petites.
Faut-il encore un fichier favicon.ico ?
Il reste utile : la plupart des navigateurs le cherchent à la racine du site quand une page ne déclare aucune icône, et certains outils ne lisent que lui. Les PNG déclarés par les balises <link> prennent le relais ailleurs.
Mon image est-elle envoyée sur un serveur ?
Non. Les icônes sont dessinées et assemblées par votre navigateur, sur votre appareil, y compris le fichier ICO. Rien n'est transmis à Lycos.
Où placer les fichiers du favicon ?
À la racine du site, à côté de la page d'accueil, puis collez le code HTML dans la section <head> de chaque page. Si vous les placez ailleurs, adaptez les chemins des balises.
Pourquoi mon nouveau favicon ne s'affiche-t-il pas ?
Le navigateur garde souvent l'ancienne icône en cache. Rechargez la page en vidant le cache, ouvrez le site dans une fenêtre privée, ou ajoutez un paramètre de version à l'adresse de l'icône (favicon.ico?v=2).
Une erreur ? Signalez-la, nous la corrigeons.