Générateur de Favicon
Générateur de favicon en ligne — texte, emoji, image, formes, ICO + PNG toutes tailles, ZIP complet avec HTML
Texte
Fond
Forme du favicon
Aperçu en temps réel
Aperçu onglet navigateur
Mon Site Web
Icône mobile
Mon App
Télécharger
Favicon : guide complet pour 2024
Le favicon (Favorites Icon) est la petite icône qui s'affiche dans l'onglet du navigateur, les favoris, les résultats de recherche Google et sur l'écran d'accueil mobile. Un favicon bien conçu renforce la reconnaissance de votre marque et améliore l'expérience utilisateur.
Quelles tailles de favicon générer ?
| Fichier | Taille | Usage |
|---|---|---|
favicon.ico | 16×16, 32×32 | Navigateurs, favoris — compatibilité universelle |
favicon-32x32.png | 32×32 | Onglets navigateurs modernes |
favicon-16x16.png | 16×16 | Onglets petits, favoris |
apple-touch-icon.png | 180×180 | iPhone, iPad — écran d'accueil iOS |
android-chrome-192x192.png | 192×192 | Android Chrome, PWA manifest |
android-chrome-512x512.png | 512×512 | Splash screen PWA, Play Store |
og-image.png | 1200×630 | Partage réseaux sociaux (Open Graph) |
Balises HTML minimales pour un favicon moderne
<link rel="icon" type="image/x-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="/site.webmanifest">
Questions fréquentes
La stratégie moderne recommandée est : favicon.ico (16+32px) à la racine pour la compatibilité universelle, des PNG pour les navigateurs modernes, apple-touch-i...
La stratégie moderne recommandée est : favicon.ico (16+32px) à la racine pour la compatibilité universelle, des PNG pour les navigateurs modernes, apple-touch-icon.png (180×180) pour iOS, et android-chrome-192x192.png + 512x512.png pour Android et les PWA. Le fichier ICO reste indispensable car certains outils et lecteurs RSS le cherchent directement à /favicon.ico.
Placez tous les fichiers favicon à la racine de votre site (ex. https://votresite.com/favicon.ico). Le favicon.ico est automatiquement détecté par les navigateu...
Placez tous les fichiers favicon à la racine de votre site (ex. https://votresite.com/favicon.ico). Le favicon.ico est automatiquement détecté par les navigateurs sans balise HTML. Pour les autres formats, ajoutez les balises <link> générées par notre outil dans la section <head> de votre HTML.
Utilisez l'onglet 'Importer image' et glissez-déposez votre fichier SVG. L'outil le dessine sur canvas et le convertit en PNG raster à toutes les tailles nécess...
Utilisez l'onglet 'Importer image' et glissez-déposez votre fichier SVG. L'outil le dessine sur canvas et le convertit en PNG raster à toutes les tailles nécessaires. Pour les navigateurs modernes qui supportent les favicons SVG (Chrome, Firefox), vous pouvez aussi ajouter directement <link rel="icon" href="/favicon.svg"> en plus des PNG générés.
Le site.webmanifest est un fichier JSON qui décrit votre application web progressive (PWA). Il définit le nom de l'app, les icônes (192×192 et 512×512), la coul...
Le site.webmanifest est un fichier JSON qui décrit votre application web progressive (PWA). Il définit le nom de l'app, les icônes (192×192 et 512×512), la couleur de thème, et le mode d'affichage. Les navigateurs Chrome et Android l'utilisent pour proposer l'installation de votre site sur l'écran d'accueil.
Les favicons sont mis en cache agressivement par les navigateurs. Pour forcer le rechargement, effacez le cache (Ctrl+Shift+R ou Ctrl+F5), ouvrez un onglet en n...
Les favicons sont mis en cache agressivement par les navigateurs. Pour forcer le rechargement, effacez le cache (Ctrl+Shift+R ou Ctrl+F5), ouvrez un onglet en navigation privée, ou ajoutez un paramètre de version à l'URL du favicon : <link rel="icon" href="/favicon.ico?v=2">.
Publicité
Outils de la même catégorie
Outils populaires