Créer un favicon : les tailles et fichiers dont votre site a vraiment besoin

En bref : un site moderne a besoin d’un favicon.ico de 16, 32 et 48 pixels (ou au moins d’un PNG de 32 pixels) pour l’onglet du navigateur, éventuellement d’un favicon SVG net à toutes les tailles, d’une icône tactile de 180 × 180 pour les smartphones et tablettes qui ajoutent le site à leur écran d’accueil, et d’un manifeste d’application web qui liste des icônes de 192 × 192 et 512 × 512 pixels, idéalement avec une version adaptative (maskable). Chaque fichier s’intègre par une seule ligne dans le <head> de la page.

Ce guide explique à quoi sert chaque fichier, comment dessiner un signe encore lisible à 16 pixels, pourquoi les icônes adaptatives demandent plus de marge et comment créer tout le jeu à partir d’une seule image dans votre navigateur avec Favicon et icônes d’app — balises HTML et manifeste compris. Il se termine par la vérification du résultat et la raison pour laquelle les navigateurs affichent parfois encore l’ancienne icône.

Quelles tailles de favicon pour un site web ?

Navigateurs, systèmes d’exploitation et écrans d’accueil choisissent chacun, parmi ce que la page propose, l’icône qui leur convient. Un jeu complet et actuel se présente ainsi :

Le manifeste d’application web est un petit fichier JSON (site.webmanifest) avec le nom du site, ses icônes, une couleur de thème et la façon dont il s’ouvre une fois installé. Son format est une spécification du W3C. Même si vous ne prévoyez aucune application web installable, les navigateurs le lisent pour les icônes de l’écran d’accueil.

ICO, PNG ou SVG : quel format pour le favicon ?

• ICO est le plus ancien format et toujours le plus robuste : un seul fichier contient plusieurs tailles et fonctionne là où rien d’autre ne fonctionne. Placez-le à la racine du site.
• Les favicons PNG sont de simples tailles uniques. Les navigateurs modernes les acceptent directement ; proposez 16 et 32 pixels.
• Les favicons SVG se redimensionnent sans perte et sont généralement minuscules. Tous les navigateurs ne les utilisent pas : ils complètent l’ICO et les PNG au lieu de les remplacer.
• Les icônes tactiles et du manifeste sont toujours en PNG : opaque pour l’icône tactile, transparentes là où c’est permis pour les icônes normales du manifeste.

Savoir si votre logo doit exister en SVG ou en PNG est une question à part, comparée dans SVG ou PNG pour un logo.

Dessiner un favicon lisible à 16 pixels

Sur 16 × 16 pixels, il y a 256 points à disposition. Un logo complet avec son nom devient une tache grise. Ce qui fonctionne :

• Le symbole, pas le logo entier. Une lettre, deux initiales ou le seul pictogramme du logo — jamais un slogan ni un petit texte.
• Un contraste marqué. Un signe clair sur un fond sombre, ou l’inverse. L’onglet peut être clair ou sombre ; un signe sans fond propre doit fonctionner sur les deux.
• Des formes épaisses, peu de détails. Les traits fins et les petits espaces disparaissent à la réduction. Simplifiez plutôt que de rétrécir.
• Remplir le carré. Un logo large dans un carré laisse une fine bande au milieu ; recadrez sur le symbole ou redessinez-le en carré.
• Partir d’une grande source. Créez les icônes à partir d’un SVG ou d’une image d’au moins 512 pixels de côté, pour que chaque taille soit une vraie réduction et que rien ne soit agrandi.

Pas encore de logo ? Une seule lettre ou un emoji sur la couleur de la marque fait un très bon favicon, lisible à toutes les tailles.

Icônes adaptatives : marge et zone de sécurité

Certains systèmes découpent les icônes de l’écran d’accueil en cercle, en carré arrondi ou dans une autre forme de leur choix. Une icône normale perd alors ses coins — ou flotte, petite, sur un fond blanc. Une icône adaptative (maskable) règle ce problème : elle est opaque jusqu’aux bords et tout l’essentiel se trouve dans la zone de sécurité, un cercle central dont le rayon vaut 40 % de la taille de l’icône, comme le définit la spécification du manifeste d’application web. Ce qui se trouve en dehors peut être coupé.

En pratique, cela signifie une marge généreuse : un signe qui remplit l’icône normale bord à bord doit être nettement plus petit sur l’icône adaptative, sur une couleur de fond unie. L’icône tactile des smartphones et tablettes est elle aussi opaque, car les zones transparentes s’afficheraient en noir ; ses coins sont arrondis par le système.

Créer un favicon avec Favicon et icônes d’app

Favicon et icônes d’app crée le jeu complet en un seul traitement, dans votre navigateur : l’image est traitée sur votre appareil et n’est jamais téléversée chez nous (plus de détails sur la page sécurité).

1. 1

   Choisir la source

   Ajoutez une image — idéalement un SVG ou un PNG carré de votre signe — ou réglez « Créer les icônes à partir de » sur « Un texte ou un emoji » et choisissez le texte, sa couleur, la couleur derrière et une police.

2. 2

   Cadrer et espacer

   Pour une image non carrée, choisissez « Faire tenir toute l’image » ou « Découper un carré » et la partie à conserver. « Espace autour de l’image ou du texte » ajoute une marge à chaque icône.

3. 3

   Couleurs et manifeste

   Choisissez l’arrière-plan des icônes Apple et adaptatives, des coins arrondis pour l’icône Apple si vous le souhaitez, le nom de l’app, le nom court sous l’icône de l’écran d’accueil, la couleur du thème et la façon dont le site s’ouvre une fois installé.

4. 4

   Indiquer l’emplacement des fichiers

   « Emplacement des fichiers sur le site web » est inscrit dans les balises HTML et le manifeste — / pour la racine du site, ou un dossier comme /icons/.

5. 5

   Télécharger et ajouter les balises

   Enregistrez tous les fichiers d’un coup, déposez-les sur votre site comme d’habitude et collez les balises de snippet.html dans le <head> de chaque page.

Le résultat : favicon.ico (16, 32 et 48 px), les PNG de 16 et 32 pixels, l’icône tactile Apple de 180 pixels, les icônes du manifeste de 192 et 512 pixels, une icône adaptative de 512 pixels dont le contenu reste dans la zone de sécurité, site.webmanifest et snippet.html. Avec une source SVG s’ajoute un icon.svg nettoyé, repris dans les balises ; en option, browserconfig.xml avec une vignette pour les anciennes vignettes Windows. Les petites tailles sont renforcées en netteté après la réduction, sauf si vous le désactivez, et un avertissement apparaît si la source a dû être agrandie. Avec les réglages par défaut, l’extrait est le suivant :

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#ffffff" />

L’outil traite une source par traitement, et un traitement correspond à une opération. Vos premiers pas dans l’application sont décrits dans votre premier outil ; tous les outils de création se trouvent sous Créer.

Vérifier le favicon et vider le cache

Les navigateurs conservent les favicons longtemps, souvent plus longtemps que la page elle-même. Si l’ancienne icône apparaît encore après une mise à jour, c’est généralement le cache, pas les fichiers :

• Ouvrez le fichier directement, par exemple https://www.example.ch/favicon.ico. Si la nouvelle icône s’y affiche, le dépôt a fonctionné.
• Rechargez sans le cache ou ouvrez la page dans une fenêtre privée.
• Modifiez la référence du fichier quand vous remplacez une icône, par exemple /favicon.ico?v=2 dans les balises, pour que les navigateurs la rechargent.
• Contrôlez l’onglet en thème clair et sombre et sur l’écran d’accueil d’un smartphone — c’est là que se voient un contraste faible ou une marge insuffisante.
• Regardez le code source : les balises vont dans le <head> de chaque page, pas seulement de la page d’accueil.

Questions fréquentes

Quelle taille doit avoir un favicon ?

Pour l’onglet, 16 et 32 pixels (dans un ICO, avec 48 pixels en plus) ; pour les écrans d’accueil, 180 pixels pour l’icône tactile et 192 et 512 pixels dans le manifeste. Partez d’une source d’au moins 512 pixels ou d’un SVG.

Un seul favicon.ico suffit-il encore ?

Pour l’onglet du navigateur, le plus souvent oui. Les écrans d’accueil et les applications web installées cherchent toutefois l’icône tactile et les icônes du manifeste ; sans elles, ils affichent une capture ou une lettre générique au lieu de votre signe.

Peut-on utiliser un emoji comme favicon ?

Oui. Dans Favicon et icônes d’app, choisissez « Un texte ou un emoji » et une couleur de fond ; l’emoji est dessiné avec les polices fournies et devient un fichier image normal dans chaque taille, identique sur tous les appareils.

Pourquoi mon nouveau favicon ne s’affiche-t-il pas ?

En général à cause du cache du navigateur. Ouvrez directement l’adresse de l’icône, rechargez sans le cache et ajoutez un paramètre de version à la référence du fichier. Vérifiez aussi que le chemin des balises correspond à l’emplacement réel des fichiers.

Prêt pour une icône nette dans chaque onglet ? Ouvrez les outils de création, voyez quels formats d’image sont pris en charge, lisez comment alléger les images d’un site, découvrez comment les agences préparent les fichiers de leurs clients, ou créez un compte gratuit.