Générateur de favicon
Créez toutes les tailles de favicon à partir d’une seule image.
Déposez votre logo ici ou cliquez pour choisir
PNG, SVG, JPG, WebP ou ICO. Un logo carré de 512 × 512 px ou plus donne le meilleur résultat. Les fichiers sont traités dans votre navigateur et ne sont jamais envoyés. Elles restent dans ce navigateur jusqu’à ce que vous les retiriez.
Ctrl+OchoisirCtrl+Vcoller
Un favicon est la petite icône que les navigateurs affichent dans les onglets et les favoris ; les téléphones en utilisent des versions plus grandes quand quelqu’un ajoute votre site à son écran d’accueil. Déposez un logo et ce générateur crée tous les fichiers dont un site a besoin – favicon.ico, favicons PNG, icône Apple touch, icônes Android et manifeste web –, avec des aperçus en direct et le HTML à coller dans votre page. Tout s’exécute dans votre navigateur : votre logo ne quitte jamais votre appareil. C’est gratuit et sans inscription.
Comment créer un favicon
- Déposez votre logo (PNG, SVG, JPG ou WebP) n’importe où sur la page, collez-le avec Ctrl+V, ou cliquez pour le choisir. Une image ajoutée dans un autre outil d’image est déjà dans la liste, telle que vous l’y avez laissée : cliquez sur sa miniature pour l’utiliser. Le logo d’exemple permet d’essayer sans fichier.
- Le logo est cadré pour vous : le symbole d’un logo large, ou le logo sans ses bords vides. Faites glisser le carré sur le logo pour changer le cadrage, ou choisissez « Logo entier ». Choisissez un fond (les couleurs de votre logo sont proposées en premier), la marge et la forme ; les aperçus se mettent à jour au fur et à mesure.
- Cliquez sur « Tout télécharger (ZIP) », placez les fichiers dans le dossier racine de votre site, puis cliquez sur « Copier le HTML » et collez les balises dans le <head> de votre page.
Fonctionnalités
- favicon.ico avec des icônes de 16, 32 et 48 px, plus des favicons PNG de 16 et 32 px
- apple-touch-icon.png (180 px) et icônes Android Chrome (192 et 512 px)
- site.webmanifest avec le nom de votre application et la couleur de thème, et les balises HTML pour votre <head>
- Trouve automatiquement le symbole d’un logo large ; faites glisser le carré pour utiliser une autre partie, ou ajustez le logo entier
- Fond : transparent, couleurs de votre logo ou toute autre couleur ; marge de 0 à 30 % ; forme carrée, arrondie ou ronde
- Aperçus en direct de chaque taille, d’un onglet de navigateur et d’un écran d’accueil, en clair et en sombre
- Part d’un PNG, SVG, JPG, WebP ou ICO ; tous les fichiers dans un seul ZIP
Est-ce confidentiel ?
Oui. Les icônes sont créées dans votre navigateur par un moteur d’image WebAssembly ; votre logo et les fichiers ne quittent jamais votre appareil. Le logo reste dans ce navigateur jusqu’à ce que vous le retiriez de la liste.
Questions fréquentes
De quelles tailles de favicon ai-je besoin ?
Quatre fichiers couvrent presque tout : favicon.ico en 16, 32 et 48 px pour les onglets, les favoris et les raccourcis Windows ; un apple-touch-icon.png de 180 px pour l’écran d’accueil des iPhone et iPad ; et des PNG de 192 et 512 px, déclarés dans site.webmanifest, pour Android et les applications web installables. Le ZIP les contient tous, plus des PNG de 16 et 32 px pour les navigateurs qui préfèrent le PNG.
Comment ajouter le favicon à mon HTML ?
Placez les fichiers dans le dossier racine de votre site, pour que /favicon.ico s’ouvre, puis cliquez sur « Copier le HTML » et collez les balises dans le <head> de chaque page. Les navigateurs cherchent /favicon.ico même sans balise ; les balises ajoutent les tailles PNG, l’icône Apple et le manifeste.
Pourquoi apple-touch-icon.png a-t-il un fond ?
Parce que les iPhone et iPad affichent les pixels transparents en noir et arrondissent eux-mêmes les coins : l’icône Apple est donc toujours un carré plein et opaque, de votre couleur de fond, ou blanc si le fond est transparent. Les autres icônes conservent leur transparence et leur forme.
Puis-je utiliser un logo SVG ?
Oui. Votre navigateur dessine le SVG à sa propre taille, ou à 1024 px s’il est plus petit, et chaque icône est créée à partir de ce rendu. Un SVG qui fait référence à d’autres fichiers (images, polices ou feuilles de style) ne peut pas être entièrement dessiné comme image : l’outil vous le signale au lieu de créer des icônes incomplètes. Exportez-le d’abord en PNG, ou intégrez-y ses images.
J’ai remplacé mon favicon, mais le navigateur affiche toujours l’ancien. Pourquoi ?
Les navigateurs gardent les favicons en cache très longtemps. Rechargez la page avec Ctrl+F5 (Cmd+Maj+R sur Mac), ou ouvrez le site dans une fenêtre de navigation privée, pour voir la nouvelle icône.