Générateur de favicon
Envoyez votre logo et recevez dans un seul ZIP les icônes dont votre site a besoin : un favicon.ico avec des images de 16, 32 et 48 pixels, un PNG de 48 pixels pour Google, une Apple Touch Icon à fond opaque pour l'iPhone, des icônes de 192 et 512 pixels pour Android, une icône adaptative dont la zone de sécurité est calculée et un site.webmanifest. Si vous envoyez un SVG, icon.svg est aussi inclus. Vous voyez les aperçus de l'onglet, du résultat Google et de l'écran d'accueil, et vous copiez le code <head> prêt à l'emploi ; tout se passe dans votre navigateur.
- Gratuit, sans inscription
- Votre fichier ne quitte pas votre appareil
- Jusqu'à 50 Mo par fichier
Ajoutez l'image de votre logo ou de votre icône pour commencer. Le PNG, le SVG, le JPG et le WebP conviennent ; pour un résultat optimal, utilisez une image carrée d'au moins 512 × 512 pixels.
Votre fichier ne quitte pas votre appareil ; les images sont traitées dans votre navigateur. Aucune donnée EXIF ni de localisation n'est ajoutée au résultat.
Comment créer un favicon
Ajoutez votre logo
Envoyez un logo en PNG, SVG, JPG ou WebP. Pour un résultat optimal, utilisez une image carrée d'au moins 512 × 512 pixels ; un SVG convient aussi.
Réglez le nom, les couleurs et la marge
Saisissez le nom du site et le nom court, choisissez les couleurs du thème et du fond, et ajoutez une marge intérieure si besoin. Les aperçus montrent le rendu de l'icône dans un onglet, dans Google et sur un écran d'accueil.
Téléchargez le paquet et installez-le
Téléchargez le ZIP, envoyez les fichiers à la racine de votre site et ajoutez à vos pages l'extrait <head> affiché.
Qu'est-ce qui est conservé ?
Conservé
- Les proportions de votre logo : une image non carrée est ajustée dans un carré, jamais étirée
- La transparence (dans les icônes standard ; si vous choisissez une couleur de fond, elle est remplie)
- Si vous envoyez un SVG, icon.svg est inclus tel quel
Modifié
- Chaque icône est rééchantillonnée à sa propre taille en haute qualité
- L'Apple Touch Icon et l'icône adaptative ont toujours un fond opaque : la couleur choisie, ou le blanc quand « Transparent » est sélectionné
- Dans l'icône adaptative, le contenu reste dans la zone de sécurité de 80 %
Non repris
- Aucun vecteur (SVG) n'est généré à partir d'un PNG ou d'un JPG ; icon.svg n'existe que pour une entrée SVG
- Les données EXIF et autres métadonnées ne sont pas ajoutées aux icônes
Quand l'utiliser
Un jeu d'icônes complet pour un nouveau site
Un seul favicon.ico ne suffit plus : l'écran d'accueil de l'iPhone, Android et les résultats de recherche Google attendent des fichiers différents. Un seul envoi vous les donne tous, avec les bons noms et les bonnes tailles.
Faire apparaître votre icône dans les résultats Google
Google affiche l'icône de votre site dans les résultats à partir d'un fichier carré dont la taille est un multiple de 48 pixels, et ce fichier doit pouvoir être exploré. Le paquet contient ce fichier et son lien pour le <head>.
Un site que l'on peut ajouter comme une application (PWA)
Si vous voulez que votre site puisse être ajouté à l'écran d'accueil, il faut un manifeste et des icônes de 192 et 512 pixels. L'icône adaptative évite que votre logo soit coupé quand Android découpe l'icône en cercle ou en carré arrondi.
Limites à connaître
- Pour un résultat optimal, utilisez une image carrée d'au moins 512 × 512 pixels ; les grandes icônes créées à partir de sources plus petites paraissent floues.
- Les lignes fines et les petits textes deviennent illisibles dans les icônes de 16 et 32 pixels ; les logos épais et très contrastés fonctionnent mieux.
- La couleur du thème ne s'applique qu'à la barre d'adresse des navigateurs mobiles et dépend des réglages du navigateur.
- Google peut mettre des jours, voire des semaines, à actualiser l'icône dans les résultats de recherche, et les navigateurs mettent aussi les icônes en cache.
Questions fréquentes
De quels fichiers favicon un site a-t-il besoin ?
L'approche actuelle : favicon.ico à la racine, un PNG de 48 pixels pour Google, icon.svg si possible, un apple-touch-icon.png de 180 pixels pour l'iPhone, des icônes de 192 et 512 pixels pour Android et un site.webmanifest. Le générateur les produit tous et vous donne les liens pour le <head>.
Qu'est-ce qu'une icône adaptative ?
Une icône adaptative garde son contenu dans une zone de sécurité et a un fond entièrement rempli : Android peut ainsi la découper en cercle, en carré arrondi ou dans une autre forme selon l'appareil. Ici, le contenu est placé dans la zone centrale de 80 % de l'image de 512 pixels.
Pourquoi l'Apple Touch Icon est-elle opaque et à coins droits ?
iOS affiche les zones transparentes en noir et arrondit lui-même les coins. L'icône est donc produite entièrement remplie et sans coins arrondis, dans la couleur de fond choisie (blanc si Transparent est sélectionné).
Pourquoi mon icône n'apparaît-elle pas dans les résultats Google ?
Le fichier d'icône ne doit pas être bloqué par robots.txt, doit être référencé dans le <head> de la page d'accueil et doit être un carré dont la taille est un multiple de 48 pixels. Une fois corrigé, vous pouvez demander la réindexation de la page d'accueil dans la Search Console ; la mise à jour peut malgré tout prendre des jours ou des semaines.
Que se passe-t-il si j'envoie une image non carrée ?
Les icônes sont ajustées dans un carré sans déformation et laissent un espace vide sur les côtés. Si vous voulez que le cadre remplisse le carré, rognez d'abord l'image en 1:1 avec l'outil de rognage.
Crée-t-il un favicon SVG à partir d'un PNG ?
Non. Convertir automatiquement des pixels en vecteur pourrait modifier l'aspect de l'icône à votre insu ; icon.svg n'est donc inclus que si vous envoyez vous-même un SVG.
Cet outil est-il gratuit ?
Oui, entièrement gratuit. Il n'y a ni compte, ni abonnement, ni filigrane.
Mes fichiers sont-ils envoyés quelque part ?
Non. Les images sont traitées dans votre navigateur et ne quittent pas votre appareil. Aucune donnée EXIF ni de localisation n'est ajoutée au résultat.