Générateur de Favicon

Qu'est-ce qu'un favicon ?

Un favicon (favorite icon) est la petite icône qui apparaît dans l'onglet d'un navigateur, dans les favoris et parfois sur l'écran d'accueil mobile. C'est un élément essentiel de l'identité visuelle d'un site web : un bon favicon améliore la reconnaissance, la professionnalité et l'engagement utilisateur.

Les favicons modernes existent en plusieurs formats et tailles pour s'adapter à tous les contextes : 16x16 et 32x32 pour les navigateurs, 180x180 pour les appareils Apple, 192x192 et 512x512 pour Android, plus des formats SVG vectoriels. Cet outil génère toutes les tailles nécessaires à partir d'une seule image source.

Comment utiliser cet outil

Téléversez une image carrée (PNG, SVG ou JPG) d'au moins 512x512 pixels. L'outil génère automatiquement toutes les tailles standard et le fichier site.webmanifest. Téléchargez le ZIP contenant tous les favicons et le code HTML à insérer dans la balise head de votre site.

Tailles de favicon requises

• 16x16 — icône de l'onglet du navigateur (la taille classique du favicon).
• 32x32 — raccourci de la barre des tâches, onglets de navigateur haute densité.
• 180x180 — Apple Touch Icon pour l'écran d'accueil iOS.
• 192x192 et 512x512 — écran d'accueil et écran de démarrage Android (manifeste PWA).

Conseils pour concevoir un favicon

Les favicons doivent rester reconnaissables à très petite taille. Utilisez des formes audacieuses, une géométrie simple et un fort contraste. Le texte fonctionne rarement en dessous de 32x32. Une seule lettre ou un symbole abstrait de votre marque est le plus efficace. Testez votre favicon à sa taille d'affichage réelle (16x16) — des détails qui rendent bien en 512x512 deviennent des points invisibles à la taille d'un favicon. Utilisez un fond transparent pour les favicons PNG.

Questions fréquentes

Où placer les fichiers favicon ?

Placez-les à la racine du site (par exemple https://exemple.com/favicon.ico). Les navigateurs cherchent automatiquement /favicon.ico, mais déclarez aussi les autres tailles dans le head avec les balises link rel='icon' appropriées.

Pourquoi mon favicon ne s'affiche-t-il pas ?

Causes courantes : cache navigateur (essayez Ctrl+F5 ou navigation privée), chemin incorrect dans le HTML, fichier corrompu ou format non supporté. Vérifiez aussi que votre serveur web sert le bon MIME type (image/x-icon pour .ico).