FR

Comment créer un favicon pour votre site web

Dernière mise à jour : 28 octobre 2026

Le favicon, c’est la petite icône affichée à côté du nom de votre site dans les onglets du navigateur, les favoris, l’historique et, sur mobile, dans les résultats de recherche Google. Sans favicon, les navigateurs affichent un globe générique, et votre site a l’air inachevé. En créer un bon ne prend que quelques minutes.

Partir de la bonne image

  • Carrée, d’au moins 256 × 256 pixels, idéalement en PNG ou en SVG avec un fond transparent.
  • Simple : à 16 × 16 pixels, seules les formes épaisses restent lisibles. Un symbole ou une seule lettre fonctionne bien mieux qu’un logo complet avec du texte.
  • Contrastée, pour rester visible avec les thèmes clairs comme sombres des navigateurs.

Si votre logo est un fichier SVG, vous pouvez en exporter une grande version PNG avec SVG en PNG, et si votre image n’est pas encore carrée, Redimensionner une image vous aide à obtenir les bonnes dimensions.

Les fichiers nécessaires

Tous les outils ne cherchent pas les mêmes fichiers. Voici un ensemble raisonnable et moderne :

  • favicon.ico à la racine du site, contenant des versions de 16, 32 et 48 pixels. Les navigateurs et de nombreux autres outils demandent encore automatiquement /favicon.ico, même si votre code HTML pointe ailleurs.
  • Une icône SVG (facultative), que les navigateurs récents peuvent utiliser à n’importe quelle taille.
  • apple-touch-icon.png, en 180 × 180 pixels, utilisée lorsque quelqu’un ajoute votre site à l’écran d’accueil d’un iPhone ou d’un iPad.

Les résultats de recherche Google utilisent aussi votre favicon. Google demande, dans ses consignes, une icône carrée dont la taille est un multiple de 48 pixels : il suffit d’inclure la version 48 × 48 dans votre fichier ICO, ou de fournir un PNG de 96 ou 192 pixels.

Créer le fichier favicon.ico

  1. Ouvrez PNG en ICO et déposez votre PNG carré. Les fichiers JPG, WebP et SVG fonctionnent aussi.
  2. Cochez les tailles 16, 32 et 48. N’ajoutez 256 que si vous voulez aussi utiliser le fichier comme icône Windows.
  3. Téléchargez le fichier, puis placez-le dans le dossier racine de votre site sous le nom favicon.ico, pour qu’il soit accessible à l’adresse votresite.com/favicon.ico.

Ajouter le code HTML

Placez ces lignes dans la balise <head> de chaque page, en remplaçant les noms de fichiers par les vôtres :

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Les navigateurs qui comprennent le SVG utilisent le SVG, les autres se rabattent sur l’ICO. Si vous n’avez pas de version SVG, supprimez la deuxième ligne.

Pourquoi mon ancienne icône s’affiche-t-elle toujours ?

Les navigateurs gardent les favicons en cache très longtemps. Ouvrez directement l’adresse de l’icône et rechargez-la, ou vérifiez dans une fenêtre de navigation privée. Google met à jour l’icône dans ses résultats de recherche lors de sa prochaine exploration de votre page d’accueil, ce qui peut prendre des jours, voire des semaines.

Outils utilisés dans ce guide

Autres guides