Un seul fichier favicon.ico suffit-il ?

Généralement oui pour les navigateurs de bureau, à condition qu'il contienne les tailles 16, 32 et 48 px. Mais l'écran d'accueil de l'iPhone et le lancement d'applications Android nécessitent des fichiers PNG distincts ; il vaut donc mieux les préparer aussi.

Pourquoi mon nouveau favicon n'apparaît-il pas ?

Le plus souvent, c'est à cause du cache. Ouvrez la page dans une fenêtre de navigation privée, effacez les données du navigateur, ou renommez le fichier ou ajoutez un paramètre ?v=2. Les moteurs de recherche peuvent mettre plusieurs jours, voire davantage, à actualiser leur copie de l'icône.

Un favicon peut-il être un JPG ?

Certains navigateurs l'acceptent, mais le JPG ne gère pas la transparence et n'est pas le choix habituel. Utilisez plutôt le PNG, l'ICO ou le SVG.

Créer un favicon : tailles, formats et code HTML

Un favicon est la minuscule icône d'un site affichée dans les onglets du navigateur, les favoris et les résultats de recherche. Cela ressemble à un détail, mais un site sans favicon paraît inachevé, et une taille ou un format inadapté peut rendre l'icône floue. Ce guide explique quelles tailles prévoir, quel format choisir et quel code placer dans votre page.

Ce qu'est un favicon et où il apparaît

Un favicon (contraction de « favorite icon ») est une petite image carrée que les navigateurs affichent à côté du titre de la page dans un onglet, dans la liste des favoris et dans l'historique. Sur mobile, les résultats de recherche Google affichent aussi l'icône du site à côté de l'adresse : un favicon bien lisible aide donc les internautes à reconnaître votre site.

Si vous ne déclarez aucune icône, les navigateurs tentent généralement de récupérer /favicon.ico à la racine du site. S'il est absent, ils affichent un globe générique ou un symbole de page vierge.

Quelles tailles prévoir

Il n'existe pas de taille universelle, car les différents usages font appel à des fichiers différents. En pratique, un petit jeu de fichiers suffit, et vous pouvez tous les préparer à partir d'un seul PNG carré d'au moins 512 px de côté.

Taille	Utilisation
16x16 px	Onglet du navigateur (écrans de densité standard)
32x32 px	Onglet sur les écrans haute densité, barre des tâches
48x48 px	Certains navigateurs et moteurs de recherche, raccourcis Windows
180x180 px	apple-touch-icon, lorsqu'un site est ajouté à l'écran d'accueil d'un iPhone ou d'un iPad
192x192 px	Manifeste web, écran d'accueil Android
512x512 px	Manifeste web, écrans de démarrage et icônes d'application plus grandes

ICO, PNG ou SVG

L'ICO est un ancien format conteneur qui peut contenir plusieurs tailles (par exemple 16, 32 et 48 px) dans un seul fichier. Tous les navigateurs le prennent en charge : /favicon.ico reste donc utile comme solution de repli.

Le PNG est simple et fiable : il convient aux versions de 32, 180, 192 et 512 px et gère la transparence. Le SVG est un format vectoriel pris en charge par les navigateurs récents : un seul fichier reste net à toutes les tailles et peut même s'adapter au mode sombre. Toutefois, Safari et certains outils plus anciens ne gèrent que partiellement les favicons SVG ; l'approche la plus sûre consiste donc à les combiner : ICO en solution de repli, PNG pour les icônes Apple et le manifeste, et SVG en complément facultatif.

Comment créer un favicon à partir d'un PNG

Partez d'une image carrée, idéalement de 512x512 px ou plus, au dessin clair et simple. Si vous n'avez qu'un JPG, vous pouvez d'abord le convertir en PNG pour pouvoir ajouter ensuite un arrière-plan transparent dans un éditeur d'images.

Préparez un PNG carré avec un logo simple ou une seule lettre.
Convertissez-le en ICO avec un outil PNG vers ICO et enregistrez-le sous le nom favicon.ico.
Enregistrez séparément des copies PNG en 180x180 (apple-touch-icon.png), 192x192 et 512x512 pour le manifeste web.
Téléversez les fichiers à la racine du site et ajoutez les balises HTML dans le <head>.

Les balises HTML à ajouter

Placez ces lignes dans le <head> de votre page (adaptez les chemins à l'emplacement de vos fichiers) :

Dans site.webmanifest, sous icons, indiquez les fichiers PNG de 192x192 et de 512x512. Si vous n'avez pas de SVG, ignorez simplement cette ligne.

Erreurs courantes

Image non carrée : le navigateur l'écrase ou la recadre, et l'icône paraît déformée. Partez toujours d'un carré.
Trop de détails : à 16x16 px, les petits textes et les ombres se transforment en tache. Utilisez une forme simple, des couleurs franches et un fort contraste.
Source trop petite : agrandir une petite image la rend floue. Réduire une grande image est beaucoup plus sûr.
Arrière-plan transparent sur un onglet sombre : un logo foncé peut disparaître. Vérifiez-le avec les thèmes clair et sombre, ou ajoutez une couleur de fond.
Cache : les navigateurs conservent obstinément les favicons en mémoire, et l'ancienne icône peut donc continuer à s'afficher après modification. Testez dans une fenêtre de navigation privée, effectuez un rechargement forcé (Ctrl+F5) ou ajoutez une version, par exemple /favicon.ico?v=2.

Un exemple complet, du début à la fin

Supposons que vous ayez un logo PNG de 1024x1024 px et que vous souhaitiez un jeu d'icônes complet pour votre site. Regardez d'abord le logo réduit à 16x16 px : reconnaissez-vous encore sa forme ? Si ce n'est pas le cas, réalisez une version simplifiée, par exemple la seule première lettre sur un fond uni. Ce n'est qu'ensuite qu'il faut exporter les différentes tailles.

Préparez ensuite les fichiers : favicon.ico (16, 32 et 48 px dans un seul fichier), apple-touch-icon.png (180x180), icon-192.png et icon-512.png. Cela fait quatre fichiers, ce qui suffit dans presque toutes les situations. Téléversez-les à la racine du site, ajoutez les balises dans le <head> et ouvrez la page dans une fenêtre de navigation privée pour vérifier le résultat.

Comment vérifier que tout fonctionne

Ouvrez directement https://votre-site/favicon.ico dans le navigateur : vous devez voir l'icône, et non une erreur 404.
Dans les outils de développement (F12, onglet Réseau), rechargez la page et vérifiez que les requêtes de l'icône renvoient le statut 200.
Regardez l'onglet avec un thème de navigateur clair puis sombre : le logo doit rester lisible dans les deux cas.
Sur un téléphone, ajoutez le site à l'écran d'accueil et vérifiez que l'icône de 180 px s'affiche, et non une capture d'écran de la page.
Assurez-vous que site.webmanifest est un JSON valide et que les chemins qu'il contient correspondent à des fichiers réels.