PNG → ICO
Générateur de favicon
Créez toutes les icônes dont un site a besoin à partir d'une seule image : favicon.ico, icône Apple touch, icônes d'application et HTML à coller. Tout se passe dans votre navigateur.
Déposez votre logo ou icône ici PNG, JPG ou SVG. Une image carrée donne le meilleur résultat. apple-touch-icon.png · 180
icon-192.png · 192
icon-512.png · 512
À coller dans le <head> de votre site
Fonctionne dans le navigateur · vos fichiers restent chez vous
Comment créer un favicon
- Ajoutez votre logo ou votre icône. PNG, JPG ou SVG. Une image carrée à la forme simple donne le meilleur résultat.
- Réglez la marge, les coins et le fond. Ajoutez de l'espace autour de l'icône, arrondissez les coins et remplissez le fond si votre logo est sombre sur fond transparent.
- Vérifiez les onglets du navigateur. L'aperçu montre l'icône à sa taille réelle de 16 px dans un onglet clair et dans un onglet sombre.
- Téléchargez le ZIP et collez le HTML. Placez les fichiers à la racine de votre site et collez les balises dans le
<head>.
Ce que crée le générateur de favicon
| Fichier | Taille | Utilisé par |
|---|---|---|
| favicon.ico | 16, 32 et 48 px | Onglets, favoris, raccourcis Windows et tout outil qui demande /favicon.ico |
| icon.svg | Vectoriel | Navigateurs récents, quand votre image source est un SVG |
| apple-touch-icon.png | 180 px | Raccourcis sur l'écran d'accueil de l'iPhone et de l'iPad |
| icon-192.png et icon-512.png | 192 et 512 px | Android et applications web installées, déclarées dans le manifeste |
| manifest.webmanifest | – | Indique aux navigateurs où se trouvent les icônes de l'application |
Les icônes de 192 et 512 px suivent l'exemple de manifeste d'application web publié sur web.dev. L'icône Apple touch reçoit toujours un fond plein, car iOS affiche les zones transparentes en noir.
Créer un favicon à partir d'une image ou d'un PNG
Partez de la version la plus propre de votre logo. Un favicon s'affiche en 16 × 16 pixels dans un onglet : les textes fins et les traits minces disparaissent. Beaucoup de marques n'utilisent que leur symbole ou leur initiale. Si votre image source n'est pas carrée, le générateur la centre sur un canevas carré avec des marges transparentes.
Utilisez le curseur de marge quand le logo touche les bords, et remplissez le fond quand le logo est sombre et transparent, pour qu'il reste visible dans les onglets sombres.
Générer un favicon SVG
Si vous déposez un SVG, le jeu d'icônes l'inclut sous le nom icon.svg et le HTML l'ajoute comme icône supplémentaire. Les navigateurs qui gèrent les favicons SVG l'utilisent à toutes les tailles, les autres se rabattent sur favicon.ico. Les icônes PNG sont dessinées à partir du vecteur : elles sont donc nettes.
Favicon et recherche Google
Google peut afficher votre favicon à côté de vos résultats. Ses consignes demandent une image carrée d'au moins 8 × 8 pixels et en recommandent une de plus de 48 × 48 pixels (Google Search Central). La taille de 48 px du favicon.ico et l'icône de 192 px répondent à cette recommandation. Pour aller plus loin, consultez notre guide des tailles de favicon.