Créer un favicon
Fabriquez un favicon.ico à partir de n'importe quelle image, avec toutes les tailles qu'un navigateur réclame réunies dans un seul fichier.
Créer un favicon sans rien envoyer
Un favicon est la petite image que le navigateur affiche dans l'onglet, dans les favoris et à côté d'un raccourci. Le fichier classique pour cela est favicon.ico, qui n'est pas vraiment une image : le conteneur ICO renferme plusieurs vignettes carrées, et le navigateur prend la taille dont il a besoin. Cette page ouvre le convertisseur d'images avec la sortie ICO et les quatre tailles habituelles déjà sélectionnées : déposez un logo et récupérez ce fichier directement.
Tout se passe dans votre navigateur. Les vignettes sont dessinées sur un canvas et le conteneur est assemblé octet par octet dans la page : votre logo ne quitte jamais la machine, ce qui compte tant que la charte n'est pas publique.
Ce que contient le fichier
| Taille | Où le navigateur l'utilise |
|---|---|
| 16 px | L'onglet et la liste des favoris |
| 32 px | Écrans haute densité, barre d'adresse, onglets épinglés |
| 48 px | Raccourcis Windows et certains contextes de bureau |
| 256 px | Grandes icônes de raccourci, et tout ce qui agrandit l'icône |
Le menu Tailles de l'icône propose aussi le jeu classique de trois, « 16, 32 et 48 px », ou « 256 px uniquement » et « 32 px uniquement » quand vous savez exactement ce qu'il vous faut. Comme ces vignettes sont des carrés fixes, ni Qualité ni Redimensionner ne s'appliquent ici, et la page les masque.
Partir de la bonne image
- Le carré l'emporte sur le panoramique. Une image non carrée est insérée dans le carré avec des marges transparentes : un logo large se retrouve donc tout petit au centre. Recadrez-le d'abord en carré, ou n'utilisez que le symbole plutôt que le logo complet avec son texte.
- Le simple l'emporte sur le détaillé. À 16 px, une ligne de texte n'est plus qu'une tache grise. Les favicons les plus reconnaissables sont une lettre, une forme ou une silhouette.
- Donnez-lui du contraste. L'icône se pose sur le fond du navigateur lui-même, clair dans un thème et sombre dans l'autre. Une forme qui ne tient que sur du blanc disparaît en mode sombre.
- Voyez grand au départ. Fournissez au moins une image de 256 px pour que la plus grande vignette ne soit pas agrandie ; les petites naissent d'une réduction, et c'est là que le détail se perd en douceur.
L'installer sur votre site
Déposer favicon.ico à la racine du site suffit à tous les navigateurs, car ils y regardent tous par défaut. Pour être explicite, ou pour servir un PNG en parallèle, ajoutez une balise link dans le head de la page : <link rel="icon" href="/favicon.ico" sizes="any">. Beaucoup de sites associent au .ico un PNG de 180 px pour apple-touch-icon, que vous pouvez aussi produire ici en remettant la sortie sur PNG et en redimensionnant.
Si l'ancienne icône persiste après le remplacement du fichier, c'est le cache et non un fichier défectueux : les navigateurs conservent les favicons très longtemps. Un rechargement forcé, ou l'ajout de ?v=2 à la balise link, règle la question.
D'autres formats avec le même outil
Le convertisseur écrit aussi du PNG, du JPG et du WebP, et peut compresser jusqu'à une taille cible en Ko. Si vous cherchiez une conversion simple plutôt qu'une icône, PNG en JPG et PNG en WebP démarrent directement sur ces formats.