Générateur de favicon
Le Générateur de favicon transforme n'importe quelle image en un lot d'icônes complet pour votre site web. Le traitement s'effectue entièrement sur votre appareil grâce à l'API Canvas de votre navigateur. Vos images restent totalement privées sans aucun transfert vers un serveur distant.
Créer un favicon en ligne à partir d'une image
Pour générer l'ensemble des icônes de votre site, vous pouvez glisser-déposer votre image dans le navigateur. L'outil génère un fichier ZIP complet en quelques secondes.
- Déposez votre image ou cliquez pour la sélectionner depuis votre appareil.
- Prévisualisez le rendu en direct dans un onglet virtuel et un écran d'accueil.
- Ouvrez le panneau Ajustements pour ajouter des marges ou définir une couleur de fond.
- Téléchargez l'archive ZIP contenant tous les formats et le fichier favicon-tags.html.
Convertir une image en ico, PNG et Apple touch icon
Un site moderne nécessite plusieurs déclinaisons d'icônes pour s'afficher correctement sur tous les appareils. L'archive ZIP générée inclut tous les formats requis.
- favicon.ico : contient les définitions 16x16, 32x32 et 48x48 pixels pour assurer la rétrocompatibilité.
- favicon-16x16.png et favicon-32x32.png : dédiés aux onglets des navigateurs web.
- favicon-48x48.png : format demandé par Google pour l'affichage dans les résultats de recherche.
- apple-touch-icon.png : image de 180x180 pixels pour l'écran d'accueil iOS.
- site.webmanifest et images 192x192 / 512x512 : pour les applications web progressives (PWA) et Android.
Convertir un PNG en favicon ou utiliser d'autres formats
L'outil accepte les fichiers PNG, JPG, SVG, WebP et GIF. Les fichiers PNG sont idéaux car ils conservent la transparence, qui est répercutée sur vos icônes.
Si vous utilisez un fichier vectoriel SVG, il est pixellisé avec précision à chaque taille de sortie. Pour les GIF animés, la première image est automatiquement utilisée.
Comment ajouter le code HTML dans la balise
Une fois l'archive décompressée, copiez l'ensemble des fichiers dans le dossier racine de votre serveur web. Ce placement à la racine permet aux navigateurs et robots d'accéder directement au fichier favicon.ico.
Ouvrez le fichier favicon-tags.html fourni, copiez les balises HTML qu'il contient et collez-les dans la balise <head> de vos pages web.
À quoi sert le fichier site.webmanifest ?
Le fichier site.webmanifest est un petit fichier JSON qui indique aux navigateurs comment votre site doit se comporter lorsqu'il est installé sur un écran d'accueil.
Il pointe vers les icônes de 192x192 et 512x512 pixels pour alimenter l'affichage sur Android et les applications web progressives.
Foire aux questions
Comment convertir gratuitement une image PNG ou JPG en fichier favicon.ico ?
Il suffit de glisser votre fichier PNG ou JPG dans l'outil, d'ajuster si nécessaire les marges, puis de télécharger l'archive ZIP. Tout le processus est gratuit et s'exécute directement dans votre navigateur sans aucune création de compte.
Quelle est la différence entre le fichier favicon.ico et les fichiers PNG ?
Le fichier favicon.ico est un conteneur unique regroupant plusieurs dimensions (16x16, 32x32 et 48x48 pixels) pour garantir une compatibilité universelle avec les anciens navigateurs. Les fichiers PNG sont des images distinctes pour chaque taille, offrant un rendu plus net et moderne sur les écrans récents.
Pourquoi mon nouveau favicon ne s'affiche-t-il pas immédiatement sur mon site ?
Les navigateurs conservent souvent les icônes de site en cache de manière très agressive. Effectuez un rafraîchissement forcé de votre page avec la combinaison de touches Ctrl + F5 sous Windows ou Cmd + Shift + R sous macOS pour forcer la mise à jour.
Quelle taille doit faire l'image de départ pour un résultat optimal ?
Une image carrée d'au moins 256x256 pixels permet d'obtenir des icônes parfaitement nettes dans toutes les résolutions de sortie. Si votre image n'est pas carrée, l'outil la centre automatiquement.
Comment fonctionne l'Apple touch icon sur iPhone et iPad ?
Safari sous iOS utilise le fichier apple-touch-icon.png de 180x180 pixels lorsque l'utilisateur ajoute votre site à son écran d'accueil. Comme les icônes iOS ne gèrent pas la transparence, l'outil applique la couleur de fond choisie ou un fond blanc par défaut.
Peut-on générer un favicon net à partir d'un fichier SVG ?
Oui, vous pouvez importer une image vectorielle SVG. L'outil la pixellise proprement pour chaque taille d'icône requise dans le lot final.
Où faut-il placer le fichier site.webmanifest et les icônes ?
Tous les fichiers générés doivent être placés dans le dossier racine de votre site web, au même niveau que votre page d'accueil. Vous devez ensuite insérer le code du fichier favicon-tags.html dans la balise de vos pages.
Recommandés
-
The $100 Startup (Chris Guillebeau, en anglais)Votre site a son icône ; faites-le rapporter
-
Tablette graphique Wacom Intuos SDessinez vous-même votre logo et votre icône
-
Écran portable InnoView 15,6"Un second écran pour construire votre site
Aide à garder les outils gratuits. ✨
Images non contractuelles. En tant que Partenaire Amazon, je réalise un bénéfice sur les achats remplissant les conditions requises.
