Générateur de favicon
Créez d’un coup favicon.ico, les PNG de chaque taille et les icônes pour iPhone et Android à partir d’un texte, d’un emoji ou de votre logo.
1. Saisir un texte ou choisir une image
Saisissez les caractères (emoji compris) de votre icône, ou choisissez une image, comme votre logo.
Source
Jusqu’à 3 caractères. L’icône s’affiche en tout petit : 1 ou 2 caractères, c’est l’idéal.
Police
2. Choisir la forme et la couleur
Choisissez la forme et la couleur du fond, et la taille du contenu. L’aperçu se met à jour aussitôt.
Forme
Couleur de fond
Seule l’icône d’écran d’accueil de l’iPhone (apple-touch-icon) est remplie avec la couleur de fond choisie plus haut, car les zones transparentes y deviennent noires.
Couleur du texte
Couleurs en mode sombre
Seul favicon.svg change. En auto, la luminosité n’est inversée que si une couleur serait peu visible sur un écran sombre.
3. Vérifier et enregistrer
Vérifiez le rendu dans un onglet du navigateur et sur l’écran d’accueil, puis enregistrez le tout dans un seul ZIP.
Saisissez un texte pour voir l’aperçu ici
Dans un onglet (thème clair et sombre)
Inscrit dans site.webmanifest comme nom affiché lors de l’ajout à l’écran d’accueil.
Ajoute 64, 128 et 256 px, utilisés quand l’icône s’affiche en grand, par exemple pour les raccourcis du bureau Windows. Le fichier est plus lourd.
HTML à coller sur le site
Placez les fichiers du ZIP à la racine (/) de votre site, puis collez ce HTML dans la balise <head>.
Voir le HTML
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Fichiers du ZIP
- favicon.ico (16 / 32 / 48)
- favicon.svg
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png
- site.webmanifest
- favicon-html.txt
Tout se passe sur cet appareil. Vos images ne sont jamais envoyées.
Utile ? Un partage nous ferait plaisir
Quelque chose ne marche pas, ou une idée pour l’améliorer ?
Mode d’emploi
1. Saisir le texte
« Texte » étant sélectionné, touchez le champ « Texte de l’icône » et saisissez 1 à 3 caractères. Les emoji fonctionnent aussi. Le style des lettres se choisit juste en dessous, dans « Police ».
« Texte » étant sélectionné dans le panneau de gauche, cliquez dans le champ « Texte de l’icône » et saisissez 1 à 3 caractères. Les emoji fonctionnent aussi. L’aperçu du panneau de droite change aussitôt. Le style des lettres se choisit juste en dessous, dans « Police ».
2. Choisir la forme et la couleur
Touchez « Choisir la forme et la couleur en plein écran » pour ouvrir l’éditeur. Dans la barre du bas, touchez « Rond » dans l’onglet « Forme », puis une pastille de fond dans l’onglet « Couleur ». L’aperçu au centre montre aussitôt le rendu sur écran clair et sombre.
Dans la section « Choisir la forme et la couleur », cliquez sur « Rond » sous « Forme », puis sur une pastille sous « Couleur de fond ». L’aperçu du panneau de droite montre aussitôt le rendu sur écran clair, sur écran sombre et dans un onglet. Avec « Modifier en plein écran » au-dessus de l’aperçu, vous choisissez avec un grand aperçu.
3. À partir d’une image
Pour partir d’une image comme un logo, touchez « Image » en haut, puis choisissez l’image avec « Choisir des fichiers ». L’éditeur plein écran s’ouvre et l’image entière tient dans l’icône. Pour qu’elle aille jusqu’aux bords, touchez « Remplir » sous « Cadrage », dans la barre du bas.
Pour partir d’une image comme un logo, cliquez sur « Image » en haut du panneau de gauche, puis glissez-déposez l’image (ou utilisez « Choisir des fichiers »). L’image entière tient dans l’icône. Pour qu’elle aille jusqu’aux bords, cliquez sur « Remplir » sous « Cadrage », dans la section « Choisir la forme et la couleur ».
4. Tout enregistrer d’un coup
Dans la section « Vérifier et enregistrer », touchez « Tout télécharger en ZIP » pour enregistrer tous les fichiers dans un seul ZIP. Le HTML à coller sur le site se copie juste en dessous avec « Copier le HTML ».
Cliquez sur « Tout télécharger en ZIP » dans le panneau de droite pour enregistrer favicon.ico, favicon.svg, les PNG de chaque taille et site.webmanifest dans un seul ZIP. Le HTML à coller sur le site se copie juste en dessous avec « Copier le HTML ».
Idéal pour
Une icône tout de suite pour votre site
Créez en quelques secondes, à partir d’une lettre ou d’un emoji, l’icône qui s’affiche dans l’onglet de votre blog, site perso ou application web. Aucun logiciel de graphisme requis.
Celles et ceux qui créent leur site
Toutes les tailles d’un coup
favicon.ico, PNG en 16/32 px et icônes pour iPhone et Android sont créés en une fois et réunis dans un ZIP. Plus besoin d’exporter chaque taille à la main.
Intégrateurs et développeurs web
À partir du logo d’une boutique ou d’une entreprise
Choisissez simplement votre logo : il est mis à la bonne taille pour les onglets et l’écran d’accueil. Les fonds transparents sont conservés.
Commerces et petites entreprises
Pour des pages d’exercice en HTML
Le HTML fourni montre quel fichier va où. Pratique pour les pages créées en cours ou pour s’entraîner.
Élèves en programmation et enseignants
Bon à savoir avant de commencer
- Un texte fin ou une photo deviennent illisibles à 16 px. Un symbole bien net ou 1 à 2 caractères donnent le meilleur résultat.
- L’outil ne crée pas d’images de vignettes Windows. Les navigateurs et smartphones actuels affichent sans souci les fichiers créés ici.
- Pour rogner d’abord les marges autour d’un logo, utilisez « Rogner des images ».
Les fichiers et tailles nécessaires pour un favicon
Le favicon est l’icône du site affichée dans les onglets, les favoris, les résultats de recherche et sur l’écran d’accueil des smartphones. Chaque emplacement utilise une taille différente : on prépare donc en général plusieurs fichiers à partir d’un même visuel. Cet outil crée tout ce dont les navigateurs et smartphones actuels ont besoin, avec le HTML à coller sur votre site.
favicon.ico est un format qui réunit trois tailles (16, 32 et 48 px) dans un seul fichier ; il s’affiche aussi dans les anciens navigateurs et les raccourcis Windows. L’icône d’écran d’accueil de l’iPhone (apple-touch-icon) ne peut pas être transparente, et c’est l’iPhone qui arrondit lui-même les coins : l’outil la crée donc carrée, avec un fond plein. favicon.svg peut adapter ses couleurs au mode sombre ; Chrome, Firefox et Edge l’utilisent dans les onglets.
Questions fréquentes
Les questions les plus courantes sur la création et la mise en place d’un favicon.
Mes images sont-elles envoyées quelque part ?
Non. Du chargement de l’image au dessin des icônes et à la création du ZIP, tout se passe dans le navigateur de cet appareil. Les images choisies et le texte saisi ne sont envoyés nulle part.
Quelles images conviennent le mieux ?
Les images carrées aux formes nettes. À 16 px, une icône est minuscule : un texte fin ou une photo deviennent illisibles. Gardez seulement le symbole de votre logo, ou créez une icône de 1 à 2 caractères avec « Texte ». Pour une image en largeur, choisissez « Image entière » ou « Remplir » sous « Cadrage ».
Peut-on créer un favicon à partir d’un emoji ?
Oui. Saisissez un emoji dans « Texte de l’icône » et il devient une icône. Le dessin de l’emoji dépend de l’appareil utilisé (iPhone, Android, Windows, etc.).
Où placer les fichiers créés ?
Décompressez le ZIP et placez tous les fichiers à la racine de votre site (là où https://example.com/favicon.ico serait accessible). Copiez ensuite le « HTML à coller sur le site » et collez-le dans la balise <head> de chaque page.
favicon.ico seul suffit-il ?
Pour l’onglet du navigateur, favicon.ico suffit. Pour une icône nette aussi lors de l’ajout à l’écran d’accueil d’un smartphone, mettez en ligne tous les fichiers du ZIP et collez le HTML.
Le fond peut-il être transparent ?
Oui. Activez « Fond transparent » : le fond et tout ce qui est hors de la forme deviennent transparents. Seule l’icône d’écran d’accueil de l’iPhone (apple-touch-icon.png) fait exception : les zones transparentes y apparaissent en noir, elle est donc remplie avec la couleur choisie dans « Couleur de fond ».
Est-ce compatible avec WordPress ?
Oui. Dans WordPress, allez dans « Apparence » → « Personnaliser » → « Identité du site », puis sous « Icône du site », choisissez android-chrome-512x512.png dans le ZIP (WordPress demande une image d’au moins 512 px).
J’ai changé de favicon, mais l’ancien s’affiche encore
Les navigateurs gardent parfois les favicons en cache longtemps. Si recharger la page ne suffit pas, videz le cache du navigateur ou vérifiez de nouveau un peu plus tard.
Peut-on créer un favicon SVG ?
Oui. Le ZIP contient favicon.svg. En mode sombre, il passe aux couleurs réglées dans « Couleurs en mode sombre » (en auto, la luminosité n’est inversée que pour les couleurs peu visibles). Le texte est intégré comme image dans la police choisie ; le SVG ne peint que sa couleur.
Est-ce gratuit ?
Oui, c’est gratuit. Sans inscription et sans publicité. Le nombre d’icônes n’est pas limité.
Autres outils
- Générateur de QR code
Créez des QR codes à partir de liens, de texte ou d’un accès Wi-Fi, avec les formes, les couleurs, l’icône centrale ou la photo de votre choix.
- Convertir des images en WebP
Convertissez vos PNG ou JPEG en WebP, un format plus léger qui reste net.
- Convertir des images en PNG
Convertissez des JPEG ou WebP en PNG, un format sans perte de qualité.
- Convertir des images en JPG
Convertissez des PNG ou WebP en JPG (JPEG), un format qui s’ouvre partout.
- Convertir HEIC en WebP
Convertissez les photos HEIC de l’iPhone en WebP, un format plus léger et pratique.
- Convertir HEIC en PNG
Convertissez les photos HEIC de l’iPhone en PNG, qui s’ouvre partout, sans perte de qualité.