Aller au contenu
SPCXTools

Générateur de Favicon

Transformez un logo, une lettre ou un emoji en un pack complet de favicons avec le code HTML pour l'intégrer.

Fonctionne en local — vos fichiers ne quittent pas votre appareil

Chargement de l’outil…

Comment utiliser : Générateur de Favicon

  1. 1Choisissez À partir d'une image et sélectionnez votre logo (un PNG ou SVG carré est recommandé), ou choisissez À partir d'un texte et saisissez une lettre, des initiales ou un emoji.
  2. 2Ajustez l'arrondi, la marge et les couleurs. Les aperçus montrent l'icône à sa taille réelle.
  3. 3Cliquez sur Télécharger le pack de favicons pour obtenir un fichier ZIP avec tous les fichiers.
  4. 4Placez les fichiers à la racine de votre site web et collez le code HTML dans la balise <head> de vos pages.

Créer un favicon en quelques secondes

Un favicon est la petite icône qui apparaît dans les onglets du navigateur, les favoris, l'historique, les résultats de recherche sur mobile et sur l'écran d'accueil lorsque quelqu'un enregistre votre site. Il aide les visiteurs à retrouver votre onglet parmi des dizaines d'autres et donne un aspect professionnel même à un petit site web. Ce générateur de favicon crée tous les fichiers dont vous avez besoin à partir d'une seule image — ou d'une lettre ou d'un émoji si vous n'avez pas encore de logo — et vous fournit le code HTML pour les ajouter à votre site.

Fonctionnalités

  • À partir d'une image : PNG, JPG, SVG, WebP et plus.
  • À partir d'un texte ou d'un émoji : initiales ou émoji sur fond coloré.
  • Coins arrondis et marges pour adapter parfaitement l'icône aux onglets et aux écrans d'accueil.
  • Aperçus en direct à 16, 32, 64 et 128 pixels.
  • Pack complet : favicon.ico multi-tailles, icônes PNG, icône Apple Touch, icônes Android et web manifest.
  • Code HTML prêt à copier pour les balises link.
  • Privé : généré entièrement dans votre navigateur.

Guide des tailles de favicon

Fichier Taille Utilisé par
favicon.ico 16, 32, 48 px Tous les navigateurs, raccourcis Windows, anciens navigateurs (fallback)
favicon-16x16.png 16 px Onglets du navigateur
favicon-32x32.png 32 px Onglets sur écrans haute résolution, barre des tâches
apple-touch-icon.png 180 px Écran d'accueil iPhone et iPad
android-chrome-192x192.png 192 px Écran d'accueil Android
android-chrome-512x512.png 512 px Écran de démarrage Android, installation PWA

Conseils de design

  • Simplifiez. Utilisez le symbole de votre logo, pas le logo complet avec le nom de l'entreprise.
  • Optimisez le contraste. L'icône doit ressortir sur les thèmes clairs et sombres du navigateur.
  • Testez à 16 px. Si vous ne la reconnaissez pas dans le plus petit aperçu, simplifiez-la davantage.
  • Remplissez le carré. Les icônes avec beaucoup d'espace vide paraissent minuscules dans les onglets ; réduisez les marges.

Outils associés

Convertissez d'abord un logo vectoriel en PNG haute résolution avec SVG en PNG, modifiez la taille d'une image existante avec Redimensionner une image, ou changez de format d'image avec le Convertisseur d'image.

Questions fréquentes

Quels fichiers sont inclus ?
favicon.ico (16, 32 et 48 px en un seul fichier), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, un fichier site.webmanifest et un extrait HTML avec les balises link correspondantes.
Quelle image convient le mieux pour un favicon ?
Une image simple et carrée, avec des formes nettes et peu de détails. Les favicons étant souvent affichés en 16×16 pixels seulement, le texte et les lignes fines disparaissent. Le symbole d'un logo sans son texte, ou une simple lettre, fonctionne bien mieux qu'un logo complet. Utilisez une image source d'au moins 512 px de large.
Où dois-je placer les fichiers ?
Téléversez-les à la racine de votre site Web pour qu'ils soient accessibles à une adresse comme /favicon.ico. Collez ensuite l'extrait HTML dans la section <head>. De nombreux navigateurs cherchent aussi automatiquement /favicon.ico, même sans la balise.
Pourquoi mon nouveau favicon ne s'affiche-t-il pas ?
Les navigateurs mettent les favicons en cache de manière agressive. Ouvrez directement l'adresse de l'icône, forcez l'actualisation de la page ou essayez une fenêtre de navigation privée. La mise à jour des favoris et des onglets peut prendre un certain temps.
Dois-je utiliser un fond transparent ?
La transparence rend bien dans les onglets des navigateurs, mais iOS remplit en noir les zones transparentes de l'icône Apple touch. Si votre icône ne rend pas bien à la fois sur fond clair et sombre, désactivez la transparence et choisissez une couleur de fond.
Mon image est-elle téléversée ?
Non. Toutes les icônes sont générées et assemblées directement dans votre navigateur. Rien n'est envoyé sur un serveur.

Outils similaires

SVG en PNGTransformez des graphiques vectoriels SVG en images PNG nettes à n'importe quelle taille, en préservant la transparence.Redimensionner une imageRedimensionnez des photos à des tailles exactes en pixels ou en pourcentage — une seule image ou tout un lot, sans les téléverser.Convertisseur d'imagesConvertissez des photos et des graphiques entre les formats JPG, PNG, WebP et AVIF — par lots, sans envoyer vos fichiers.PNG en WebPRéduisez la taille des images pour votre site web en convertissant vos fichiers PNG et JPG en WebP — directement dans votre navigateur.Ajouter une bordure à une imageAjoutez facilement des bordures colorées personnalisables et des coins arrondis à vos photos.Ajouter du texte sur une imageAjoutez des légendes, des titres ou du texte de mème sur n'importe quelle image et placez-les exactement où vous le souhaitez.