Comment créer un favicon pour votre site (ICO, PNG, icônes Apple et Android)
Sur cette page
En bref : partez d’une image carrée simple, passez-la dans le générateur de favicon d’Imgovo, téléchargez le ZIP, placez les fichiers dans le dossier racine de votre site et collez le code HTML fourni dans le <head> de vos pages. Les créateurs de sites comme WordPress, Shopify et Wix disposent généralement d’un réglage « Icône du site » où vous pouvez importer à la place le PNG de 512 px.
À quoi sert un favicon
Le favicon est la petite icône de l’onglet du navigateur. Il apparaît aussi dans les favoris et l’historique, et les téléphones utilisent des icônes associées quand quelqu’un ajoute votre site à l’écran d’accueil. Un site sans favicon affiche un symbole générique, ce qui fait inachevé.
Comme l’icône est affichée très petite, le dessin compte plus que la résolution.
Concevoir pour de très petites tailles
- Restez simple. Une forme marquée ou une ou deux lettres fonctionnent. Un logo détaillé devient une tache à 16 × 16 pixels.
- Utilisez un fort contraste. Les onglets peuvent être clairs ou sombres.
- Privilégiez une source carrée. Si votre logo est large, placez-le sur un canevas carré.
- Utilisez un arrière-plan transparent si vous voulez que l’icône se fonde dans l’onglet. Pour les photos, le générateur recadre en carré à partir du centre.
- Laissez un peu d’espace. Les réglages de marge intérieure et de coins arrondis aident la forme à respirer.
Si votre logo a un arrière-plan dont vous ne voulez pas, Supprimer l’arrière-plan peut d’abord le rendre transparent. Voir Comment supprimer l’arrière-plan d’une photo. Pour donner à un logo carré des coins arrondis ou une forme de cercle, Image arrondie enregistre un PNG transparent.
Pas à pas
- Ouvrez le générateur de favicon.
- Ajoutez votre image. PNG, SVG, JPG, WebP et d’autres formats sont acceptés.
- Choisissez comment l’image est ajustée : recadrage carré à partir du centre, ou image entière.
- Choisissez l’arrière-plan (transparent ou une couleur), la marge intérieure et les coins arrondis. Les valeurs par défaut de la marge intérieure et des coins arrondis sont de 0 %. Vous pouvez aussi saisir un nom d’application facultatif.
- Vérifiez les aperçus.
- Téléchargez le ZIP.
Annuler et Rétablir fonctionnent avec Ctrl+Z et Ctrl+Maj+Z.
Ce que contient le ZIP
| Fichier | Taille | Utilisé pour |
|---|---|---|
| favicon.ico | 16, 32 et 48 px dans un seul fichier | Onglets de navigateur, anciens navigateurs |
| favicon-16x16.png | 16 px | Onglets de navigateur |
| favicon-32x32.png | 32 px | Onglets de navigateur, écrans à haute densité |
| apple-touch-icon.png | 180 px | Écrans d’accueil de l’iPhone et de l’iPad |
| android-chrome-192x192.png | 192 px | Android et applications web installables |
| android-chrome-512x512.png | 512 px | Android et applications web installables, import comme icône du site |
| site.webmanifest | – | Décrit les icônes des applications web installables |
L’icône Apple reçoit un arrière-plan uni, car les iPhone et les iPad affichent les zones transparentes en noir.
Ajouter les fichiers à votre site
- Décompressez les fichiers dans le dossier racine de votre site, à côté de votre
index.html. - Copiez le code HTML depuis la zone « Copier le HTML » du générateur.
- Collez-le dans le
<head>de chaque page, ou dans la mise en page ou le modèle commun de votre site.
Un jeu de balises typique ressemble à ceci. Utilisez exactement le code fourni par le générateur, car il correspond à vos noms de fichiers :
<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">Dans un créateur de sites, repérez le réglage « Icône du site » ou « Favicon » et importez le PNG de 512 px. Le créateur génère alors lui-même les autres tailles.
Si la nouvelle icône n’apparaît pas
Les navigateurs mettent les favicons en cache de façon très agressive. Après avoir importé de nouveaux fichiers :
- Rechargez la page en forçant l’actualisation.
- Ouvrez le site dans une fenêtre de navigation privée ou dans un autre navigateur.
- Vérifiez que
/favicon.icos’ouvre directement dans la barre d’adresse. - Patientez. Les moteurs de recherche peuvent mettre un certain temps à afficher une nouvelle icône.
Créer uniquement un fichier ICO
Si vous n’avez besoin que de favicon.ico, utilisez le bouton « Télécharger uniquement favicon.ico ». Pour d’autres tailles, Redimensionner une image peut produire un simple PNG aux dimensions exactes dont vous avez besoin. Les questions de format sont traitées dans JPG, PNG, WebP ou AVIF : que choisir ?.
Confidentialité
Votre logo ne quitte jamais votre ordinateur. Les icônes sont créées dans votre navigateur et le ZIP y est également construit.
À vous de jouer
Ouvrez le générateur de favicon, ajoutez votre logo et téléchargez le jeu d’icônes complet.
Questions fréquentes
Qu’est-ce qu’un favicon ?
Un favicon est la petite icône qui représente un site web dans les onglets du navigateur, les favoris et l’historique. Des icônes associées sont utilisées lorsqu’un site est ajouté à l’écran d’accueil d’un téléphone.
De quelle image dois-je partir ?
Une image carrée à arrière-plan transparent donne les meilleurs résultats. Les logos simples et marqués et les monogrammes tiennent mieux que les images détaillées, car les détails fins disparaissent à 16 × 16 pixels.
Pourquoi l’icône Apple a-t-elle un arrière-plan ?
Les iPhone et les iPad affichent les zones transparentes en noir ; le générateur les remplit donc avec un arrière-plan uni, soit de la couleur que vous avez choisie, soit blanc.
Puis-je créer uniquement favicon.ico ?
Oui. Utilisez le bouton « Télécharger uniquement favicon.ico » pour obtenir seulement le fichier ICO multitaille.
Mon logo est-il envoyé ?
Non. Les icônes sont créées dans votre navigateur et le ZIP y est également construit.