Ce générateur de favicons gratuit produit un kit complet à partir d'un SVG, d'une lettre stylisée ou d'une simple description. Créer un favicon n'a jamais été aussi rapide : 10 tailles PNG, fichier ICO multi-résolutions, manifest PWA et snippet HTML prêt à coller, le tout généré localement dans votre navigateur.

↓

Dépose ton SVG ici

ou clique pour parcourir tes fichiers

SVG uniquement · max 5 MB
Configure ton favicon à droite,
l'aperçu apparaît ici.
Les Google Fonts sont chargées à la demande. Au final, on rastérise directement sur canvas — peu importe la police, le rendu est identique partout.
64
Source

Ton favicon, partout.

Toutes les tailles dont ton site a besoin — pour les navigateurs modernes, iOS, Android et les PWA. Télécharge tout en un seul fichier ZIP, ou pioche les tailles individuellement.

0%
Ajoute de l'air autour de l'icône avant la rastérisation. Utile si ton SVG remplit tout son viewBox et paraît étouffé à 16×16.

Aperçu en contexte

À quoi ça ressemble pour de vrai
Onglet navigateur
Mon site ×
Écran d'accueil iOS
Mon site
Launcher Android
Mon site

Tailles générées

Configuration PWA & HTML

Personnalise les infos de ton app, puis copie le HTML à coller dans ton <head> et le manifest.json à placer à la racine.

Qu'est-ce qu'un favicon ?

Définition

Un favicon (contraction de favorite icon) est la petite icône qui s'affiche dans l'onglet du navigateur, à côté du titre de la page. On la retrouve aussi dans la barre de favoris, l'historique, les résultats de recherche mobile de Google et sur l'écran d'accueil quand un site est ajouté en raccourci sur smartphone.

Techniquement, c'est un fichier image servi depuis la racine du site ou déclaré dans le HTML via une balise <link rel="icon">. Historiquement limité au format ICO en 16x16 pixels, le favicon moderne se décline aujourd'hui en plusieurs formats (ICO, PNG, SVG) et tailles, pour couvrir tous les contextes d'affichage.

Un favicon bien fait est minuscule mais visible : il reste lisible à 16x16, fonctionne sur fond clair comme sur fond sombre, et reflète l'identité visuelle du site sans détail superflu.

Pourquoi avoir un favicon sur son site ?

Bénéfices

Le favicon est l'un des éléments les plus négligés du web, alors qu'il joue un rôle direct sur la reconnaissance de marque, la confiance et même le référencement. Voici concrètement ce qu'il vous apporte.

Reconnaissance immédiate

Quand un utilisateur a dix onglets ouverts, le favicon est souvent la seule chose visible. Une icône claire permet de retrouver votre site en un coup d'œil.

Crédibilité et confiance

Un site sans favicon affiche une icône générique grise dans l'onglet, ce qui donne une impression d'amateurisme. Le favicon est un signal de soin et de professionnalisme.

Visibilité dans les SERP mobiles

Google affiche le favicon à côté du nom de domaine dans les résultats de recherche sur mobile. Une icône lisible améliore le taux de clic depuis les pages de résultats.

Support PWA et écran d'accueil

Si un utilisateur épingle votre site sur son téléphone, c'est le favicon (via site.webmanifest et apple-touch-icon) qui devient l'icône de l'application. Sans ces fichiers, l'icône sera floue ou par défaut.

Identité dans les favoris

Dans la barre de favoris, seul le favicon est affiché par défaut, sans le titre. C'est lui qui détermine si l'utilisateur reclique sur votre site ou non.

Cohérence multi-plateforme

Un kit complet (ICO, PNG en plusieurs tailles, SVG, apple-touch-icon) garantit un rendu net sur Chrome, Firefox, Safari, iOS, Android et les écrans Retina.

Quels formats et tailles pour un favicon en 2026 ?

Formats

Il n'existe pas un seul fichier favicon mais un ensemble, chaque format ayant son usage. Voici les fichiers que produit notre générateur de favicons et à quoi ils servent.

favicon.ico
Fichier historique multi-résolutions (16x16, 32x32, 48x48) placé à la racine du site. Toujours utile pour la compatibilité avec les anciens navigateurs et certains contextes Windows.
favicon-16x16.png & favicon-32x32.png
PNG modernes pour les onglets de navigateur. Le 16x16 sert aux onglets standards, le 32x32 aux écrans Retina et à la barre de favoris.
apple-touch-icon.png (180x180)
Icône utilisée par iOS quand un utilisateur ajoute le site à l'écran d'accueil de son iPhone ou iPad. Sans elle, iOS prend une capture floue de la page.
android-chrome-192x192.png & 512x512.png
Icônes déclarées dans le site.webmanifest pour Android, Chrome et les applications progressives (PWA). La 512x512 est aussi utilisée comme splash screen.
favicon.svg
Format vectoriel moderne, supporté par Firefox, Chrome et Safari récents. Avantage : netteté parfaite à toutes les tailles et support du mode sombre via media queries CSS.
site.webmanifest
Fichier JSON qui déclare le nom du site, les icônes, les couleurs de thème et le comportement PWA. Indispensable pour qu'Android et Chrome utilisent correctement vos icônes.

Comment créer un favicon en 3 étapes

Guide
  1. 01

    Choisir une source

    Importez un SVG existant, composez une lettre stylisée (police, couleur, forme de fond) ou décrivez votre projet en quelques mots pour une génération par IA. Les modes SVG et lettre fonctionnent à 100% dans votre navigateur, sans envoi de fichier sur un serveur.

  2. 02

    Vérifier l'aperçu et le padding

    ILoveFavicon affiche immédiatement le rendu dans un onglet de navigateur, sur écran d'accueil iOS et Android. Ajustez le padding pour éviter que votre icône touche les bords, puis configurez les couleurs du manifest si vous visez une PWA.

  3. 03

    Télécharger et installer

    Récupérez le ZIP : il contient les 10 PNG, le fichier ICO, le site.webmanifest et un snippet HTML prêt à coller dans la balise <head> de votre site. Déposez les fichiers à la racine du domaine, collez le snippet, c'est terminé.

Questions fréquentes sur les favicons

FAQ
Quelle est la taille idéale d'un favicon ?

Il n'y a pas une seule taille mais un ensemble. Le minimum vital est un ICO contenant 16x16, 32x32 et 48x48, plus un apple-touch-icon en 180x180 pour iOS et deux PNG en 192x192 et 512x512 pour Android et les PWA. ILoveFavicon génère automatiquement ces 10 tailles à partir d'une seule source.

Quelle différence entre favicon.ico et favicon.png ?

Le format ICO est un conteneur historique qui peut embarquer plusieurs résolutions dans un seul fichier, ce qui le rend pratique pour la compatibilité Windows et les vieux navigateurs. Le PNG est plus moderne, plus léger et supporte la transparence proprement. En pratique, on sert les deux : ICO pour la compatibilité, PNG pour les usages modernes.

Comment ajouter un favicon à mon site ?

Placez les fichiers (favicon.ico, PNG, site.webmanifest) à la racine de votre site, puis ajoutez les balises et dans le de votre HTML. Notre générateur produit le snippet HTML exact à copier-coller, vous n'avez rien à écrire à la main.

Pourquoi mon favicon ne s'affiche pas ?

Trois causes principales : le navigateur a mis en cache l'ancienne version (forcez un rafraîchissement avec Ctrl+F5), le chemin déclaré dans la balise ne correspond pas à l'emplacement réel du fichier, ou le serveur renvoie un mauvais type MIME. Vérifiez aussi que le fichier est bien accessible publiquement en tapant son URL directement dans le navigateur.

Est-ce que Google indexe les favicons ?

Oui. Depuis 2019, Google affiche le favicon à côté du nom de domaine dans les résultats de recherche mobile et dans certains aperçus desktop. Pour qu'il soit pris en compte, le favicon doit faire au moins 48x48 pixels, être hébergé sur le même domaine que la page et être déclaré via .

Faut-il un favicon différent pour iOS et Android ?

Pas un design différent, mais des fichiers spécifiques. iOS lit la balise et attend un PNG de 180x180 sans transparence. Android lit le site.webmanifest et utilise les icônes 192x192 et 512x512 qui y sont déclarées. Un kit complet couvre les deux automatiquement.

Quel format pour un favicon en 2026 ?

La combinaison gagnante est : un favicon.svg pour les navigateurs modernes (vectoriel, support du mode sombre), un favicon.ico pour la compatibilité, un apple-touch-icon.png en 180x180, et deux PNG en 192x192 et 512x512 référencés dans un site.webmanifest. Cette approche couvre 100% des cas d'usage actuels.

Le favicon SVG est-il supporté partout ?

Il est supporté par Chrome, Firefox, Edge et Safari dans leurs versions récentes, ce qui couvre la majorité du trafic. Pour les navigateurs plus anciens ou certains contextes système (Windows, applications PWA), un fallback ICO et PNG reste nécessaire. C'est pourquoi un bon kit favicon inclut toujours les deux.