ESC

Importez votre image source

Glissez-déposez votre image ici

Un PNG, JPG ou SVG carre (jusqu'a 8 Mo) donne les meilleurs resultats.

Conseils rapides

  • Utilisez une image d'au moins 1024x1024 px pour un rendu net.
  • Gardez les elements importants centres - les petites tailles rognent davantage.
  • Les PNG transparents ressortent mieux dans les themes sombres.
  • Adaptez les chemins de l'extrait HTML a votre hebergement.

Extrait HTML

Collez ces lignes dans la balise de votre site.

Apercu du manifest


                

Pourquoi utiliser le Generateur de favicon ?

Pack complet

Telechargez PNG, favicon.ico, manifest et browserconfig en un seul fichier.

Mise a l'echelle intelligente

Centre et ajuste votre logo automatiquement pour chaque resolution.

Snippet pret a l'emploi

Copiez simplement les lignes generees.

Respect de la vie privee

Tout se fait localement dans votre navigateur, aucun fichier n'est envoye.

Comment utiliser le Generateur de favicon ?

1

Importez votre logo

Chargez un logo carre en PNG, JPG ou SVG (8 Mo max).

2

Choisissez tailles et style

Selectionnez les tailles, la couleur de fond et le rayon des angles.

3

Generez la previsualisation

Controlez chaque rendu et copiez le snippet HTML si besoin.

4

Telechargez le pack

Recuperez le ZIP contenant PNG, favicon.ico, manifest et browserconfig.

Questions frequentes

Un PNG carré transparent de 1024x1024 px ou plus offre les résultats les plus nets à toutes les tailles. SVG fonctionne également et s'adapte parfaitement à n'importe quelle résolution. JPG fonctionne mais ne peut pas avoir de fond transparent — l'outil ajoutera une couleur de fond unie. Pour une qualité optimale : commencez avec au moins 512x512 px, centrez le design et utilisez un minimum de détails, car les favicons s'affichent à des tailles aussi petites que 16x16 px.

Le générateur produit des icônes PNG aux tailles suivantes : 16, 24, 32, 40, 48, 57, 64, 72, 96, 120, 128, 144, 150, 180, 192, 256, 384 et 512 pixels carrés. Le préréglage « Moderne » couvre les 5 tailles essentielles ; le préréglage « Complet » génère les 18. favicon.ico contient les versions 16, 32 et 48 px intégrées dans un seul fichier pour la compatibilité avec les navigateurs anciens.

favicon.ico est un ancien format conteneur multi-résolution pris en charge par tous les navigateurs depuis IE 5. Les navigateurs modernes (Chrome, Firefox, Safari, Edge) préfèrent les favicons PNG car ils offrent une profondeur de couleur totale et la transparence avec des fichiers plus légers. Bonne pratique : incluez les deux — favicon.ico pour la compatibilité héritée, et des balises <link rel="icon" type="image/png"> pointant vers des fichiers PNG de taille appropriée pour les navigateurs modernes.

L'Apple Touch icon (180x180 px) est utilisée lorsqu'un utilisateur ajoute votre site web à l'écran d'accueil de son iPhone ou iPad. Sans elle, iOS utilise une capture d'écran de votre page comme icône, ce qui paraît peu professionnel. Ajoutez <link rel="apple-touch-icon" href="/apple-touch-icon.png"> dans le <head> de votre HTML. Cet outil génère le PNG 180 px et inclut la ligne HTML correcte dans l'extrait HTML. iOS moderne (10+) n'a besoin que de 180 px.

Les Progressive Web Apps (PWA) nécessitent des icônes 192x192 et 512x512 répertoriées dans le fichier site.webmanifest. L'icône 192 px apparaît sur l'écran d'accueil Android lorsque l'utilisateur installe votre PWA. L'icône 512 px est utilisée pour l'écran de démarrage PWA. Cet outil génère les deux fichiers PNG et crée un site.webmanifest avec le tableau d'icônes correct. Ajoutez <link rel="manifest" href="/site.webmanifest"> dans le <head> de votre HTML pour activer l'installation PWA.

L'extrait HTML généré comprend : une balise <link rel="icon"> pour le favicon standard, une balise <link rel="apple-touch-icon"> pour les icônes d'écran d'accueil iOS, une balise <link rel="manifest"> pointant vers site.webmanifest pour le support PWA, et une balise <meta name="msapplication-config"> pointant vers browserconfig.xml pour les tuiles Windows. Collez toutes les lignes dans le <head> de votre HTML. Mettez à jour les chemins si vos icônes se trouvent dans un sous-dossier.

Oui. Les navigateurs modernes (Chrome 80+, Firefox 41+, Safari 15+) prennent en charge les favicons SVG via <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Les favicons SVG s'adaptent parfaitement à n'importe quelle résolution et prennent en charge le mode sombre via CSS @media (prefers-color-scheme: dark). Activez l'option « Inclure favicon.svg » dans cet outil pour ajouter le SVG à votre pack. Conservez également les fichiers ICO et PNG comme solution de repli pour Safari 14 et les navigateurs plus anciens.

Non. Tout le redimensionnement, la conversion de format et l'empaquetage s'effectuent entièrement dans votre navigateur via JavaScript. Votre image ne touche jamais aucun serveur. Rien n'est stocké, enregistré ou transmis — le processus est entièrement privé et fonctionne hors ligne après le chargement de la page.

Qu'est-ce qu'un Generateur de favicon ?

Un outil gratuit qui transforme un seul visuel de marque en toutes les tailles d'icones necessaires a votre site ou PWA. Il produit favicon.ico, plusieurs PNG, un Apple touch icon ainsi que les fichiers manifest et browserconfig directement dans le navigateur.

Pourquoi ne pas le faire a la main ?

La creation manuelle est longue et source d'erreurs. Cet outil garantit des fichiers nommes correctement, un rendu pixel-perfect et fournit l'HTML ainsi que les metadonnees indispensables pour un deploiement rapide et coherent.

Pack complet en un clic

Tailles PNG, favicon.ico, site.webmanifest, browserconfig.xml et snippet HTML head dans un seul ZIP. Telechargez et deposez les fichiers a la racine de votre projet.

Respect de votre vie privee

Votre logo et vos visuels de marque peuvent etre sensibles. Tout le traitement se fait dans votre navigateur, aucun fichier n'est transmis a un serveur. Vos creations restent uniquement sur votre appareil.

Sécurité et Confidentialité

La sécurité de vos données est notre priorité

Traitement Local

Tout le traitement se fait dans votre navigateur

Aucun Transfert de Données

Vos données ne sont pas envoyées à nos serveurs

Aucun Stockage de Données

Aucune donnée n'est stockée ou partagée

Chiffrement SSL

Chiffrement SSL pour une connexion sécurisée

Étape Suivante

Aussi sur MoreOnlineTools