Générateur de favicons — Créez des fichiers favicon.ico et des icônes au format PNG à partir d'un texte, d'un emoji ou d'une image.

Qu'est-ce que le générateur de favicons ?

Une favicon est la petite icône qui s'affiche dans les onglets du navigateur, les favoris et les résultats de recherche, à côté du nom de votre site. Une bonne favicon permet de repérer facilement votre onglet parmi tant d'autres.

Ce générateur crée votre icône sur un canevas dans toutes les tailles dont vous avez besoin et vous permet de télécharger chaque fichier, y compris un fichier « favicon.ico » contenant plusieurs tailles, ainsi que les balises de lien à ajouter à votre page.

Pourquoi utilise-t-on un générateur de favicons ?

Tout savoir sur les tailles des favicons

favicon.ico est le fichier classique situé à la racine de votre site. Cet outil regroupe des versions de 16, 32 et 48 pixels dans un seul fichier ICO. Les fichiers PNG 16×16 et 32×32 sont adaptés aux navigateurs modernes, et le format 32×32 offre un rendu plus net sur les écrans haute densité. Le fichier « apple-touch-icon.png » de 180×180 est utilisé lorsqu'un utilisateur ajoute votre site à l'écran d'accueil d'un iPhone ou d'un iPad.

Les fichiers PNG de 192×192 et 512×512 correspondent aux tailles utilisées par Android et les applications Web installables ; indiquez-les dans le manifeste de votre application Web. Les moteurs de recherche peuvent également afficher une favicon dans leurs résultats, et Google demande une icône carrée dont la taille est un multiple de 48 pixels, ce que couvrent les fichiers de 48 et 192 pixels.

Comment utiliser le générateur de favicons

1. Choisissez « Texte » ou « Image ». Pour le texte, saisissez un ou deux caractères ou un emoji, puis sélectionnez les couleurs. Pour une image, choisissez un fichier.
2. Choisissez une forme : carrée, arrondie ou circulaire.
3. Consultez les aperçus pour chaque taille. Les petites tailles sont affichées à leur taille réelle en pixels.
4. Téléchargez les fichiers dont vous avez besoin, ou utilisez l'option « Tout télécharger », puis copiez l'extrait de code HTML dans la balise <head> de votre page.

Quelques conseils simples

• Un ou deux caractères s'affichent mieux à 16 pixels. Les mots longs apparaissent flous.
• Veillez à créer un contraste marqué entre l'icône et son arrière-plan afin qu'elle reste lisible aussi bien sur les onglets clairs que sur les onglets foncés.
• Pour les logos comportant de nombreux détails, utilisez une version simplifiée ou uniquement l'initiale.
• Placez les fichiers à la racine de votre site pour que les liens contenus dans l'extrait fonctionnent, ou modifiez les chemins d'accès en fonction de vos dossiers.

Restrictions et confidentialité