Accueil / Générateur de favicon

Générateur de favicon

Déposez votre logo et obtenez toutes les icônes dont votre site a besoin : favicon.ico, icône Apple, icônes d'appli et manifest – avec les lignes HTML correspondantes.

Déposez votre logo ici

ou touchez pour choisir. Idéalement carré, en PNG ou SVG.

Choisir un fichier

Pas à pas

  1. Déposez votre logo, idéalement carré, en PNG avec fond transparent ou en SVG.
  2. Dans « Nom du site (pour le manifest) », saisissez le nom sous lequel le site doit apparaître lorsque quelqu'un l'installe comme application sur l'écran d'accueil.
  3. Dans « Arrière-plan », gardez « Transparent » ou choisissez une couleur en carré, arrondi ou rond. La teinte se règle dans « Couleur ».
  4. Avec « Marge intérieure », vous définissez l'espace laissé autour du logo. L'aperçu affiche toutes les tailles de 16 à 512 pixels et se met à jour aussitôt.
  5. Touchez « Tout télécharger en ZIP ». Les lignes HTML sous l'aperçu se reprennent directement avec « Copier ».

À quoi ça sert

  • Votre site ou blog: L'icône apparaît dans l'onglet du navigateur, dans les favoris et dans l'historique. Sans favicon, les navigateurs n'y affichent qu'un symbole neutre.
  • Boutique en ligne: Une icône reconnaissable dans l'onglet aide vos clients à retrouver votre boutique parmi de nombreuses pages ouvertes.
  • Applications web et tableaux de bord: Avec le manifest et les icônes de 192 et 512 pixels, le site peut être ajouté à l'écran d'accueil d'un smartphone comme une application.
  • Distinguer les environnements de test: Si vous gérez une version de test et une version en ligne du même site, créez pour chacune une icône avec sa propre couleur de fond et voyez immédiatement dans quel onglet vous travaillez.

Que contient le ZIP ?

  • favicon.ico en 16, 32 et 48 pixels – pour tous les navigateurs.
  • apple-touch-icon.png (180 px) – quand quelqu'un ajoute votre site à l'écran d'accueil de l'iPhone.
  • icon-192.png et icon-512.png avec site.webmanifest – pour Android et les sites installables.
  • einbauen.html avec les lignes à placer dans le <head> de votre page.

Envoyez tous les fichiers dans le dossier racine de votre site et ajoutez les lignes HTML. Sous WordPress, c'est encore plus simple : importez une icône de 512 px via Apparence → Personnaliser → Identité du site.

Questions fréquentes

À quoi doit ressembler le logo ?

Simple et marqué. À 16 pixels, les détails fins et le texte sont illisibles – souvent, l'initiale ou le symbole suffit.

Mon logo est-il envoyé en ligne ?

Non. Toutes les icônes sont créées dans votre navigateur.

Mon logo n'est pas carré : sera-t-il déformé ?

Non. Il est inséré en entier et centré. Un logo large laisse de la marge en haut et en bas, un logo haut à gauche et à droite.

Quand un fond coloré est-il utile ?

Quand un logo sombre se verrait à peine sur des onglets sombres, ou pour les icônes d'écran d'accueil, que l'iPhone n'affiche pas en transparence. Une forme ronde ou arrondie ressemble alors à une icône d'application.

Je vois toujours l'ancienne icône après l'installation.

Les navigateurs gardent les favicons en cache avec obstination. Rechargez la page sans le cache ou ouvrez-la dans une fenêtre de navigation privée. Les favoris se mettent aussi à jour au bout d'un moment.

Que contient le manifest ?

Le nom, une forme courte limitée à 12 caractères, les deux icônes d'application, la couleur choisie comme couleur de thème et l'affichage en application autonome. C'est un simple fichier texte, modifiable dans n'importe quel éditeur.

Dois-je envoyer tous les fichiers ?

Pour l'onglet du navigateur, favicon.ico suffit. Les autres fichiers servent à l'icône Apple, à Android et aux sites installables comme application.

Mes fichiers ne sont pas à la racine du site.

Adaptez alors les chemins. Dans les lignes HTML et dans le manifest, ils commencent par une barre oblique qui désigne la racine.