Générateur favicon
Ne livrez pas l'icône d'onglet par défaut. Téléversez une image et exportez le jeu de favicons attendu par les navigateurs, iOS, Android et PWA.
Téléverser une image
PNG, JPG et SVG pris en charge. Une source 512 x 512 ou plus fonctionne mieux.
Aperçu en direct
Extrait HTML
<!-- Add inside <head> --> <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">
Bonnes pratiques favicon
Pourquoi plusieurs tailles comptent
Navigateurs, favoris, onglets épinglés, invites d'installation et raccourcis mobiles demandent des tailles différentes. Un jeu complet garde l'icône nette au lieu de laisser les plateformes agrandir un petit fichier.
PNG vs ICO
Les navigateurs modernes gèrent bien les icônes PNG. ICO reste utile pour l'ancienne compatibilité, tandis que PNG donne souvent une transparence plus propre et une gestion de fichiers plus simple.
Concevoir pour les petites tailles
Une favicon est souvent vue en 16x16. Formes simples, contraste fort et moins de détails survivent généralement mieux qu'un logo complet comprimé dans un onglet.
Guide des icônes par plateforme
Navigateur sur ordinateur
Utilisé pour les onglets, favoris et historiques du navigateur.
iOS / iPhone
Utilisé quand le site est ajouté à l'écran d'accueil. Un visuel opaque fonctionne souvent mieux.
Android Chrome
Utilisé avec un manifest web pour les invites d'installation, écrans de lancement et sélecteurs d'applications.
Guide d'installation rapide
Télécharger et extraire
Utilisez le bouton de téléchargement pour exporter un zip contenant fichiers PNG, fichiers manifest et extrait pour le head.
Téléverser à la racine publique
Placez les fichiers extraits là où ils sont accessibles publiquement, par exemple le dossier public du site.
Ajouter le balisage head
Copiez l'extrait généré dans le head du document et videz le cache du navigateur pour vérifier les nouvelles icônes.
Questions fréquentes
Que contient le fichier zip ?
Le zip contient les PNG favicon courants, les icônes Apple Touch, les tailles Android et un fichier site.webmanifest.
Qu'est-ce que site.webmanifest ?
C'est un manifest JSON qui indique aux navigateurs comment le site doit se comporter une fois installé sur l'écran d'accueil ou lancé comme application.
Comment utiliser ces icônes ?
Téléversez les fichiers générés dans la racine publique et incluez le balisage du head sur les pages qui doivent exposer la favicon.
Pourquoi mon ancienne favicon s'affiche encore ?
Les navigateurs mettent fortement les favicons en cache. Essayez un rafraîchissement complet, videz les données du site, changez l'URL de l'icône ou testez dans un profil navigateur neuf.
La favicon doit-elle être identique à l'icône app ?
Elle doit sembler liée, mais pas forcément identique. Beaucoup de marques utilisent un signe simplifié pour la favicon et une icône plus riche pour l'application installée.