Non. SVG est accepté comme format source, mais le pack contient des fichiers PNG matriciels et un ICO. Il ne crée pas de favicon vectoriel ou animé.
Générateur de favicon
Transformez une image en ZIP contenant un ICO de plusieurs tailles, cinq icônes PNG et un manifeste web. Utilisez l’exemple d’installation ci-dessous pour intégrer ces fichiers à votre site web.
Fichiers du pack de favicons
Le téléchargement est une archive favicon-package.zip contenant sept fichiers. Le HTML est présenté comme exemple d’installation dans cet article ; ce n’est pas un fichier inclus dans le ZIP.
| Fichier | Taille ou contenu | Utilisation |
|---|---|---|
| favicon.ico | 16×16, 32×32 et 48×48 dans un seul fichier | Une icône de site web contenant plusieurs tailles. |
| favicon-16x16.png | 16×16 | Petite icône pour le navigateur. |
| favicon-32x32.png | 32×32 | Icône plus grande pour le navigateur. |
| apple-touch-icon.png | 180×180 | Icône référencée pour l’écran d’accueil Apple. |
| android-chrome-192x192.png | 192×192 | Icône référencée dans le manifeste web. |
| android-chrome-512x512.png | 512×512 | Icône plus grande référencée dans le manifeste web. |
| manifest.json | Nom du site, couleurs et deux références d’icônes | Un manifeste de départ à vérifier pour votre propre site. |
Formats d’entrée : PNG, JPG/JPEG, WebP, GIF ou SVG. Les fichiers générés sont des images ICO et PNG statiques ; importer un SVG ne crée pas de favicon SVG.
Créer un favicon : générer et installer les fichiers
1
Choisissez une source reconnaissable
Importez une image simple. Une source carrée d’au moins 512×512 pixels convient au plus grand PNG généré ; une image plus grande ne peut pas corriger un visuel peu lisible.
2
Générez et téléchargez le ZIP
Sélectionnez « Générer le pack de favicons » et téléchargez le ZIP une fois prêt. Décompressez-le avant d’ajouter les fichiers à votre site.
3
Vérifiez le manifeste et déployez les fichiers
Modifiez si nécessaire le nom du site et les couleurs par défaut dans manifest.json. Placez les fichiers à des URL publiques sur votre site et adaptez les chemins si vous utilisez un sous-dossier.
4
Ajoutez les références HTML et vérifiez
Utilisez l’exemple ci-dessous dans la section head de votre page. Vérifiez que les URL des icônes et du manifeste sont accessibles, puis contrôlez l’icône dans le navigateur.
Ajoutez les icônes à votre site web
Cet exemple suppose que les fichiers sont servis depuis la racine du site web. Ajoutez ces références dans la section head de la page et adaptez les chemins à votre déploiement.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">Vérifiez ces points avant de publier les fichiers :
| Point à vérifier | Action à effectuer |
|---|---|
| Chemins publics des fichiers | La barre oblique initiale désigne la racine du site web. Pour un sous-dossier, modifiez à la fois les valeurs href du HTML et les valeurs src des icônes dans manifest.json. |
| Valeurs par défaut du manifeste | Les champs name et short_name générés valent My Website ; theme_color et background_color valent #ffffff. Vérifiez-les après le téléchargement. Ces valeurs ne changent pas les couleurs des images d’icônes. |
| Configuration existante du site | Vérifiez si votre thème ou votre framework déclare déjà d’autres icônes. Évitez de conserver des références à un ancien favicon en parallèle de la nouvelle configuration. |
Un manifeste avec des icônes ne suffit pas à créer une application web complète, installable ou utilisable hors ligne. Ce générateur ne fournit pas de service worker et ne garantit pas l’installation sur tous les appareils.
Rendez l’icône lisible même en petite taille
🔎
Examinez le résultat en 16×16
Les petits caractères et les contours fins peuvent disparaître. Privilégiez un symbole simple, un contraste net et suffisamment d’espace autour du sujet.
↔
Vérifiez la forme et les marges
Les sources non carrées sont ajustées dans des images carrées avec des marges transparentes. Les petites sources peuvent être agrandies. Utilisez une image carrée préparée à l’avance si vous avez besoin d’un cadrage précis.
Choisissez le pack adapté à votre besoin
Cette page crée des fichiers favicon pour un site web à partir d’une image existante ; ce n’est pas un outil de dessin de logo.
Vous avez seulement besoin d’un fichier ICO ?
Utilisez PNG en ICO pour convertir un PNG en ICO sans générer le pack pour site web.
Vous développez une application mobile native ?
Utilisez le Générateur d’icônes d’application pour les ressources d’image natives iOS/Android. Ces fichiers répondent à un autre besoin que les favicons de site web.
Les images sont envoyées au serveur pour être traitées. Téléchargez le ZIP dès qu’il est prêt ; les fichiers temporaires suivent le processus de nettoyage du service.
Questions sur la configuration des favicons
Vérifiez d’abord les URL des fichiers déployés et les déclarations d’icônes de la page. Les navigateurs peuvent mettre les favicons en cache ; testez dans une nouvelle session du navigateur après avoir confirmé que le site pointe vers les nouveaux fichiers.
Le formulaire actuel permet uniquement de sélectionner une image. Adaptez les champs name, short_name, theme_color et background_color du manifeste téléchargé à votre site et gardez une valeur theme-color cohérente dans le HTML.
Non. Il fournit des fichiers d’icônes et un manifeste de départ. L’installation et le fonctionnement hors ligne nécessitent une configuration supplémentaire du site ; le pack n’ajoute pas ces fonctions automatiquement.