Générateur de favicon

Transformez votre logo ou quelques lettres en toutes les icônes dont un site a besoin : un favicon.ico multi-tailles, des icônes PNG pour les navigateurs, l’iPhone et Android, et un site.webmanifest prêt à l’emploi. Le tout dans un seul ZIP, avec le code HTML à coller.

Vos images restent sur votre appareil. Le traitement se fait entièrement dans votre navigateur.

Comment utiliser « Générateur de favicon »

  1. Déposez votre logo (PNG, JPG, WebP ou SVG) ou cliquez sur « Créer avec des lettres ou un emoji ».
  2. Choisissez comment l’image est cadrée, ou tapez les lettres et choisissez la forme et les couleurs. Vérifiez le résultat dans l’aperçu de l’onglet.
  3. Cliquez sur « Créer les favicons », téléchargez le ZIP, envoyez les fichiers à la racine de votre site et collez le code HTML dans le <head>.

Questions fréquentes

Quels fichiers contient le ZIP ?

favicon.ico (16, 32 et 48 px dans un seul fichier), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png et site.webmanifest. Cela couvre tous les navigateurs actuels, l’écran d’accueil de l’iPhone et de l’iPad, et Android.

Où placer les fichiers ?

Envoyez-les à la racine de votre site (à côté d’index.html) et collez les balises <link> copiées dans le <head> de vos pages. Si vous les placez dans un sous-dossier, modifiez les chemins dans le code et dans site.webmanifest.

Quelle image donne le meilleur résultat ?

Un logo carré et simple, sur fond transparent et sans petit texte, car les détails fins disparaissent à 16 px. Pour détourer le logo, utilisez Supprimer l’arrière-plan ; pour le rendre carré, Recadrer une image. Un SVG donne le rendu le plus net à toutes les tailles, et vous pouvez d’abord l’alléger avec Optimiser un SVG.

Puis-je utiliser un emoji ?

Oui. Choisissez « Créer avec des lettres ou un emoji » et tapez jusqu’à trois caractères, par exemple vos initiales ou un seul emoji. Les emojis sont dessinés avec la police emoji de votre appareil ; ils diffèrent donc un peu entre Windows, Mac et Android.

Pourquoi l’icône iPhone a-t-elle un fond plein ?

iOS affiche en noir les zones transparentes des icônes de l’écran d’accueil. apple-touch-icon.png reçoit donc toujours un fond carré plein : la couleur choisie pour les lettres, du blanc pour les images. iOS arrondit lui-même les coins.

Mon image est-elle envoyée ?

Non. Toutes les icônes sont dessinées dans votre navigateur et votre image ne quitte jamais votre appareil.

Autres outils

Rechercher un outil