Comment utiliser : Générateur de favicons
- Sélectionnez « Texte / emoji » et saisissez une lettre ou choisissez un emoji, ou passez à « Image » et glissez-déposez votre logo (un fichier SVG ou un fichier PNG carré d'au moins 512 px donne les meilleurs résultats).
- Réglez les couleurs, la taille du texte, les marges intérieures et l'arrondi des coins tout en visualisant l'aperçu dans l'onglet du navigateur à la taille réelle de 16 px.
- Veuillez saisir le nom de votre site et la couleur du thème pour le manifeste Web.
- Cliquez sur « Télécharger tout (ZIP) », transférez les fichiers dans le dossier racine de votre site et collez l'extrait de code HTML dans
<head>. Sur Webflow, téléchargez plutôt le favicon 32×32 et le webclip 256×256 dans les « Paramètres du site ».
Qu'est-ce qu'une favicon ?
Un favicon est la petite icône que les navigateurs affichent dans les onglets, les favoris et l’historique, et que Google affiche à côté du nom de votre site dans les résultats de recherche sur mobile et sur ordinateur. Les téléphones utilisent également des versions plus grandes lorsqu’un utilisateur ajoute votre site à son écran d’accueil. De nos jours, un ensemble complet est peu volumineux : un fichier ICO pour les requêtes héritées et par défaut /favicon.ico , un fichier PNG pour les navigateurs modernes, une icône Apple Touch, deux icônes Android/PWA référencées dans le manifeste d’une application web — et, en option, un fichier SVG.
Ce que ce générateur crée
| Fichier | Taille | Utilisé par |
|---|---|---|
favicon.ico | 16, 32, 48 px dans un seul fichier | Tous les navigateurs, les raccourcis Windows, les outils qui demandent /favicon.ico directement |
favicon-32x32.png | 32 × 32 | Onglets des navigateurs modernes ; la taille demandée par Webflow |
apple-touch-icon.png | 180 × 180 | Écran d'accueil de l'iPhone/iPad et Safari |
android-chrome-192x192.png, -512x512.png | 192, 512 | Écran d'accueil Android, installation de l'application PWA et écran de démarrage |
webclip-256x256.png | 256 × 256 | Paramètre « Webclip » de Webflow |
site.webmanifest | JSON | Nom, couleurs et liste d’icônes pour les sites installables |
Le fichier ICO est généré directement dans votre navigateur : un petit en-tête ICO et un répertoire suivis de trois images compressées au format PNG, un format pris en charge par tous les navigateurs actuels et toutes les versions de Windows. Aucun fichier n’est mis en ligne.
Bonnes pratiques pour les favicons
- Concevez pour une taille de 16 px. Les détails fins et les mots longs disparaissent à la taille d’un onglet. Une seule lettre en gras, un symbole simple ou un emoji sont bien plus lisibles qu’un logo complet accompagné d’un slogan.
- Les icônes tactiles Apple doivent être opaques. iOS arrondit lui-même les coins et remplit les pixels transparents de noir ; cet outil exporte donc toujours l’icône de 180 px (ainsi que le Webclip Webflow) sous la forme d’un carré complet avec un arrière-plan uni.
- Vérifiez le mode sombre. Un logo sombre sur fond transparent disparaît dans un onglet de navigateur sombre — l’aperçu affiche les deux thèmes. Ajoutez une couleur d’arrière-plan ou un remplissage si nécessaire.
- Google Search exige une favicon carrée pouvant être indexée et recommande une taille supérieure à 48 × 48 px ; c’est pourquoi l’extrait renvoie également vers le fichier PNG de 192 px. Les modifications peuvent mettre plusieurs jours à apparaître dans les résultats de recherche.
- Mise en cache : les navigateurs mettent les favicons en cache de manière intensive. Si vous en remplacez une, effectuez un test dans une fenêtre privée ou ajoutez une requête de version telle que
/favicon.ico?v=2.
Ajouter une favicon dans Webflow
Ouvrez les paramètres du site → Général, puis faites défiler jusqu’à Favicon et Webclip. Importez une image de 32 × 32 px comme favicon et une image de 256 × 256 px comme webclip (utilisé comme icône tactile Apple), enregistrez, puis publiez le site. Webflow génère automatiquement les <link> balises automatiquement ; vous n’avez donc pas besoin de l’extrait de code HTML ni du manifeste, sauf si vous les ajoutez via du code personnalisé. Pour vérifier ensuite ce qui est en ligne, le Meta Tag Checker répertorie les balises de favicon et d’icône tactile Apple.
Aussi recherché comme : favicon, favicon.ico, convertisseur ico, png vers ico, icône apple touch, site.webmanifest, favicon emoji, webclip.
Outils complémentaires : Générateur de favicons
- PWA Manifest Generator — Make any website an installable PWA.
- Outil de redimensionnement d’images — Redimensionnez une photo selon des dimensions précises en pixels ou un pourcentage, recadrez-la pour l'adapter au format des réseaux sociaux, ou insérez-la dans un cadre avec une couleur d'arrière-plan — le tout directement dans votre navigateur.
- Générateur d’images OG — Créez en quelques secondes une image d'aperçu de lien soignée pour Facebook, LinkedIn, X, Slack et WhatsApp : choisissez un modèle, saisissez votre titre, ajoutez un logo, puis téléchargez le fichier PNG et les balises méta correspondantes.
- Meta Tag Generator — Fill in one form and get a complete, valid <head> — title, description, canonical, robots, Open Graph, X/Twitter cards, theme color and icons — with live previews and Webflow-specific output.
Questions fréquentes
Quelle doit être la taille d’une favicon ?
favicon.ico, un fichier PNG au format 32×32, une icône tactile Apple de 180×180 ainsi que des fichiers PNG de 192×192 et 512×512 pour Android. Ce générateur les produit tous à partir d’une seule source.Ai-je encore besoin d’un fichier favicon.ico ?
/favicon.ico à partir de la racine du site, même en l'absence de balise <link> balise ; ainsi, en en conservant une à cet emplacement, vous éviterez les erreurs 404 et les icônes manquantes.Quelles sont les dimensions de favicon requises par Webflow ?
favicon-32x32.png et webclip-256x256.png fichiers du fichier ZIP.Puis-je utiliser un emoji comme favicon ?
Pourquoi mon nouveau favicon ne s’affiche-t-il pas ?
?v=2) aux URL des icônes. La recherche Google peut mettre plusieurs jours, voire plusieurs semaines, à réindexer le site.