Aller au contenu

Favicon

Ce qu'est un favicon, où il apparaît, quels formats et tailles utiliser, et les erreurs courantes lors de sa création.

Un favicon est la petite icône qui identifie un site web dans les onglets du navigateur, les favoris, l'historique et certains résultats de recherche. Le nom vient de « favorites icon », le terme qu'Internet Explorer utilisait pour les favoris.

À l'origine, les navigateurs demandaient un fichier nommé favicon.ico à la racine du site. Le format ICO peut contenir plusieurs tailles dans un seul fichier, par exemple 16×16, 32×32 et 48×48 pixels. Le HTML actuel déclare les icônes avec un élément link dont l'attribut rel vaut icon, et le fichier peut être un PNG ou un SVG, en plus de l'ICO.

Les appareils Apple utilisent une icône tactile distincte pour les raccourcis de l'écran d'accueil, en général un PNG de 180×180. Les applications web installables listent des icônes plus grandes, souvent 192×192 et 512×512, dans un manifeste d'application web.

Formats et tailles de favicon

FichierFormatTailles courantes
favicon.icoICO16, 32, 48 px dans un seul fichier
Lien d'icônePNG ou SVGPNG 32×32, ou un SVG redimensionnable
Icône tactile ApplePNG180×180
Icônes du manifestePNG192×192, 512×512

Où apparaissent les favicons

  • Onglets du navigateur et barre d'adresse.
  • Favoris, listes de lecture et historique.
  • Raccourcis sur l'écran d'accueil des téléphones et tablettes.
  • Résultats de recherche et aperçus de liens dans certains services.

Créer un favicon

  1. Partez d'un logo carré, et non du nom complet de la marque.
  2. Simplifiez-le pour qu'il reste lisible à 16×16 pixels.
  3. Exportez les tailles en PNG, un SVG facultatif et un fichier ICO.
  4. Ajoutez les éléments link dans l'en-tête de la page et testez dans plusieurs navigateurs.

Dans un flux de publication réel

Un favicon absent apparaît comme une icône générique dans les captures d'onglets et la documentation. Avant de capturer des fenêtres de navigateur pour un guide ou une annonce, vérifiez que le favicon se charge. Les navigateurs mettent les favicons en cache de manière agressive, si bien qu'une ancienne icône peut subsister après une mise à jour.

Erreurs courantes

  • Utiliser un logo détaillé qui devient flou à 16 pixels.
  • Oublier l'icône tactile Apple, si bien que les téléphones affichent une capture de page à la place.
  • Servir une icône transparente qui disparaît sur les thèmes sombres du navigateur.
  • Tester dans un seul navigateur.

Une image à corriger tout de suite ?

Convertissez un logo entre PNG, JPG et WebP avec Image Converter, et vérifiez sa taille en pixels avec Screenshot Resolution Checker.

Questions fréquentes

Le fichier favicon.ico est-il encore nécessaire ?

De nombreux sites l'incluent encore, car certains outils le demandent à la racine du site. Un lien d'icône en PNG ou en SVG couvre les navigateurs actuels.

Un favicon peut-il être animé ?

Certains navigateurs affichent des favicons GIF animés, mais la prise en charge varie. Une icône fixe est le choix fiable.

Sources

Ressources associées

Vous prenez toujours les mêmes captures d'écran ?

Temposhot capture un écran, une fenêtre ou une zone à intervalles programmés et exporte l'ensemble en PDF, en images, en ZIP ou en MP4. Les outils gratuits du navigateur ne permettent de traiter qu'une image à la fois.

Télécharger pour MacDécouvrir les fonctionnalités

Ressources associées

Termes associés

Tous les termes du glossaire