Générateur de favicon
Créer toutes les icônes d’un site à partir d’une image : favicon.ico, PNG en 16 et 32 pixels, icône Apple et icônes Android, avec le manifeste et le code HTML.
Essayer un autre outil
Une sélection pour compléter cet outilCe générateur crée en une fois toutes les icônes dont un site a besoin à partir d’une seule image : favicon.ico pour les navigateurs, PNG de 16 et 32 pixels, icône Apple de 180 pixels pour l’écran d’accueil d’un iPhone, icônes Android de 192 et 512 pixels, et le fichier site.webmanifest avec le nom et la couleur du site. Le tout est réuni dans un fichier ZIP, avec le code HTML à coller dans la section head. L’image est traitée dans le navigateur.
Comment utiliser cet outil
- 01Renseigner le siteIndiquez le nom du site et sa couleur de thème, utilisés dans le manifeste.
- 02Déposer l’imageGlissez une image PNG ou JPG, idéalement carrée et d’au moins 512 pixels, jusqu’à 10 Mo.
- 03Télécharger et installerTéléchargez le ZIP, placez les fichiers à la racine du site et collez le code HTML dans la section head.
Dans quels cas est-ce utile ?
- Nouveau sitePréparer toutes les icônes avant la mise en ligne.
- Changement de logoRégénérer le pack complet en une fois.
- Application web progressiveFournir les icônes et le manifeste nécessaires à l’installation.
Exemples
- Un site vitrineUn logo carré de 1 024 pixels donne les sept fichiers du pack et les balises link correspondantes.
- L’écran d’accueil d’un iPhoneL’icône apple-touch-icon de 180 × 180 pixels s’affiche quand un visiteur ajoute le site à son écran d’accueil.
- Une application webLes icônes Android de 192 et 512 pixels et le manifeste permettent l’installation du site comme une application.
Conseils pour un meilleur résultat
- Une image simpleÀ 16 pixels, seuls les formes et les contrastes forts restent lisibles : une initiale ou un symbole fonctionne mieux qu’un logo détaillé.
- Fond de l’icône AppleiOS affiche les zones transparentes de l’icône Apple sur un fond, souvent noir : prévoyez un logo sur fond plein.
- Vider le cacheLes navigateurs gardent longtemps l’ancien favicon en mémoire : rechargez la page sans cache pour voir le nouveau.
Les fichiers du pack
favicon.ico (onglets et favoris), favicon-16x16.png et favicon-32x32.png (navigateurs modernes), apple-touch-icon.png de 180 pixels (écran d’accueil iOS), android-chrome-192x192.png et android-chrome-512x512.png (Android et installation), et site.webmanifest.
Le code HTML
L’outil fournit les balises link à placer dans la section head de chaque page : icônes PNG, icône Apple, favicon.ico et manifeste. Les chemins supposent que les fichiers sont à la racine du site.
Confidentialité
Les icônes et le ZIP sont créés dans le navigateur. L’image n’est ni envoyée ni conservée.
Questions fréquentes
Comment créer un favicon ?
Renseignez le nom du site, déposez votre logo et téléchargez le ZIP contenant toutes les icônes.
Quelle taille d’image utiliser ?
Une image carrée d’au moins 512 pixels, pour des icônes nettes à toutes les tailles.
Où placer les fichiers ?
À la racine du site, puis collez le code HTML fourni dans la section head.
Qu’est-ce que le fichier site.webmanifest ?
Un fichier qui décrit le site, son nom, ses icônes et sa couleur, utilisé notamment par Android pour l’installation.
Pourquoi mon ancien favicon s’affiche-t-il encore ?
Le navigateur le garde en cache : rechargez sans cache ou patientez quelques jours.
Mon image est-elle envoyée ?
Non, tout se passe dans le navigateur.