Favicon Generator
Générer favicon.ico et toutes les tailles PNG nécessaires aux navigateurs, à iOS et à Android.
What is Favicon Generator?
Un favicon est la petite icône affichée dans un onglet de navigateur, une liste de signets et une barre d'adresse pour représenter un site Web, généralement le petit logo qui apparaît à côté du titre d'une page. Les navigateurs modernes et les plates-formes mobiles demandent plusieurs formats et tailles en même temps : un favicon.ico classique pour les onglets de bureau, une icône apple-touch-icon PNG pour les écrans d'accueil d'iOS et des PNG plus grandes déclarées dans un fichier site.webmanifest pour les installations Android et PWA. Le format .ico est un petit conteneur qui peut regrouper plusieurs tailles d'image, généralement 16, 32 et 48 pixels, dans un seul fichier. L'envoi de l'ensemble plutôt que d'un seul favicon.ico garantit que l'icône du site soit nette sur chaque appareil et surface où elle apparaît.
How to Use Favicon Generator
- Faites glisser un logo ou une image sur la zone de dépôt, ou cliquez dessus pour choisir un fichier — une image carrée avec un arrière-plan transparent ou simple fonctionne le mieux.
- L'outil génère un favicon.ico réel (16, 32 et 48px combinés) ainsi que des PNG individuels à chaque taille que les navigateurs modernes, iOS et Android demandent réellement.
- Téléchargez chaque fichier individuellement, ou cliquez sur "Télécharger tout sous forme de .zip" pour obtenir tous les fichiers dans un seul fichier compressé.
- Placez les fichiers dans le dossier racine (ou public) de votre site, puis copiez le code HTML dans la balise <head> de votre page et le fichier JSON site.webmanifest dans un fichier du même nom à côté d'eux.
Examples
Logo carré
Input: Logo PNG 512×512
Output: favicon.ico + 5 tailles PNG, sans padding
Image non carrée
Input: Bannière large 1200×630
Output: Mêmes 6 fichiers, chacun centré avec un padding transparent pour rester carré
Common Mistakes
- Ne télécharger que favicon.ico et oublier les images PNG apple-touch-icon/android-chrome, laissant les icônes de l'écran d'accueil avoir une mauvaise apparence sur les appareils mobiles.
- Télécharger une image source à très basse résolution — l'icône de 512×512 aura une apparence floue ou pixelisée si l'original est plus petit que celle-ci.
- Oublier d'ajouter les balises <link> à la section <head> de votre page — les fichiers existant dans votre projet ne font rien tant qu'une page ne les référence pas.
- Placer les fichiers générés dans le mauvais répertoire — ils doivent être servis à partir de la racine de votre site (par exemple, yoursite.com/favicon.ico) à moins que vous ne mettiez à jour les chemins dans le code pour correspondre à l'endroit où vous les placez.
Why Use This Tool
- Génère un conteneur .ico réel et conforme aux spécifications, et non juste une image PNG renommée.
- Couvre toutes les tailles que les navigateurs modernes, iOS et Android demandent réellement, et non juste l'icône favicon classique de 16×16.
- Les sources non carrées sont centrées avec un remplissage transparent au lieu d'être déformées.
- Un code HTML <head> prêt à être collé et un fichier JSON site.webmanifest inclus — pas de devinette sur la bonne balise.
- Un clic sur « Télécharger tout sous forme de .zip » rassemble tous les fichiers au lieu de cliquer sur Télécharger six fois séparément.