Générateur de favicon
Transformez un logo en pack de favicon complet pour votre site web.
Fonctionne dans votre navigateur. Vos fichiers ne quittent jamais votre appareil.
- ICO plus chaque taille PNG
- Code HTML prêt à coller
- Marge intérieure réglable
Comment générer un favicon
- Déposez un logo ou une image carrée ici.
- Ajustez la marge et le fond si besoin.
- Téléchargez le ZIP et collez le code HTML.
Le contenu du ZIP
| Fichier | Taille | Utilisé par |
|---|---|---|
| favicon.ico | 16, 32 et 48 px dans un seul fichier | Anciens navigateurs, favoris |
| favicon-16x16.png | 16 x 16 | Onglets de navigateur |
| favicon-32x32.png | 32 x 32 | Onglets de navigateur, barres des tâches |
| apple-touch-icon.png | 180 x 180 | Écran d'accueil iPhone et iPad |
| android-chrome-192x192.png | 192 x 192 | Écran d'accueil Android |
| android-chrome-512x512.png | 512 x 512 | Écran de démarrage et icône d'app Android |
| site.webmanifest | Fichier texte | Indique à Android quelle icône utiliser |
Où placer les fichiers
Envoyez chaque fichier du ZIP à la racine de votre site web, le même dossier qu'index.html, pas un sous-dossier. Collez ensuite le code HTML fourni dans le head de chaque page, ou dans le modèle d'en-tête commun de votre site s'il en a un.
Conseils sur la marge et le fond
- Ajoutez 10 à 15 pour cent de marge pour les logos qui touchent les bords de leur carré, afin qu'ils ne paraissent pas coupés à 16 pixels.
- Activez un fond de remplissage si votre logo a de la transparence et paraît étrange sur la couleur d'onglet du navigateur.
- Un logo simple et très contrasté se lit mieux en 16x16 qu'un logo avec du détail fin ou du texte fin.
FAQ Générateur de favicon
Qu'y a-t-il dans le ZIP ?
favicon.ico avec les tailles 16, 32 et 48 pixels, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, deux PNG android-chrome et un fichier site.webmanifest.
Où ces fichiers doivent-ils aller ?
Envoyez-les à la racine de votre site web, puis collez le code HTML dans le head de chaque page.
Mon image doit-elle déjà être carrée ?
Un logo carré donne le résultat le plus propre. Les images non carrées sont ajustées dans un carré avec une marge, rien n'est donc étiré.
À quoi sert la marge intérieure ?
Elle ajoute un espace vide autour de votre logo à l'intérieur du carré, ce qui évite que le dessin touche les bords aux petites tailles d'icône.
Mon image est-elle envoyée ?
Non. Chaque taille d'icône est générée dans votre navigateur, l'image ne quitte donc jamais votre appareil.
Ai-je besoin des six fichiers, ou juste de favicon.ico ?
Les navigateurs récents utilisent surtout les fichiers PNG et site.webmanifest. favicon.ico est conservé pour les anciens navigateurs et certaines barres de favoris, envoyez-les donc tous pour la meilleure compatibilité.
Avec quelle taille d'image dois-je commencer ?
Au moins 512 sur 512 pixels. L'icône principale est générée à cette taille, donc une image source plus petite est étirée pour s'adapter et peut paraître floue.
Le fichier manifest a-t-il besoin d'être modifié ?
Le fichier site.webmanifest généré utilise un texte provisoire pour le nom du site. Ouvrez-le ensuite dans un éditeur de texte et mettez à jour les champs name et short_name pour qu'ils correspondent à votre site.